我正在使用 razor View 开发 asp.net mvc3 应用程序。我必须实现的业务逻辑比我的答案更复杂,但你可以猜到我对 JS/jQuery 的了解很差,所以我一步一步来。
从 Controller 中我得到一个列表,其中包含我必须在 View 中显示的所有图片,然后像这样显示它们:
@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;');"
})
}
}
我不想重新加载整个 View ,所以我只想在确认删除后将图像从 View 中删除。我不知道我是否可以将其隐藏或其他更好的东西,但希望这不是一项困难的任务,我只是对 JS/jQuery 没有太多了解。
附注
这是渲染的 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>
}
}
我会不引人注目地进行 AJAXify:
<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 文件中,您可以简单地从 View 中引用该文件。
关于javascript - 使用 Ajax.ActionLink 删除后从 View 页面中删除图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16893145/