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>

知道如何解决这个问题吗？在此先感谢Laziale

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>

在ajax调用之后使用jquery更新部分视图

1 个答案: