Question

我正在尝试使用twitter bootstrap css / ui views首次创建一个网站（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应用程序。

Answer 1

我认为您需要加载部分视图以便您需要;

<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")

Answer 2

看到你声明自己是初学者，你可能希望看看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视图。

Answer 3

我只需创建一个布局页面即可实现我想要的目标。

如何在导航选项卡中加载MVC视图

3 个答案: