用Ajax删除对象后刷新部分视图.ActionLink动作异常

本文关键字：ActionLink 视图 异常 刷新部 Ajax 删除 对象 | 更新日期: 2023-09-27 18:07:55

我有一个div (tenant-reference-photos)，它包含显示照片的部分视图。每张照片旁边都有一个删除按钮。当它被点击，我希望照片从列表中删除，只有DIV被Ajax更新。

我使用Ajax.ActionLink的删除操作:

<div>
    @Ajax.ActionLink("Delete", "DeleteReference",
    new { id = photo.ImageId },
    new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", 
                      UpdateTargetId = "tenant-reference-photos" },
    new { @class = "btn btn-primary" })
</div>

控制器动作:

[HttpGet]
public ActionResult DeleteReference(int id)
{
    return View(refPhotoRepository.Find(id));
}
[HttpPost, ActionName("DeleteReference")]
public ActionResult DeleteReferenceConfirmed(int id)
{
    try
    {
        refPhotoRepository.Delete(id);
        refPhotoRepository.Save();
        return PartialView("_TenantReferencePhotosPartial");
    }
    catch (Exception e)
    {
         // handle exception   
    }
    return View();
}

当我单击delete时，动作触发，记录从数据库中删除。问题在于return PartialView("_TenantReferencePhotosPartial");。当动作试图返回部分，我得到一个NullReferenceException在@if (Model.ReferencePhotos.Count == 0)。

_TenantReferencePhotosPartials.cshtml 

<div>
@if (Model.ReferencePhotos.Count == 0)
{
    <h3>You haven't uploaded any references! 
        @Ajax.ActionLink("Upload now?",
            "TenantUploadReference",
            new AjaxOptions
            {
                UpdateTargetId = "tenant-reference-photos",
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "GET",
                LoadingElementId = "ajax-loader"
            })</h3>
}
else
{
    foreach (var photo in Model.ReferencePhotos)
    {
    <ul class="thumbnails">
        <li class="span8">
            <a href="#" class="thumbnail">
                <img src="@Url.Action("GetReference", "Tenants", new { id = photo.ImageId })" alt="@photo.Name") />
            </a>
        </li>
        <li class="span4 btn-group btn-group-vertical">
            <a href="#" class="btn btn-primary" id="showEditPhotoModal" role="button" data-toggle="modal">Edit</a>
            @Ajax.ActionLink("Delete", "DeleteReference",
         new { id = photo.ImageId },
         new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "tenant-reference-photos" },
         new { @class = "btn btn-primary" })
        </li>
    </ul>
    }
}
</div>

即使集合中有几张照片，其中一张被删除，仍然会在前面提到的行抛出异常。

用Ajax删除对象后刷新部分视图.ActionLink动作异常

如何解决上述错误?

我有一些问题与jQuery $没有被定义在部分甚至虽然它在源文件

中
我相信这与你的问题有关。当我在局部视图上遇到这种情况时，对我来说总是有效的是将其包含在script section中。在你的_Layout.cshtml上你可以在你写脚本的地方加上: 
// Do this after you referenced jquery
@RenderSection("scripts", required: false)
<script>
// some script references
</script>

然后在视图中这样做:

@section scripts {
    $(function() {
        <script>
            function onDeleteReferenceSuccess(data, status, xhr) {
                if (data.error) { /* handle error */ }
                else {
                    window.location.reload(true);
                }
            }
        </script>
    });
}

解决了上面的问题后，我如何更新唯一的DIV?既然您删除了项目，那么我假定您想要删除代表项目的div。

如果我的假设是正确的，那么为什么不给它一个Id，这样你就可以在你的else语句中删除它:

else {
    // instead of this -> window.location.reload(true);
    $("#id_of_the_div").remove();
}

更新:你更新后的问题与我原来的答案不符。但让我先在这里给出最新的答案(然后再进行清理)。所以你有一个空引用错误的原因是因为你没有返回模型:

refPhotoRepository.Delete(id);
refPhotoRepository.Save();
// build the model here and pass it to the partial view
// this will most probably involve querying your data store again
var model = goBuildTheModel();
return PartialView("_TenantReferencePhotosPartial", model;
相关文章：