c# - 带有部分 View 的 ajax 选项卡式 Pane 中的 IpagedList 无法正确呈现

Question

我在加载部分 View 的 ajax 选项卡式 Pane 中有一个分页列表。我在 IPagedlist 中使用了内置的 ajax，但部分 View 没有被正确替换，我做错了什么

我的 Ajax 调用/Account/CustomerTab 这会找到正确的 View 并将 redirectsAction 重定向到 Customer Controller 并调用部分 View 并将其插入选项卡 div 中。

单击下一步时，它会调用/Customer/Invoice?page=2 并在 url 中返回它，而不是替换 div 'replaceDiv'.....现在我只看到窗口中的部分 View 而没有其余部分网站。

这是带有选项卡式 Pane 的主页，如果您查看 ajax 调用，您会看到我插入了一个类为“replaceDiv”的 div

    <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3>Account Information</h3>

        <div class="tab-container left clearfix">
            <ul id="tabStrip" class="nav-tabs clearfix">
                <li class="active"><a href="#0" data-toggle="tab">Business Information</a></li>
                <li class=""><a href="#1" data-toggle="tab">Addresses</a></li>
                <li class=""><a href="#2" data-toggle="tab">Pro forma Invoice</a></li>
                <li class=""><a href="#3" data-toggle="tab">Invoices</a></li>
                <li class=""><a href="#4" data-toggle="tab">Order History</a></li>
            </ul>

            <div class="tab-content clearfix">
                <div class="tab-pane active" id="0">@Html.Action("Information", "Customer")</div>
                <div class="tab-pane" id="1"></div>
                <div class="tab-pane" id="2"></div>
                <div class="tab-pane" id="3"></div>
                <div class="tab-pane" id="4"></div>
            </div><!-- End .tab-content -->
        </div><!-- End .tab-container -->
    </div><!-- End .col-md-12 -->
</div><!-- End .row -->



@section scripts{
    <script type="text/javascript">
        $('#tabStrip a').click(function (e) {
            e.preventDefault()
            var tabID = $(this).attr("href").substr(1);

            $(".tab-pane").each(function () {
                $(this).empty();
            });

            $("#" + tabID).empty().append("<div class='loader'><img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /></div>");

            $.ajax({
                url: "/Account/CustomerTab",
                data: { Id: tabID },
                cache: false,
                type: "get",
                dataType: "html",
                success: function (result) {
                    $("#" + tabID).empty().append("<div id='replaceDiv'>" + result + "</div>");
                }
            });
            $(this).tab('show')
        });
    </script>
}

这是我的页面列表的部分 View ，我在其中尝试替换 html，但我得到的只是一个新的 html 页面，其中只有我的列表，而不是替换 div。

    <h2 class="sub-title">Invoices</h2>

@using (Html.BeginForm("Invoices", "Customer", FormMethod.Get))
{
    <p>
        Find by Invoice Number: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search" />
    </p>
}
<table class="table table-hover">
    <thead>
        <tr>
            <th>Invoice Number</th>
            <th>Date</th>
            <th>Total</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var inv in Model)
            {
            <tr>
                <td>@inv.InvoiceNumber</td>
                <td>@inv.DateCompleted</td>
                <td>@inv.TotalAmount</td>
            </tr>
        }
    </tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("Invoices", "Customer", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv" }))

编辑

我发现如果我在我的 Controller 中添加 if (Request.IsAjaxRequest()) 那么它就不会被命中。所以它不是通过发送的ajax请求。这是呈现的 HTML 的样子

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#replaceDiv" href="/Customer/Invoices?page=3">3</a>

Answer 1

我发现了问题。除了我对 javascript 的了解有限之外，所有代码都是正确的。我需要包括 jquery.unobtrusive-ajax.min.js 包，现在它的工作就像一个魅力。