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

【问题标题】：MVC - How to correctly call partial view in master layout page?MVC - 如何在主布局页面中正确调用部分视图？
【发布时间】：2015-05-09 20:12:59
【问题描述】：

问题背景

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

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

代码：

“MasterLayout.cshtml”显示“Cart Item”下拉菜单，“Cart”方法返回一个 PartialView。：

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

使用 MasterLayout.cshtml 的“ProductDetail.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 列表。模态正文表内容是在用户关闭模态时建立的（如 ID '#CloseModal' 所示，我希望在 MasterLayout 中调用 PartialView 以更新 CartItems 下拉列表以显示新值。任何人都可以指出我能够实现这一目标的正确方向吗？

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

在您的模式中，添加一个表单：

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

【讨论】：

【解决方案2】：

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

示例

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

【讨论】：