Update Partial View Within Partial View Using MVC Ajax

Question

I have an MVC 5 web application that contains a Razor View called CreateProposal and it accepts a ViewModel called ProposalViewModel. This View, includes a reference to a Partial View called _Proposal which also accepts the ViewModel.

CreateProposal View

@model STAR.UI.ViewModels.ProposalViewModel
<div class="row">
 @Html.Partial("_Proposal", Model)
</div>

The Partial View _Proposal also references another Partial View called _ExistingAttachments which also accepts the ViewModel.

_Proposal Partial

@model STAR.UI.ViewModels.ProposalViewModel
<div class="col-md-6" id="proposalAttachments">
 @Html.Partial("_ExistingAttachments", Model)
</div>

_ExistingAttachments Partial

@model STAR.UI.ViewModels.ProposalViewModel
<div class="form-group">
 <label>Existing Attachments</label><br />
 @Html.Hidden("hiddenAttachmentID", "", new { @id = "hiddenAttachmentID" })
 @if (Model.Attachments != null)
 {
 foreach (var upload in Model.Attachments)
 {
 <a href="~/Content/uploads/@upload.fileName">@upload.fileName</a>
 <a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#ModalDeleteAttachment" data-id="@upload.fileID">Remove</a><br />
 }
 }
</div>

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

JQuery

$(document).on('click', '.btn.btn-danger', function () {
 var id = $(this).data('id');
 //alert(id);
 $('#hiddenAttachmentID').val(id);
 });

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 _ExistingAttachments within the Partial _Proposal

$.ajax({
 type: "GET",
 url: '/Proposal/DeleteAttachment/',
 data: { id: $("#hiddenAttachmentID").val() },
 error: function () {
 alert("An error occurred.");
 },
 success: function (data) {
 alert("Worked.");
 $("#proposalAttachments").html(data);
 }
});

MVC Controller

public ActionResult DeleteAttachment(int id)
{
 //Delete entry using passed in id
 ProposalViewModel model = new ProposalViewModel();
 //Code to populate ViewModel
 return PartialView("_ExistingAttachments", model);
}

Everything works well until I expect the Partial View _ExistingAttachments to be refreshed, but this doesn't happen.

Apologies for the long question, but hopefully can spot what I am doing wrong.

Please help.

UPDATE

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

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

• Ehsan Sajjad: is your ajax call completing successfully?
• tcode: @EhsanSajjad Yes, the alert("Worked.") within the Ajax Success function is called.
• Ehsan Sajjad: can you check by alert(data) what is coming back?
• tcode: @EhsanSajjad I tried what you said, alert(data), and I can see the data coming back is all the correct html as I would expect.
• Jasen: If you are hitting POST EditProposal then you have a form that is submitting. This can happen if you're not careful about the buttons on the page as it can act as a default submit. There is also likely a caching issue due to the AJAX GET so you would not hit break points on the controller's delete action since the browser uses the cached version. You can verify this with the browser's network monitor.

Answer 1

Folks, finally got it solved thanks to Jasen's help. After my Ajax call was complete, the code then redirected to another page. Obviously I didn't want this to happen as I just wanted the partial view to update on my page, but then remain on the page.

The culprit was actually the confirm button in my Modal. It was

<input type="submit" id="mySubmitDeleteAttachment" class="btn btn-primary" value="Yes, please delete" />

This caused the application to carry out a POST after the Ajax call. So I instead changed to this

<button type="button" id="mySubmitDeleteAttachment" class="btn btn-default">Yes, please delete</button>

And everything is now working as expected.

Answer 2

Seems all your markup and code blocks good. Probably your ajax get request cached

Try by adding cache:false to your ajax call

$.ajax({
 type: "GET",
 url: '/Proposal/DeleteAttachment/',
 cache: false,
 data: { id: $("#hiddenAttachmentID").val() },
 error: function () {
 alert("An error occurred.");
 },
 success: function (data) {
 console.log("Worked.");
 $("#proposalAttachments").html(data);
 }
});