Question

我正在构建一个ASP.NET MVC3应用程序，并且在搜索页面中，我正在使用ajax来获取和更新juste页面的结果部分。问题在于浏览器历史记录。例如，如果用户位于结果的第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);
        }

Answer 1

分页参数

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

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

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

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

这样，分页完全由UI控制，但请确保您有最大计数限制以避免大量数据负载。使用ajax进行分页存储开始，并计入＃，在body load上创建基于＃参数的第一个请求。

<强>会话?? 永远不要使用Session实现分页逻辑。 URL应具有重新加载相同数据的所有信息。如果用户手册标记了第10页，请确保在用户访问书签时加载相同的页面，这是所有用户所期望的，但这不会出现在您的业务需求文档中。

在ASP.NET MVC中使用ajax时处理浏览器历史记录

1 个答案: