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

Question

问题背景

我有一个名为'ProductDetail.cshtml 的页面，它使用了 masterLayout 页面。这个 MasterLayout 包含一个 PartialView，它用 'cart items' 填充一个下拉菜单，显示有多少项目，如下所示：

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

代码：

'MasterLayout.cshtml' 显示 'Cart Item' 下拉菜单，'Cart' 方法 returns 返回 PartialView。:

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

'ProductDetail.cshtml' 使用 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在'success'方法中传回了一个返回的JSON对象CartItems列表。模态主体 table 内容在用户关闭模态时建立（如 ID '#CloseModal' 所示，我希望在 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 - 如何在主布局页面中正确调用局部视图？

MVC - How to correctly call partial view in master layout page?

asp.net-mvc

jquery

asp.net-mvc-4