Wicket (1.6) 无状态表单重置分页答案

【问题标题】：Wicket (1.6) stateless form resets pagingWicket (1.6) 无状态表单重置分页
【发布时间】：2016-07-07 23:19:59
【问题描述】：

我已经尝试找到有关该问题的任何信息，但我想我要么不确定如何简短地描述问题以找到解决方案，要么没有其他人遇到过我无法想到的问题。也许我的想法也是错误的。

我有一个带有 ajax 支持面板的无状态 wicket 1.6 表单（带有输出 id 的 WebMarkupContainer）。该面板包含一个带有分页导航器的数据视图。数据视图本身由 DataProvider 填充。

面板显示数据库中的一些条目，下方是导航器。通过单击导航器上的任何页面，面板会被刷新（ajax）并显示该页面的内容。页面本身不会被浏览器重新渲染。

当我现在通过导航到另一个内部页面（基本上以任何方式离开 dataview-panel-page 时）离开页面以打开详细信息页面，然后返回到该 dataview-page 时，导航器被重置（因为我猜它是无国籍的）。导航器不记得要显示哪个页面并再次从第一页的顶部开始。

问题是：我该如何解决这个问题？我想 i.ex.导航到第 2 页，然后暂时离开该页面以进入另一个内部页面。返回时，我想在第 2 页上，专注于我之前单击“详细信息”链接的记录。当我在新的浏览器选项卡中打开新页面时也会发生这种情况。

谢谢！

这里有一些代码：

    final WebMarkupContainer gamesPanel = new AjaxContainer("gamesPanel");
    final DataView<Game> dataView =
            new GameDataView("gameOverview", targetCurrencyModel, searchTextModel, gameFilterModel,
                    new GameDataProvider(searchTextModel, gameFilterModel, targetCurrencyModel));
    dataView.setItemsPerPage(ITEMS_PER_PAGE);
    gamesPanel.add(dataView);

    final XNPagingNavigator navigator = new XNPagingNavigator("navigator", dataView);
    navigator.setOutputMarkupId(true);
    add(navigator);

你们可以试试我的意思：我说的页面是http://www.xbox-now.de。只需导航到第 2 页，然后单击详细信息并返回主页面。

【问题讨论】：

标签： ajax forms wicket paging stateless

【解决方案1】：

我认为您可能会在单击导航栏时使用 History API 来推送新状态。在状态的新 URL 中，您可以包含一个参数，该参数指示当前导航器页面的索引。您可以自定义 AJAX 链接，以便在用户单击它时执行此操作。

有关 History API 的更多详细信息，请参阅Updating address bar with new URL without hash or reloading the page

【讨论】：

【解决方案2】：

我在 NoWicket 框架中解决了这个问题，方法是引入模型感知页面缓存，当页面模型中的 hashcode/equals 匹配时，它会重用页面实例。您可以在 GitHub 存储库中查看实现，try this implementation of the IPageFactory wrapper 作为起点，但其中涉及更多代码，只需查看代码、调试示例并导航代码以更好地理解它，以便将其应用到您的应用。通过在文档网站（您也可以在本地调试）中尝试这个数据表示例来查看您的用例：http://invesdwin.de/nowicket/ajaxdatatable

尝试更改分页索引，导航到其他页面，然后导航回数据表示例页面。您仍然会看到您留在此处的分页索引。

【讨论】：

【解决方案3】：

谢谢大家的回复。我现在用另一种方式做到了。使用来自here 的基本代码并对其进行了一些修改。添加了一些漂亮的 css AttributeModifiers 来指示实际页面：

item.add(new AttributeModifier("class", new PageLinkCssModel(pageable, pageIndex, "active")));

然后我修改了一些代码来添加或重置页面参数，它是 1) 仅使用一次，2) 保留添加自己的页面参数之前存在的所有实际页面参数。所以我现在只是附加页码。这样我可以保留我最初的挂载路径，如 www.foo.bar/path/path/path。完整的 URL 现在看起来像：www.foo.bar/path/path?page=123。

要将我输入的页面（即 page=5）传递给数据提供者，我只需要覆盖提供者迭代器。它应该从我输入的页面开始。由于生成的导航器 URL 很丑陋（这对 SEO 来说非常不利），我现在有了漂亮的 url，它们可以独立工作，这在以前是不可能的。这也是我无法返回正确页面的原因。导航器 URL 不能被检票口查找。

new DataView<GamePrice>("gamePriceOverview", new GameDetailDataProvider(gameId, targetRegion) {
                @Override
                public Iterator<GamePrice> iterator(final long first, final long count) {
                    return super.iterator(ITEMS_PER_PAGE * getCurrentPage(), count);
                }

getCurrentPage() 来自基本模板并获取输入的实际页码（如果输入了）：

public long getCurrentPage() {
    // -1 weil zero based
    return getRequest().getQueryParameters().getParameterValue("page").toString() != null
            ? (getRequest().getQueryParameters().getParameterValue("page").toLong() - 1)
            : 0;
}

因此，我现在有了与我期望的相同的 URL，并添加了页面参数，而不是丑陋的 SEO 不友好的 URL，它们也不兼容独立工作（直接输入生成的 URL）。

网址现在看起来像： http://localhost:8080/game/4249/de/doom-preorder?page=2

之前的网址是： localhost:8080/game/4249/DE/doom-preorder?0-1.ILinkListener-gamePrices-navigator-navigation-2-pageLink

如果我现在从详细信息页面返回到具有活动“书签导航器”的主索引，我会正确返回页面并定位到我离开它的位置（因为可书签页面链接）。

这就是我如何通过一个不错的奖励解决这个问题：用户友好和 SEO 友好的 URL。

【讨论】：