1

我设置了一个虚拟 MVC 4（剃刀视图引擎），并且按照说明使用 jquery 创建了一个选项卡式页面。这是我的 _Layout.cshtml 文件：

        <script>
            $(function () {
              $("#tabs").tabs();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
            $("menucontainer").tabs();
            });
        </script>
</head>
<body>
    <header>
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
          </ul>
          <div id="tabs-1">
            //I want the Home page to load here,
          </div>
          <div id="tabs-2">
            //the About page to load here,
          </div>
          <div id="tabs-3">
            //and the Contact page to load here.
          </div>
        </div>
    </header>

当我分别单击选项卡 2 和选项卡 3 时，我希望能够加载“关于”和“联系人”视图（在 VS 2012 中创建新的 mvc 4 互联网项目时附带的关于和联系人视图）。

我的最终目标是在一个页面上有多个选项卡，用户将在每个选项卡上输入不同的信息，但是当他们切换到新选项卡时，如果可能的话，信息仍然存在。

任何帮助或教程将不胜感激！

4

1 回答 1

2

我的最终目标是在一个页面上有多个选项卡，用户将在每个选项卡上输入不同的信息，但是当他们切换到新选项卡时，如果可能的话，信息仍然存在。

不需要任何额外的代码行。如果您<input>在其中一个选项卡中使用任何标准，当用户切换它时，他输入的任何数据都将保留在那里（除非重新加载页面）。

当我单击选项卡 2 和选项卡 3 时，我希望能够加载“关于”和“联系人”视图

请定义“负载”。您可以通过将视图呈现为部分视图来将视图放入 div 中。

<div id="tabs-1">
@Html.Partial("~/Views/yourhomepage.cshtml");
</div>

或者，如果“加载”是指在用户收到您需要使用 AJAX 的页面后加载视图的内容。我真的错过了将它用于这样的事情的意义，特别是因为您可以直接在 div 内渲染视图内容但是......好吧，如果这就是您想要的，没有什么比这更简单了。

$.get("http://linkToYourHomepage").success(function(data){
$('#tabs-1').html(data);
});
于 2013-10-02T23:36:36.003 回答