引导模式不会从数据库加载新数据 [英] bootstrap modal does not load new data from database
问题描述
我有一个带有记录列表的索引视图.每个记录都有一个编辑"按钮,允许用户编辑一些详细信息.当用户单击编辑"按钮时,我弹出一个引导程序模版,以允许用户编辑某些字段.当他们单击保存"时,数据将保存在数据库中并关闭引导程序模式.
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?
这是我的索引视图
@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");
}
}
局部视图
@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>
}
推荐答案
好的.我发现这行代码对我有用
Okay. I found this line of code works for me
$.ajaxSetup({ cache: false });
我将其放在我的代码中
$('#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) {
$.ajaxSetup({ cache: false });
$('#edit-vendor-reference').html(data);
$('#vendor-edit').modal('show');
var form = $('form');
form.data('validator', null);
$.validator.unobtrusive.parse(form);
bindForm(form);
});
});
这篇关于引导模式不会从数据库加载新数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!