MVC4 - освежающий частичный вид после удаления объекта с Ajax.ActionLink действует неожиданно

Question

У меня есть 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");. Когда действие пытается вернуть частичное, я получаю исключение 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> 

Даже если есть несколько фотографий в коллекции и один удаляется, исключение еще выброшены на линии, упомянутой выше. Некоторая помощь будет оценена по достоинству.

Answer 1

Как устранить вышеуказанную ошибку?

У меня были некоторые проблемы с 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(); 
} 

UPDATE: Обновленного вопрос скидывает свой оригинальный ответ. Но позвольте мне включить обновленный ответ здесь сначала (а затем очистить потом). Поэтому причина, по которой у вас есть нулевая эталонная ошибка, заключается в том, что вы не возвращаете модель:

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;