I have an index view with a list of records. Each record has an Edit button to allow users to edit some detail. As users click on Edit button, I pop up a bootstrap modal to allow users to edit some fields. As they click Save, the data will be saved in the database and close the bootstrap modal.
My problem is as users go back to the same record that they just update, the bootstrap modal is still showing the old data. How do I force the bootstrap modal to load the new data from the database?
Here is my Index view
@model PoS.WebApplication.ViewModels.MasterDemand.MasterDemand_SearchViewModel
<div class="container">
@if (Model?.MasterDemandSearchResult != null && Model.MasterDemandSearchResult.Count() > 0)
{
<div class="table-responsive">
<table id="shipment-draft" class="table">
<thead>
<tr>
<th></th>
<th>
PO Request
</th>
<th>
Ranking
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.MasterDemandSearchResult)
{
<tr>
<td>
<div class="btn-group">
@if (item.ShipmentDraftId != 0)
{
<button class="btn btn-info btn-xs edit-vendor-ref" data-id = "@item.ShipmentDraftId">Edit</button>
}
</div>
</td>
<td>
@Html.DisplayFor(modelItem => item.PONumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.Ranking)
</td>
<td>
@Html.DisplayFor(modelItem => item.ShipmentStatus)
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
This is where the bootstrap modal is in the index view
<div id="vendor-edit" class="modal fade" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div id="edit-vendor-reference"></div>
</div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/select2.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/media/js/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
var dateFormat = "MM-DD-YYYY";
$('#shipment-draft').on('click', '.edit-vendor-ref', function (e) {
var url = "/MasterDemand/EditVendorReference";
var id = $(this).attr('data-id');
$(e.target).removeData('bs.modal');
$.get(url, { id: id }, function (data) {
$('#edit-vendor-reference').html(data);
$('#vendor-edit').modal('show');
var form = $('form');
form.data('validator', null);
$.validator.unobtrusive.parse(form);
bindForm(form);
});
});
function bindForm(dialog) {
$('#edit-vendor-reference').submit(function (e) {
e.preventDefault();
$.ajax({
cache: false,
url: "@Url.Action("EditVendorReference")",
type: "POST",
data: $(dialog).serialize(),
success: function (result) {
console.log(result);
$('#vendor-edit').modal('hide');
if (result.Success) {
alert('Data saved.');
}
else {
console.log(result + ". Something wrong");
alert(result.Message);
}
},
error: function () {
alert('Unable to save data');
}
});
return false;
});
}
});
</script>
}
Here is where the controller gets the data
[AjaxOnly]
[HttpGet]
public async Task<ActionResult> EditVendorReference(int id)
{
var result = _mapper.Map<MasterDemand_EditViewModel>((await _masterDemandBLL.ShipmentDraft_Get(new MasterDemandModel { ShipmentDraftId = id })).FirstOrDefault());
if (result != null)
{
return PartialView("_EditVendorReference", result);
}
else
{
return new HttpStatusCodeResult(400, "Invalid Shipment");
}
}
The partial view
@model PoS.WebApplication.ViewModels.MasterDemand.MasterDemand_EditViewModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
</div>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="modal-body">
<h4>Vendor Reference</h4>
<div class="form-group">
@Html.LabelFor(model => model.ShipmentDraftId, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@Html.EditorFor(model => model.ShipmentDraftId, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.ValidationMessageFor(model => model.ShipmentDraftId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Ranking, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@Html.EditorFor(model => model.Ranking, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
@Html.ValidationMessageFor(model => model.Ranking, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.VendorRef1, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@Html.EditorFor(model => model.VendorRef1, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.VendorRef1, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.VendorRef2, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@Html.EditorFor(model => model.VendorRef2, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.VendorRef2, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
</div>
}
