0

我有一个 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();
}

当我单击删除时，该操作将触发并从​​数据库中删除记录。问题出在return PartialView("_TenantReferencePhotosPartial");. 当操作尝试返回部分时，我在@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>

即使集合中有几张照片并删除了一张，仍然会在前面提到的行处抛出异常。一些帮助将不胜感激。

4

1 回答 1

2

如何解决上述错误？

即使在源代码中也没有在部分中定义 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;
于 2013-04-08T10:52:52.267 回答