title: MVC4 - refreshing partial view after deleting object with Ajax.ActionLink acting unexpectedly
body: <p>I have a DIV (<code>tenant-reference-photos</code>) 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.</p>
  
  <p>I'm using an <code>Ajax.ActionLink</code> for the delete action:</p>
  
  <pre><code>&lt;div&gt;
      @Ajax.ActionLink("Delete", "DeleteReference",
      new { id = photo.ImageId },
      new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", 
                        UpdateTargetId = "tenant-reference-photos" },
      new { @class = "btn btn-primary" })
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller actions:</p>
  
  <pre><code>[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();
  }
  </code></pre>
  
  <p>When I click delete, the action fires and record is deleted from the database. The problem is with <code>return PartialView("_TenantReferencePhotosPartial");</code>. When the action tries to return the partial, I get a NullReferenceException at <code>@if (Model.ReferencePhotos.Count == 0)</code>.</p>
  
  <p><strong>_TenantReferencePhotosPartials.cshtml</strong></p>
  
  <pre><code>&lt;div&gt;
  @if (Model.ReferencePhotos.Count == 0)
  {
      &lt;h3&gt;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"
              })&lt;/h3&gt;
  }
  else
  {
      foreach (var photo in Model.ReferencePhotos)
      {
      &lt;ul class="thumbnails"&gt;
          &lt;li class="span8"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;img src="@Url.Action("GetReference", "Tenants", new { id = photo.ImageId })" alt="@photo.Name") /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="span4 btn-group btn-group-vertical"&gt;
              &lt;a href="#" class="btn btn-primary" id="showEditPhotoModal" role="button" data-toggle="modal"&gt;Edit&lt;/a&gt;
              @Ajax.ActionLink("Delete", "DeleteReference",
           new { id = photo.ImageId },
           new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "tenant-reference-photos" },
           new { @class = "btn btn-primary" })
          &lt;/li&gt;
      &lt;/ul&gt;
      }
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>