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
)

你可以 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;
    });
});
于 2013-05-08T07:18:17.627 回答