部分视图中的分页列表无法正常工作-MVC4答案

【问题标题】：pagedlist in partial view not working correctly- MVC4部分视图中的分页列表无法正常工作-MVC4
【发布时间】：2014-04-22 11:57:04
【问题描述】：

我在部分视图中实现了分页。

这是我的寻呼-

  <div class="pagination-right">
                @Html.PagedListPager(Model, page => Url.Action("_AllVendors",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter, @Class = "pagination" }))

现在我想根据我制作的局部视图中的页面加载结果。

所以我使用这个脚本来不导航到部分视图页面。

<script type="text/javascript">
    $(function () {
        $('.pagination-right a').click(function () {
            var page = $(this).text();
            if (this.href == "") { return; }
            else {
                $.ajax({
                    url: this.href + '&page=' + page,
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#allvendors-partial').html(result);
                    }
                });
            }
            return false;
        });
    });
</script>

我正在用 id-allvendors-partial 将结果加载到一个 div 中。

问题-

再次点击任何页面时我遇到问题，然后它不会将其加载到 div allvendors-partial 而是转到其部分视图。

我怎样才能让它正常工作？

【问题讨论】：

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

【解决方案1】：

第一项 - e.preventdefault()：

由于您的代码中有多个返回点，e.preventDefault() 将停止锚点的默认点击行为（即使是您检查的空白href，这也会导致页面重新加载）。

您是否希望在单击空白href时重新加载页面，但如果不是简单地添加e.preventdefault()，如下所示：

<script type="text/javascript">
    $(function () {
        $('.pagination-right a').click(function (e) {
            e.preventDefault();

如果您决定使用它，则不需要return false。

第二项 - 使用事件委托：

您也每次都通过部分页面重新加载分页锚，因此您还需要使用on 的委托版本来处理点击：

<script type="text/javascript">
    $(function () {
        $(document).on('click', '.pagination-right a', function (e) {
            e.preventDefault();
            var page = $(this).text();
            if (this.href == "") { return; }
            else {
                $.ajax({
                    url: this.href + '&page=' + page,
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#allvendors-partial').html(result);
                    }
                });
            }
            return false;   // Not needed if you use e.preventdefault();
        });
    });
</script>

这通过在 DOM（即文档）的更高不变级别捕获 click 来工作，然后应用 jQuery 选择器/过滤器并找出点击了什么。

基本上，如果您使用 Ajax 替换页面上的控件，那么您也将替换/删除附加到它们的任何事件处理程序（例如，使用 .click(...)）。

【讨论】：