1

我正在构建一个 ASP.NET MVC3 应用程序，在搜索页面中，我使用 ajax 来获取和更新页面的结果部分。问题在于浏览器历史记录。例如，如果用户在结果的第 5 页，然后点击浏览器刷新，他会得到索引页（他应该刷新第 5 页）。浏览器的后退按钮也有同样的问题。我做了一些研究，发现了名为jQuery History的扩展。在他们的示例中，他们使用的是标签系统（隐藏和显示），与我的情况不同（分页）。这是我的简单代码：

提前致谢。

编辑： 我尝试使用Html 5 历史 API，但使用此代码不起作用，我注意到使用 FireBug，在第一页导航后（例如：到第 2 页），GET 方法被执行了两次！

编辑2： 调试时，我注意到在处理popstate事件时，location.pathname属性总是/Home/GoToPage，但它应该有例如/Home/GoToPage?pageIndex=3

我的索引页面

<h2>Pages navigator</h2>      
@Html.Partial("_Result")

我的结果部分视图

@model HistoryConcept.Models.Result

<aside id="content">
    @{
        var prevUrl = String.Format(@"/Home/GoToPage?pageIndex={0}", Model.PageNumber - 1);
        var nextUrl = String.Format(@"/Home/GoToPage?pageIndex={0}", Model.PageNumber + 1);

        <a id="goPrevious" href="@prevUrl">Previous page</a>
        <a id="goNext" href="@nextUrl">Next page</a> 
    }

    <div>Page number : @Model.PageNumber</div>
    <div>@Model.PageContent</div>
</aside>

结果部分视图中的 javascript

<script type="text/javascript">
    $(document).ready(function () {
        window.addEventListener('popstate', function (e) {
            getPage(location.pathname);
        });

        setupHistoryClicks();
    });

    function setupHistoryClicks() {
        addClicker($('#goPrevious'));
        addClicker($('#goNext'));
    }

    function addClicker(link) {

        link.click(function (e) {
            var linkHref = link.attr('href');
            getPage(linkHref);
            history.pushState(null, null, linkHref);
            e.preventDefault();
        });
    }

    function getPage(href) {

        var req = new XMLHttpRequest();
        req.open("GET", href, false);
        req.send(null);

        if (req.status == 200) {
            $('#content').replaceWith(req.responseText);
            setupHistoryClicks();
            return true;
        }
        return false;
    }
</script>

我的控制器

public ActionResult Index()
        {
            var model = new Result {PageContent = "This is the home page"};
            return View(model);
        }

        public PartialViewResult GoToPage(int pageIndex)
        {
            var model = new Result
                {
                    PageNumber = pageIndex,
                    PageContent = "New page content"
                };
            return PartialView("_Result", model);
        }
4

1 回答 1

0

分页参数

•在查询字符串中保留页码

在这种方法中，每页的项目数是在服务器端配置的。所以第 2 页表示它显示从 11 到 20 的记录，但是如果您决定每页显示 50 个项目，那么问题是稍后的，然后第 2 页表示 51 到 100。这是错误的，您的 URL 总是应该返回相同的结果，因为您的用户可能会预订标记，或者搜索引擎会针对特定关键字引用您应用程序的特定页面。

•最好的方法是，保留两个参数

开始：开始索引计数：每页的项目数因此如果开始为11，记录数为10，则显示11到20条记录。

有了这个，分页完全由 UI 控制，但是请确保您有一个最大计数限制以避免巨大的数据负载。使用 ajax Store 进行分页，并在 # 中计数，在正文加载时根据 # 参数创建第一个请求。

会议？？ 永远不要使用 Session 实现分页逻辑。URL 应该包含重新加载相同数据的所有信息。如果用户书签第 10 页，请确保在用户访问书签时加载相同的页面，这是所有用户所期望的，但是这不会出现在您的业务需求文档中。

于 2013-08-13T18:28:48.820 回答