Question

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

这是我的分页 -

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

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

所以我使用这个脚本不导航到partialview页面。

<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中而是转到其部分视图。

我如何正常工作？

Answer 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，然后应用jQuery选择器/过滤器并找出所点击的内容。

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

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

1 个答案:

第一项 - e.preventdefault（）：

第二项 - 使用事件委托：