ASP.Net导航选项卡,如Windows选项卡控件

时间:2012-10-01 03:21:57

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

我想有一个类似于Windows标签控件的网页。 在页面,回发等之间移动时,每个网页都不会丢失内容和数据。

以下是网站设计和我的想法:

[母版页]

"Fruits"  "Cars"   "Animals"  "Operators"
  • 点击“Fruits”将转发到“Fruits”页面,其他链接(标签)也相同
  • 用户使用“水果”页面搜索水果,填写一些字段等。
  • 然后用户移动到“汽车”页面,然后填写一些字段等来建立自己的汽车
  • 然后用户再次返回“水果”页面 - >用户在“水果”页面上看到她/他离开的页面。

除了使用javascript之外,请建议一些好方法:history.go(-1)。 这有可能实现吗?

5 个答案:

答案 0 :(得分:3)

使用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函数,parametr用于标识选择了哪个选项卡。

假设包含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>

答案 1 :(得分:2)

Twitter bootstrap api非常适合HTML用户界面,查看他们的标签,认为你会找到你想要的东西

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

这绝对是可能的,一个非常简单的解决方案是拥有4个div并隐藏/显示对应于用户点击的链接的div“例如:Fruits链接将显示水果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/

如果使用3方javascript库不适合你,那么总有一种简单的旧javascript显示/隐藏div的方式

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

答案 4 :(得分:1)

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