使用Ajax.ActionLink删除后，从视图页面中删除图像

Remove image from view page after deleting with Ajax.ActionLink

本文关键字：删除 图像 视图 Ajax ActionLink 使用      更新时间：2023-09-26

我正在使用razor视图开发asp.net mvc3应用程序。我必须实现的业务逻辑比我的答案要复杂得多，但你可以猜到我对JS/jQuery的了解很差，所以我一步一步来。

从控制器中，我得到一个包含视图中所有图片的列表，然后像这样显示它们:

@foreach (var image in ViewBag.DocumentPicture)
    {
        if (image != null)
        { 
            <img src="file:''5.3.2.7'upload'@image.Name" alt="docImg" style="width: 190px; height: auto"/>
            @Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
            new AjaxOptions
            {
                Confirm = "Are you sure?",
                //OnComplete = "$('#blah').attr('src', '#').attr('style', 'display:none;'); $('#Image1').attr('src', '#').attr('style', 'display:none;'); $('#DelPic').attr('style', 'display:none;');"
            })
        }
    }

我不想重新加载我的整个视图，所以我只想从视图中删除图像，一旦它的删除被确认。我不知道我是否可以把它做成hidden或其他更好的东西，但希望这不是一个困难的任务，我只是没有太多的知识在JS/jQuery。

p。S

下面是渲染后的HTML:

<div id="document-image-gallery">
<img src="file:''5.3.2.7'upload'10005'docPicTest1.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=26">Delete</a>            
<img src="file:''5.3.2.7'upload'10005'docPicTest2.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=27">Delete</a>            
<img src="file:''5.3.2.7'upload'10005'docPicTest3.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=28">Delete</a>            
<img src="file:''5.3.2.7'upload'10005'docPicTest4.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=29">Delete</a>            
<img src="file:''5.3.2.7'upload'10005'docPicTest5.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=30">Delete</a>
</div>

我宁愿使用标准链接:

@foreach (var image in ViewBag.DocumentPicture)
{
    if (image != null)
    {
        <div>
            <img src="file:///5.3.2.7/upload/@image.Name" alt="docImg" style="width: 190px; height: auto" />
            @Html.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id }, new { @class = "delete" })
        </div>
    }
}

，我将不显眼地ajax化:

<script type="text/javascript">
    $(document).on('click', '.delete', function() {
        if (confirm('Are you sure?')) {
            $.ajax({
                url: this.href,
                type: 'POST',
                context: this,
                success: function(result) {
                    $(this).closest('div').remove();
                }
            });
        }
        return false;
    })
</script>

这允许我们捕获在AJAX请求的成功回调中单击的链接，找到最接近的包含div并将其从DOM中删除。显然，为了避免在实际应用中混合HTML和标记，我的答案中显示的javascript片段应该放在一个单独的js文件中，您可以简单地从视图中引用。

In CSHTML

@foreach (var image in ViewBag.DocumentPicture)
{
    if (image != null)
    { 
        <img src="file:''5.3.2.7'upload'@image.Name" alt="docImg" style="width: 190px; height: auto"/>
        @Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
        new AjaxOptions
        {
            Confirm = "Are you sure?",
            OnComplete = "DeleteImage"
        })
    }
}

JavaScript函数

function DeleteImage() {
   $(this).prev().remove(); //get previous sibling http://api.jquery.com/prev/
}
相关文章：