1

Twitter ブートストラップ css/ui ビューを使用して、初めて Web サイト (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

あなたが初心者であると述べているのを見て、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.cshtml ビューを返す About という ActionResult がある場合。

于 2013-08-06T20:59:20.767 に答える
0

代わりにレイアウト ページを作成するだけで、目的を達成できました。

于 2013-08-07T14:44:05.867 に答える