Question

我有一个带有记录列表的索引视图。每条记录都有一个“编辑”按钮，允许用户编辑一些细节。当用户单击“编辑”按钮时，我会弹出一个引导模式，以允许用户编辑某些字段。当他们单击Save时，数据将保存在数据库中并关闭bootstrap模式。

我的问题是当用户返回他们刚刚更新的相同记录时，引导模式仍然显示旧数据。如何强制引导模式从数据库加载新数据？

这是我的索引视图

@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>

这是引导模式在索引视图中的位置

<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>
}

这是控制器获取数据的地方

    [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>
}

Answer 1

请在成功保存数据后添加页面重新加载

setTimeout(function () {
                        location.reload();
                    }, 500);

我输入了您的示例代码。

 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.');

                       setTimeout(function () {
                            location.reload();
                        }, 500);

                        }
                        else {
                            console.log(result + ". Something wrong");
                            alert(result.Message);
                        }
                    },
                    error: function () {
                        alert('Unable to save data');
                    }
                });

                return false;
            });
        }

Answer 2

好。我发现这行代码适合我

$.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);
        });
    });

bootstrap modal不从数据库加载新数据

2 个答案: