Question

问题背景

我有一个名为＆＃39; ProductDetail.cshtml的页面，该页面使用masterLayout页面。这个MasterLayout包含一个PartialView，它使用“购物车”项目填充下拉菜单。显示有多少项目如图所示：

enter image description here

目前，当用户将项目添加到购物车时，模态弹出窗口显示新添加的项目，模式关闭后，我需要更新购物车下拉列表以在MasterLayout中显示新更新的购物车项目编号

代码：

＆＃39; MasterLayout.cshtml＆＃39;显示＆＃39;购物车项目＆＃39;下载，＆＃39;购物车＆＃39;方法返回一个PartialView。：

<form class="navbar-form pull-right">
     @Html.Action("MiniCart", "Cart")
</form>

＆＃39; ProductDetail.cshtml＆＃39;它使用MasterLayout.cshtml。

<script>

 $("#AddCartItem").click(function (e) {

    e.preventDefault();

    $.ajax({
        url: '@Url.Action("AddToCart")',
        type: 'POST',
        data: {
            "id": $('#productId').val(),
            "qty": $('#productQty').val(),
            "name": $('#productName').text(),
            "price": $('#productPrice').text(),
            "brand": $('#productBrand').text(),
            "image": $('#productImage').val()
        },
        success: function (json) {

            for (var i = 0; i < json.length; i++)
            {
                AddRows(json[i].CartItemImage,
                        json[i].CartItemName,
                        json[i].CartItemPrice,
                        json[i].CartItemQty,
                        json[i].CartItemBrand);
            }

            $("#dialog-example").modal('show');
        }
    });
});

$("#CloseModal").click(function (e) {

    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });

    //****Attempt to call the PartialView of the MasterLayout to update drop-down
    $.ajax({
        url: '@Url.Action("MiniCart", "Cart")'
    });
 });
</script>

上面的JQuery在＆＃39;成功＆＃39;中传回了返回的JSON对象CartItems列表。方法。然后在用户关闭模态时建立模态主体表内容（由ID＆＃39;＃CloseModal＆＃39;表示我想在MasterLayout中调用PartialView以更新CartItems下拉列表以显示新的价值。任何人都可以指出我能够实现这个目标的正确方向吗？

Answer 1

您可以使用JQuery调用购物车操作方法，然后将form中的内容替换为新内容。

示例

<script> $(document).ready(function() { $.get('@Html.Url("MiniCart", "Cart")', function(data) { $('.navbar-form').html(data); }); }); </script>

Answer 2

在你的模态中，添加一个表单：

@using (Ajax.BeginForm("MiniCart","Cart",null, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "cartDiv", OnSuccess = "$('#yourModalId').modal('hide');" }))

在模板上添加一个包含UpdateTargetId的div：

<form class="navbar-form pull-right">
    <div id="cartDiv">
         @Html.Action("MiniCart", "Cart")
    </div>
</form>

并将模式上的关闭按钮更改为提交类型

请注意：别忘了添加脚本：

   <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

MVC - 如何在主布局页面中正确调用局部视图？

2 个答案: