0

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

这是我的寻呼-

  <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- 的 div 中allvendors-partial。

问题-

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

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

4

1 回答 1

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>

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

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

于 2014-04-22T12:07:34.387 回答