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

标签 javascript jquery asp.net-mvc json

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

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

由于项目列表可以被过滤,我认为实现这一点的唯一方法是通过 jQuery 或纯 JS。

我正在考虑使用一些隐藏字段来存储所有项目的 ID...不存储在索引 View 中(一旦访问详细信息它就会消失),以便能够从详细信息中访问它并创建“上一页下一页”链接。但它感觉很脏......并且仅包含 ID 的列表是不够的,因为我应该跟踪哪个是当前的,以便查看哪个是下一个和上一个项目。所以...也许 JSON 可以解决这个问题。

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

最佳答案

我可以看到几种方法。

  1. 就像 TheZuck 所说,不要导航到详细信息页面,而是使用内容为详细信息页面的对话框或模态窗口。这样,当用户希望导航时,您可以使用 JavaScript 访问索引页面中的值。我不太喜欢这个想法,因为它将您的导航逻辑与可能更改的渲染 View 内容联系起来。

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

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

顺便说一句:如果您确实不喜欢将 id 存储在隐藏的输入字段或 JavaScript 变量或列表中,您始终可以使用 Session,但如果您处于负载平衡环境,无粘性 session 。这样您就可以在服务器端访问当前过滤结果。您的导航请求只会发送当前 ID 和所需的导航方向。在你的 Controller 中,只需拉出 session ,查找 ID 并向前或向后移动你的指针(小心环绕,否则确保你有办法不渲染会导致环绕的导航按钮)。

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

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

关于javascript - MVC3::从详细信息 View 中导航表,而不是单击表中的详细信息链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18764300/

相关文章:

javascript - 捕捉 webhook node.js

php - Jquery ajax 正在切割数组?

javascript - 尝试获取 body 高度时获取 NaN

c# - 如何将多个文件与其他表单字段一起上传,ASP.NET MVC

javascript - 为什么在这种情况下 "this"是全局/窗口对象?

javascript - 使用 Javascript 获取 Google Analytics ID

jquery - Keyup() 延迟

asp.net-mvc - 使用数据对 ASP.NET MVC 进行单元测试

c# - 尝试在带有 OWIN 的 ASP.NET MVC 站点中使用简单注入(inject)器

javascript - 在 Ajax 弹出窗口中显示 PHP 输出