0

ユーザーがMVC画像をアップロードできるアプリケーションがあります。これは としてデータベースに保存されていますvarbinary(max)。現在、画像を削除することはできません。ユーザーは新しいもののみをアップロードできます。

ボタンを押してもページにとどまっているときにnull、関数で画像を設定または削除するにはどうすればよいですか?jquery

[編集] クライアント側の画像を削除したいのですが、ページがコントローラーに戻されると、画像の値を読み取ることができます。そして、データベースへの余分な呼び出しを行わずに、他のすべてを保存します。

[Edit2] これはコントローラーです:

public ActionResult Edit(int id)
    {
        var item = repository.GetItem(id);

        string base64 = null;

        if (item.Image != null)
        {
            using (var ms = new MemoryStream(item.Image.ToArray()))
            {
                base64 = Convert.ToBase64String(ms.ToArray());
            }
        }

        ViewData["Image"] = !String.IsNullOrEmpty(base64) ? String.Format("data:image/png;base64, {0}", base64) : String.Empty;

        return View(item);
    }

これはビューの一部です:

 @Html.LabelFor(model => model.Item.Image)
 @if (@Model.Item.Image != null) 
 {
    <img src="@ViewData["Image"]" id="removeImage" />
    @Html.ValidationMessage("Image")
    @Html.ActionLink("delete", null, null, new { id = "deleteImage" })
 }
 <input type="file" name="file" id="file" />

ActionLinkこれは、クリックされたときに画像を非表示にするスクリプトです。

<script type="text/javascript" lang="javascript">
$(document).ready(function () {
    $('#deleteImage').click(function () {
        $('#removeImage').hide();
        return false;
    });
});
</script>

がActionLink押されると、画像はjquery関数で非表示に設定されています。そして、このフォームをサーバーに投稿すると、画像はnull. 問題は、なぜこれが機能するのかということです。

4

1 に答える 1

1

AJAX 呼び出しを使用できます。たとえば、データベースから画像を削除するコントローラー アクションを作成し、AJAX 呼び出しを使用してこのアクションを呼び出すことができます。

[HttpDelete]
public ActionResult Delete(int id)
{
    if (repository.Delete(id))
    {
        return Json(new { success = true });
    }

    return Json(new { success = false });
}

次に、ビューにアンカーを含めることができます。

@Html.ActionLink(
    "Delete image",              // link text
    "Delete",                    // action name
    new { id = "123" },          // route values - put the id of the image here
    new { @class = "delete" }    // html attributes
)

AJAX化できること：

$(function() {
    $('.delete').click(function() {
        $.ajax({
            url: this.href,
            type: 'DELETE',
            success: function(result) {
                if (result.success) {
                    alert('The image was successfully deleted');
                } else {
                    alert('An error occurred and the image was not deleted');
                }
            }
        });
        return false;
    });
});
于 2013-05-08T07:18:17.627 に答える