tgriffiths tgriffiths - 1 year ago 114
jQuery Question

Update Partial View Within Partial View Using MVC Ajax

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)

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)

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

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


$(document).on('click', '.btn.btn-danger', function () {
var id = $(this).data('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

type: "GET",
url: '/Proposal/DeleteAttachment/',
data: { id: $("#hiddenAttachmentID").val() },
error: function () {
alert("An error occurred.");
success: function (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.


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

public ActionResult EditProposal(ProposalViewModel model)

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download