javascript - MVC3::从详细信息 View 导航表而不是单击表中的详细信息链接

Question

我有一个索引 View ，它在表格中显示项目列表。每个项目都有一个链接来显示其详细信息(另一个通过 Ajax 加载的局部 View ，替换了索引 View )。

单击详细信息链接后，用户现在希望查看“下一项”或“上一项”的详细信息。我们目前有一个返回链接，可以再次获取索引 View ......用户可以点击任何项目......但她想要的是更多的可用性。

由于项目列表可能已被过滤，我认为实现此目的的唯一方法是通过 jQuery 或纯 JS。

我正在考虑有一些隐藏字段，我可以在其中存储所有项目的 ID...不存储在索引 View 中(一旦访问详细信息它就会消失)以便能够从详细信息中访问它并创建后退下一步链接.但它感觉很脏......而且只有 ID 列表是不够的，因为我应该跟踪哪个是当前的，以便查看哪些是下一个和上一个项目。所以...可能是 JSON 可以解决问题。

有什么建议或其他方法可以在客户端存储列表吗？ 该列表可以包含 10 到 200 个项目，一旦我再次过滤索引 View 或通过其他事件，这些项目就会刷新。

Answer 1

我可以看到一些方法。

1. 如 TheZuck 所说，不要导航到详细信息页面，而是使用内容为详细信息页面的对话框或模态窗口。这样，当用户希望导航时，您可以使用 JavaScript 访问索引页面中的值。我不太喜欢这个想法，因为它将您的导航逻辑与可能发生变化的呈现 View 内容联系在一起。

2. 您可以保留索引页面中所需的 ID，并将它们传递到详细信息页面。这样做的结果是，为您更改的代码相对较少。不利的一面是，您将在每次导航请求时发布和检索这些 ID。

3. 您可以像 #2 那样做，但要将导航控件与详细信息内容本身分开。如果将详细信息推送到局部 View 中，您现在可以使用 AJAX 帮助程序连接导航控件。单击前进将通过向 Controller 中的 ActionResult 发出 POST 或 GET 将您带到本地列表中的下一个 id，这将返回绑定(bind)到该 id 数据的部分 View 。我最喜欢这种方法，因为它不会在每个详细信息导航中往返 id，并且不需要大量自定义 javascript 来从呈现的页面访问 id。它还让您有机会使用加载面板，以防检索数据需要一些时间。

旁白:如果你真的不喜欢将你的 id 存储在隐藏的输入字段或 javascript 变量或列表中，你总是可以使用 Session 但如果你在没有粘性 session 的负载平衡环境。这样您就可以在服务器端访问当前过滤的结果。您的导航请求只会发送当前 ID 和所需的导航方向。在您的 Controller 中，只需拉出 session ，查找 ID 并向前或向后移动您的指向(小心环绕，否则请确保您有办法不呈现会导致环绕的导航按钮)。

在这些选择中，我喜欢#3 最好的最佳用户体验，特别是如果细节太大而无法像选项#1 那样在小型模式或对话框中很好地呈现。它也可能是响应最快的，并且假设您应用了 aside，您可以访问列表的 POCO 表示，而不是在 JavaScript 中进行序列化和反序列化。如果“详细信息”页面很小以至于很容易适合对话框或模式窗口，我会考虑#1。它可以像选项 #1 一样响应迅速，并且您仍然可以使用 aside 来避免在 JavaScript 中操纵 id。

我降低选项 #3 优先级的唯一原因是因为我们的用户体验人员不断拒绝客户对显示数据的“弹出窗口”的请求。她讨厌他们。我还没弄清楚这是个人原因还是因为用户体验最佳实践为这个决定提供了信息，但这是我从未擅长的事情，所以我没有兴趣找出答案!