Question

我有一个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函数在hide上设置图像。当我将此表单发回服务器时，图像为null。所以问题是，为什么这有用呢？

Answer 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
)

你可以AJAXify：

$(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;
    });
});

按下按钮时将图像设置为null

1 个答案: