【问题标题】:Tab Navigation - Frames or AJAX?选项卡导航 - 框架还是 AJAX?
【发布时间】:2008-10-31 11:52:33
【问题描述】:

我有一个我想象中的非常标准的网络界面。

有 4 个不同的 ListView(网格控件),它们可以通过顶部的一系列选项卡访问。

我的实现如下:

alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg

Tab 1 会将包含 Grid 1 的页面 1 加载到 Frame 2,Tab 2 会将包含 Grid 2 的页面 2 加载到 Frame 2 等等。

然而,这意味着如果您单击网格中的一个项目,并将 DetailsPage1.aspx 加载到第 2 帧,则第 1 帧和选项卡仍然可见且处于活动状态。

我被告知我应该只有一个框架,并使用 HttpRequest(或 asp.net 中的 WebRequest)根据标签点击动态加载页面。

这是正确的方法吗?如果您手头有任何资源或提示,我们将不胜感激!

谢谢

【问题讨论】:

    标签: asp.net ajax navigation frames


    【解决方案1】:

    框架是绝对禁止的。使用其他技术无法实现的帧没有任何好处。

    这是否意味着您必须使用 AJAX?不必要。如果您觉得需要提供丰富、无缝的界面,AJAX 是一个非常好的解决方案,但这并不是绝对必要的。

    您可以使用服务器端包含将选项卡分隔到另一个(通用)子页面,但由于您提到 ASP.NET,(假设您在框架 v2 或更高版本上运行)您可能希望使用母版页,您的选项卡位于一个内容部分或 Master 本身中,而您的网格/详细信息位于另一个内容部分。

    这两种技术的主要区别在于,使用 AJAX,从选项卡到选项卡的转换将是流畅和无缝的,但是 a) 这需要一些额外的工作(特别是如果您不熟悉任何给定的 AJAX 框架)和 b ) 由于您基本上将 4 个页面合二为一,因此这些页面“更重”并且维护起来更复杂。如果您选择非 AJAX 路由,主要区别在于,当您单击每个选项卡时(因为它每次都会加载一个新页面),会有一个小而明显的刷新效果。

    当然,无论如何,母版页对于保持一致的网站样式和结构很有用,因此没有理由不能将 AJAX 与母版页系统一起使用。

    【讨论】:

    • 我最终决定使用 Master Pages - 不妨利用 MS 技术。虽然有时我这样做的时候感觉自己在作弊!
    • 我不同意。如果您正在使用 ASP.NET,那么 iframe 可能是显示具有可编辑控件的子表单的最佳解决方案,这些控件需要回发事件处理或 ASP.NET 功能(如视图状态加密)。例如,我的数据库文档页面有一个动画菜单,当我单击表、视图或函数名称时,它必须加载一个 ASPX 子页面,该页面显示对象的属性(列、参数等)以及可编辑的描述字段.重新加载新页面会破坏用户体验,使用 AJAX 会使内容生成和回发处理变得复杂。
    【解决方案2】:

    框架是蹩脚的:如果用户想要设置书签并且用户通过谷歌访问您的网站,您会遇到问题:那么您的导航框架是不可见的。所以你需要很多肮脏的javascript。检查这一点。如果您需要 javascript,请从一开始就使用 AJAX

    【讨论】:

      【解决方案3】:

      阿贾克斯是最佳选择。但请记住,通过后退/前进使其可浏览。最好的选择是更改页面哈希。我用过这样的东西:

      domain.com/#tab1 用于第一个选项卡 domain.com/#tab2 用于第二个标签

      等等。

      如果你使用 jQuery,this 可能是一个好的开始(我使用它,我没有问题)。我确信所有流行的框架都有解决方案:)

      【讨论】:

        【解决方案4】:

        您应该只在所有其他页面中包含您的导航页面,而不是使用框架。浏览器会看到您在所有页面中都包含相同的文档并将其缓存。

        【讨论】:

          【解决方案5】:

          您是否尝试过 TabContainer 或加载所有 4 个详细信息窗格并仅在选项卡选择更改时显示/隐藏面板?

          根据您的用户将看到的屏幕,如果您动态加载详细视图(Ajax 或回发),您可能无法持久保存用户输入的任何信息,并且您将需要等待(用户不喜欢等待)

          【讨论】:

            【解决方案6】:

            我会推荐使用 jQuery 和 jQuery UI 插件。不需要框架,只需要 div 容器。

            【讨论】:

              【解决方案7】:

              与 StingyJack 一样,我建议您查看 TabContainer 控件,但您可能需要注意,如果这样做,您的 ViewState 不会变得太大。

              因此,例如,在查看该选项卡之前不要将任何内容加载到 GridView 中,如果不是,请删除它的内容(如果需要,当然可以保存回数据库。使用 TabContainer 的 ActiveTabChanged 事件将是关键strategy.You 为网格禁用 ViewState,但为容器保留它。

              【讨论】:

              • Hmobius 你能解释一下吗,这可能真的很有用。在 ActiveTabChanged 事件中,如何禁用网格上的 ViewState?例如,if(tab.index == 1){//如何仅禁用 gridview1 的 ViewState}?谢谢!
              • 选项卡中的每个控件都有 EnableViewState="false" 然后当 activetabchanged 运行时,任何核心信息(任何选择的键值、排序值等)都会保存到整体控件的 ViewState 和任何 lsit在将控件填充到新控件之前,已从中删除项目。
              【解决方案8】:

              您使用的是 ASP.NET,因此只需将所有 4 个控件加载到一个多视图中,然后在回发时将可见的控件设置为已单击的按钮。

              http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx

              【讨论】:

                【解决方案9】:

                除非您绝对必须...

                ,否则请勿使用框架(或 iframe)

                我能想到使用 (i)frames 的唯一正当理由实际上是文件上传控件,我也不确定它在那里是否有效......

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 2020-03-14
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2013-08-28
                  相关资源
                  最近更新 更多