MVC4 - 删除对象后刷新部分视图，Ajax.ActionLink意外动作

Question

I have a DIV ( tenant-reference-photos ) that holds a partial view that display photos. Beside each photo is a delete button. When it's clicked, I want the photo to be removed from the list and only the DIV to be updated by Ajax.

I'm using an Ajax.ActionLink for the delete action:

<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>

Controller actions:

[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();
}

When I click delete, the action fires and record is deleted from the database. The problem is with return PartialView("_TenantReferencePhotosPartial"); . When the action tries to return the partial, I get a NullReferenceException at @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>

Even if there are several photos in the collection and one is deleted, the exception is still thrown at the line mentioned previously. Some help would be appreciated.

Answer 1

How do I resolve the above error?

I've had some trouble with jQuery $ not being defined in partials even though it's there in the source

I believe this is in connection with your problem. When I encounter this on a partial view, what always works for me is to include it in a script section . So on your _Layout.cshtml where you write your scripts you can add this:

// Do this after you referenced jquery
@RenderSection("scripts", required: false)
<script>
// some script references
</script>

Then on your view you do this:

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

Once above is resolved, how do I update the only the DIV? Since you deleted the item I would assume you would want to delete the div - that represents the item.

If my assumption is correct then why not give it an Id so you can delete it afterwards in your else statement:

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

UPDATE: Your updated question throws off my original answer. But let me include the updated answer here first (and then clean-up afterwards). So the reason you are having a null reference error is because you are not returning the model:

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;