Updating partial view in 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 a ViewModel.
View CreateProposal
@model STAR.UI.ViewModels.ProposalViewModel
<div class="row">
@Html.Partial("_Proposal", Model)
</div>
Partial View _Program also references another partial view called _ExistingAttachments , which also accepts a ViewModel.
_Application of partial
@model STAR.UI.ViewModels.ProposalViewModel
<div class="col-md-6" id="proposalAttachments">
@Html.Partial("_ExistingAttachments", Model)
</div>
_Changing Partial Attributes
@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 displays a list of href links and a Remove link next to them. After the user clicks the delete link on the element they want to delete, the id of that post is then stored in a 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);
});
The user is then presented with a modal confirm checkbox and after confirming the deletion, an Ajax call is made, which should then update the Partial _ExistingAttachments inside 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 update the Partial View _ExistingAttachments , but it doesn't.
Sorry for the long question, but hopefully can spot what I'm doing wrong.
Please, help.
UPDATE
I must add, the code turns it into an Ajax Success function and alert ("Worked"); called. However, instead of Partial Refresh, my Edit action within the same controller is called
[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)
People finally decided to solve it thanks to Yasen's help. After my Ajax call has completed, the code is then redirected to another page. Obviously I didn't want this to happen as I just wanted the partial view to refresh on my page but then stay on the page.
The culprit was actually a confirmation button in my Modal. It was
<input type="submit" id="mySubmitDeleteAttachment" class="btn btn-primary" value="Yes, please delete" />
This caused the application to POST after the Ajax call. So I instead changed this to
<button type="button" id="mySubmitDeleteAttachment" class="btn btn-default">Yes, please delete</button>
And now everything works as expected.
It seems that all your markup and code points are good. Your ajax will probably receive a request in a cached
Try 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);
}
});