ASP.Net 导航选项卡，如 Windows 选项卡控件答案

【问题标题】：ASP.Net navigation tabs like windows tab controlASP.Net 导航选项卡，如 Windows 选项卡控件
【发布时间】：2012-10-01 03:21:56
【问题描述】：

我想要一个类似于 windows 选项卡控件的网页。每个网页在页面之间移动、回发等时不会丢失内容和数据。

这是网站设计和我的想法：

[母版页]

"Fruits"  "Cars"   "Animals"  "Operators"

点击“Fruits”会跳转到“Fruits”页面，其他链接（标签）也是如此
用户在“水果”页面搜索水果，填写一些字段等。
然后用户转到“汽车”页面，然后通过填写一些字段等方式构建自己的汽车
然后用户再次返回“Fruits”页面 -> 用户看到她/他在“Fruits”页面上离开的相同页面。

请提出一些除使用 javascript:history.go(-1) 之外的好方法。这有可能实现吗？

【问题讨论】：

标签： javascript asp.net .net asp.net-mvc web-applications

【解决方案1】：

使用 Jquery post 方法我们可以做同样的事情......让我们试试这个，这里有一个示例给你......

<div class="Tabclass" id="TabId1" onclick="TabClick('Fruits')">
        Fruits
    </div>
  <div class="activeTab" id="TabId2" onclick="TabClick('cars')">
        cars
    </div>

这里的TabClick("var")是一个javascript函数，参数是标识选择了哪个标签。

假设包含 div 的数据的 id 是“DivMainContent”。让我们看看javascript函数

<script type="text/javascript">
           function TabClick(bType) {
               $(#DivMainContent").html("");
               if (bType == 'Fruits') {
                         $.post("@Url.Content("~/Controllername/actionname")",
                         function (data) {
                         $("#DivMainContent").html(data);
                    });
               }
               else if (bType == 'cars') {

                          $.post("@Url.Content("~/Controllername/actionname")",
                          function (data) {
                          $("#DivMainContent").html(data);
                    });
 }
</script>

【讨论】：

【解决方案2】：

Twitter bootstrap api 非常适合 HTML UI，看看他们的标签你会发现它是你想要的

http://twitter.github.com/bootstrap/javascript.html#tabs

【讨论】：

【解决方案3】：

这绝对是可能的，一个非常简单的解决方案是拥有 4 个 div 并隐藏/显示与用户单击的链接相对应的 div “例如：水果链接将显示水果 div” 这种管道已经对于大多数 JavaScript 库，一个很好的就是 Jquery UI 框架，选项卡控件可以实现您想要做的事情

查看 jQuery 演示和文档，它使通过 ajax 拥有客户端选项卡变得非常容易。

http://jqueryui.com/demos/tabs/

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

如果您不适合使用 3party javascript 库，那么总是有简单的旧 javascript 方式来显示/隐藏 div

http://webdesign.about.com/od/dhtml/a/aa101507.htm

【讨论】：

【解决方案4】：

有很多方法可以实现您想做的事情。您可以进行用户会话并将 AJAX 调用发送到服务器设置输入并进行处理。或者，您可以使用只有一个页面并在其中导航的单页应用程序。可能还有很多。您应该选择哪一个取决于您的项目规格。

【讨论】：

【解决方案5】：

最简单的方法是渲染所有选项卡的所有内容并使用 Javascript 在客户端切换不同的选项卡（例如，通过调整 css 属性“显示”是一种方法）。没有理由进行 AJAX 调用，除非您需要提交更新另一个选项卡的数据才能显示。

【讨论】：