title: Update Partial View Within Partial View Using MVC Ajax
body: <p>I have an MVC 5 web application that contains a Razor View called <strong>CreateProposal</strong> and it accepts a ViewModel called ProposalViewModel. This View, includes a reference to a Partial View called <strong>_Proposal</strong> which also accepts the ViewModel.</p>
  
  <p><strong>CreateProposal View</strong></p>
  
  <pre><code>@model STAR.UI.ViewModels.ProposalViewModel
  
  &lt;div class="row"&gt;
      @Html.Partial("_Proposal", Model)
  &lt;/div&gt;
  </code></pre>
  
  <p>The Partial View <strong>_Proposal</strong> also references another Partial View called <strong>_ExistingAttachments</strong> which also accepts the ViewModel.</p>
  
  <p><strong>_Proposal Partial</strong></p>
  
  <pre><code>@model STAR.UI.ViewModels.ProposalViewModel
  
  &lt;div class="col-md-6" id="proposalAttachments"&gt;
       @Html.Partial("_ExistingAttachments", Model)
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>_ExistingAttachments Partial</strong>  </p>
  
  <pre><code>@model STAR.UI.ViewModels.ProposalViewModel
  
  &lt;div class="form-group"&gt;
      &lt;label&gt;Existing Attachments&lt;/label&gt;&lt;br /&gt;
      @Html.Hidden("hiddenAttachmentID", "", new { @id = "hiddenAttachmentID" })
      @if (Model.Attachments != null)
      {
          foreach (var upload in Model.Attachments)
          {
              &lt;a href="~/Content/uploads/@upload.fileName"&gt;@upload.fileName&lt;/a&gt;
              &lt;a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#ModalDeleteAttachment" data-id="@upload.fileID"&gt;Remove&lt;/a&gt;&lt;br /&gt;
          }
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>_ExistingAttachments Partial spits out a list of a href links and a Remove link beside each. Once the user clicks the remove link on the item they want to remove, the id of that entry is then stored in the hidden text box using a bit of JQuery.</p>
  
  <p><strong>JQuery</strong> </p>
  
  <pre><code>$(document).on('click', '.btn.btn-danger', function () {
          var id = $(this).data('id');
          //alert(id);
          $('#hiddenAttachmentID').val(id);
  
      });
  </code></pre>
  
  <p>A modal confirm box then is presented to the user and once they confirm the remove, an Ajax call is made which is supposed to then update the Partial <strong>_ExistingAttachments</strong> within the Partial <strong>_Proposal</strong></p>
  
  <pre><code>$.ajax({
          type: "GET",
          url: '/Proposal/DeleteAttachment/',
          data: { id: $("#hiddenAttachmentID").val() },
          error: function () {
              alert("An error occurred.");
          },
          success: function (data) {
              alert("Worked.");
              $("#proposalAttachments").html(data);
          }
  
  });
  </code></pre>
  
  <p><strong>MVC Controller</strong></p>
  
  <pre><code>public ActionResult DeleteAttachment(int id)
  {
      //Delete entry using passed in id
      ProposalViewModel model = new ProposalViewModel();
      //Code to populate ViewModel
      return PartialView("_ExistingAttachments", model);
  }
  </code></pre>
  
  <p>Everything works well until I expect the Partial View <strong>_ExistingAttachments</strong> to be refreshed, but this doesn't happen.</p>
  
  <p>Apologies for the long question, but hopefully can spot what I am doing wrong.</p>
  
  <p>Please help.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I should add, the code makes it to Ajax Success function and alert("Worked."); is called. However, instead of the Partial Refresh, my Edit Action within the same Controller is called</p>
  
  <pre><code>[HttpPost]
  public ActionResult EditProposal(ProposalViewModel model)
  </code></pre>