在 MVC 更新部分视图之前打开 JQuery 对话框

Question

我试图在按钮单击事件期间打开一个对话框模式窗口，当我打开此窗口时，我希望能够调用一个获取最新信息的视图，并在它出现时用正确的信息更新模式对话框负载。但它总是抓住第一条记录并显示出来。查看代码时，它会打开对话框，然后运行代码以获取操作结果，但视图永远不会更新为正确的记录。

所以我有一个送货地址的下拉列表。我想获取所选记录的ID，我将其传递给我已经完成的ActionResult方法，获取我需要的数据并打开一个对话框并将我想要显示的信息传递给它，但它不是用我传递的内容进行更新，因为模态已经弹出了我猜测列表中第一个地址的原始模态值，而不是我当前选择的那个，如果这有意义的话。

控制器：

  public ActionResult PublicInfo(string widgetZone)
    {
        var address = _workContext.CurrentCustomer.Addresses
            .FirstOrDefault(a => a.Id == _workContext.CurrentCustomer.ShippingAddress.Id);

        PublicInfoModel model = new PublicInfoModel();

        model.FirstName = address.FirstName;
        model.LastName = address.LastName;
        model.Address1 = address.Address1;
        model.Address2 = address.Address2;
        model.City = address.City;
        model.StateProvinceId = 1;
        model.StateProvinceName = address.StateProvince.Name;
        model.CountryId = 1;
        model.CountryName = address.Country.TwoLetterIsoCode;
        model.PostalCode = address.ZipPostalCode;

        return View("Nop.Plugin.Widgets.AddressVerification.Views.WidgetsAddressVerification.PublicInfo", model);
    }

    [HttpPost]
    public ActionResult PublicInfo(int id)
    {
        ViewBag.selectedShippingId = id;

        var address = _workContext.CurrentCustomer.Addresses
            .FirstOrDefault(a => a.Id == id);

        PublicInfoModel model = new PublicInfoModel();

        model.FirstName = address.FirstName;
        model.LastName = address.LastName;
        model.Address1 = address.Address1;
        model.Address2 = address.Address2;
        model.City = address.City;
        model.StateProvinceId = 1;
        model.StateProvinceName = address.StateProvince.Name;
        model.CountryId = 1;
        model.CountryName = address.Country.TwoLetterIsoCode;
        model.PostalCode = address.ZipPostalCode;

        return View("Nop.Plugin.Widgets.AddressVerification.Views.WidgetsAddressVerification.PublicInfo", model);
    }

型号：

@model Nop.Plugin.Widgets.AddressVerification.Models.PublicInfoModel

<div id="dialog-modal" style="display:none;">
    @Html.Partial("Nop.Plugin.Widgets.AddressVerification.Views.Shared._Address", Model)
</div>

<script type="text/javascript">
  $(document).ready(function () {
        $("#shipping-buttons-container .new-address-next-step-button")[0].onclick = null;
        $("#shipping-buttons-container .new-address-next-step-button").click(function () {
            newContent();
            if (e.preventDefault) {
                // For modern browsers
                e.preventDefault();
            }
            else {
                // For older IE browsers
                e.returnValue = false;
            }


            //Shipping.save();
        });

        function newContent() {
            $(function () {
                var selectedShippingAddressId = $('#shipping-address-select').val();
                //alert(selectedShippingAddressId);
                if (selectedShippingAddressId != null) {
                    $('#dialog-modal').dialog({
                        autoOpen: true,
                        width: 500,
                        resizable: false,
                        title: 'An updated address has been determined, would you like to use this one?',
                        modal: true,
                        open: function (event, ui) {
                            var url = '@Url.Action("PublicInfo", "WidgetsAddressVerification")';
                            $.post(url, { id: selectedShippingAddressId });

                        },
                        buttons: {
                            "Close": function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                }

            });
        }
    });
</script>

任何帮助将不胜感激。只是为了让当前选择的信息以模态方式弹出。

Answer 1

我不完全确定您希望它如何流动，但是要更新模态的内容，您只需要使用从 ajax 中拉出的部分视图来更新对话框模态 div 调用类似这些行的 js

$("#shipping-buttons-container .new-address-next-step-button").click(function() {
        $.ajax({
            type: 'post',
            url: "@Url.Action("PublicInfo", "WidgetsAddressVerification")",
            success: function(data) {
                $("#dialog-modal").html(data);
                $('#dialog-modal').modal('show'); 
            }
        });
    });

带有一个在局部视图中传回 html 的控制器，因此它不包含 _Layout 模板，而只是原始 html。

public PartialViewResult PublicInfo(string widgetZone)
    {
        var address = _workContext.CurrentCustomer.Addresses
        .FirstOrDefault(a => a.Id == _workContext.CurrentCustomer.ShippingAddress.Id);

        PublicInfoModel model = new PublicInfoModel();

        model.FirstName = address.FirstName;
        model.LastName = address.LastName;
        model.Address1 = address.Address1;
        model.Address2 = address.Address2;
        model.City = address.City;
        model.StateProvinceId = 1;
        model.StateProvinceName = address.StateProvince.Name;
        model.CountryId = 1;
        model.CountryName = address.Country.TwoLetterIsoCode;
        model.PostalCode = address.ZipPostalCode;

        return PartialView("Nop.Plugin.Widgets.AddressVerification.Views.WidgetsAddressVerification.PublicInfo", model);
    }

Answer 2

Jquery 默认工作在异步模式。

在使用

发帖时

$.post(url, { id: selectedShippingAddressId });

你可以使用

$.ajax({
    url: url,
    data: { id: selectedShippingAddressId },
    success: success,
    type: 'POST',
    async:false
});

现在，当上述代码经过处理时，pop 将始终加载。