1

我第一次尝试使用 twitter bootstrap css/ui 视图创建一个网站（C#/MVC 4）

该网站有 3 个导航选项卡（主页、关于、联系人）

我从来没有想过在它们各自的选项卡中加载各种页面（index.cshtml、about.cshtml、contact.cshtml）会如此困难。

我已经尝试使用 jquery 加载选项卡，如下所述：

http://getbootstrap.com/javascript/#tabs

我还尝试了以下 http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/

我的索引页面如下所示：

<head>
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
                <meta charset="UTF-8" />
    <link href ="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<div>
<img src="~/Content/bootstrap/img/test.png"/>
 <ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contact" data-toggle="tab">Contacts</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane fade" id="about">About</div>
    <div class="tab-pane fade" id="contact" />Contacts</div>
</div>

由于我是初学者程序员，因此在实现上述所有示例时遇到了问题。有人建议使用 Angular Ngviews 指令。

有人可以告诉我在导航选项卡中加载选项卡及其各自页面的最简单方法。请记住，这是一个 MVC 应用程序。

4

3 回答 3

2

我认为你想加载部分视图，所以你需要；

<head>
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
                <meta charset="UTF-8" />
    <link href ="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<div>
<img src="~/Content/bootstrap/img/test.png"/>
 <ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contact" data-toggle="tab">Contacts</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">@Html.Action("ActionResultName","Controller"</div>

----others are same way you can load...
</div>

但是您必须在 ActionResult 结束时返回 return PartialView("Path/to/partialview.cshtml")

于 2015-08-07T11:00:49.307 回答
0

我可以通过创建一个布局页面来实现我想要的。

于 2013-08-07T14:44:05.867 回答
0

看到您说您是初学者，您可能希望查看 jQueryUI。它默认包含具有 Ajax 功能的选项卡，它只是根据需要配置选项卡的一种情况。

http://jqueryui.com/tabs/#ajax

看看 href 是如何按惯例使用的？

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

在href中，你会放一些类似的东西

@Url.Action("About")

如果您有一个名为 About 的 ActionResult 返回 about.cshtml 视图。

于 2013-08-06T20:59:20.767 回答