AJAX 调用后用 jQuery 更新局部视图

Question

我想在主视图中触发 ajax 调用时更新部分视图。这是我目前所拥有的，部分观点：

@using System.Globalization
@model Application.Domain.Entities.Cart

<div class="navbar-right">
     <img src="../../Images/cart2.png" alt="" />
    @Model.Items.Sum(x=>x.Quantity) item(s),
    @Model.ComputeTotalValue().ToString("c", new CultureInfo("en-GB"))
    @Html.ActionLink("Checkout", "Index", "Cart",
        new {returnUrl = Request.Url.PathAndQuery},
        new {@class="btn btn-warning btn-sm navbar-btn"}
        )
</div>

然后，在 _Layout.cshtml 文件中，我将部分视图包含在标题中：

 <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">                    
                  <a href="/">
<img class="navbar-left navbar-brand" src="@Url.Action("GetStoreImage", "Home")"/></a>
                            @Html.Action("Summary", "Cart")       
                </div>
            </div>
        </div>

在主视图中我有这个 jQuery 代码：

<script>
    $(document).ready(function () {      
        $('button.submitButton').click(function () {            
            $.ajax({
                url: '@Url.Action("AddToCartAjax", "Cart")',
                data: { itemId: $(this).data('id'), categoryId: $(this).data('categoryid') },
                type: 'POST',
                success: function (data) {
                //Update partial view here, partial view is cart total                      
                    $(".modal-body #cartTotalLabel").text(data);
                    $('#createModal').modal('show');
                }
            });
        });
        $('#accordion').on('click', function () {
            $('#accordion .in').collapse('hide');
        });        
    });
    </script>

我该如何解决这个问题？

Answer 1

你需要创建一个容器 div 来加载部分视图：

<div id="container">

</div>

创建一个函数，它将 ajax 调用发送到一个动作并从它返回更新的局部视图，并在当前 ajax 调用成功时调用该函数。

<script>
    $(document).ready(function () {      
        $('button.submitButton').click(function () {            
            $.ajax({
                url: '@Url.Action("AddToCartAjax", "Cart")',
                data: { itemId: $(this).data('id'), categoryId: $(this).data('categoryid') },
                type: 'POST',
                success: function (data) {
                //Update partial view here, partial view is cart total
                    UpdatePartiaView();       
                    $(".modal-body #cartTotalLabel").text(data);
                    $('#createModal').modal('show');
                }
            });
        });
        $('#accordion').on('click', function () {
            $('#accordion .in').collapse('hide');
        });        
    });

function UpdatePartialView()
{
// send another ajax call and append the html returned in container
}
    </script>