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)
source to share
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.
source to share
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);
}
});
source to share