引导模式不会从数据库加载新数据 [英] bootstrap modal does not load new data from database

查看:52
本文介绍了引导模式不会从数据库加载新数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个带有记录列表的索引视图.每个记录都有一个编辑"按钮,允许用户编辑一些详细信息.当用户单击编辑"按钮时,我弹出一个引导程序模版,以允许用户编辑某些字段.当他们单击保存"时,数据将保存在数据库中并关闭引导程序模式.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆