Question

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

我的Ajax调用/ Account / CustomerTab这会找到正确的视图并重定向到Customer Controller并调用局部视图并将其插入到tab div中。

点击下一步时，它会调用/ Customer / Invoice？page = 2并将其返回到url而不是替换div'replaceDiv'.....现在我只是坐在窗口中的局部视图而没有其余的该网站。

这是带有选项卡式窗格的主页面，如果你查看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>
}

这是我的页面列表的局部视图，我尝试替换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" }))

修改

我发现如果我在我的控制器中添加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包，现在它就像魅力一样。

ajax选项卡式窗格中的IpagedList，部分视图无法正确呈现

1 个答案: