Wie verwenden Sie mvc-Ansichten zu füllen bootstrap-tabs?

Ich bin Aufbau einer MVC-Anwendung und versuche, mit twitter bootstrap zu bauen, eine ansprechende Benutzeroberfläche. Ich habe meine setup-navigation wie folgt:

  <div class="nav navbar-fixed-top">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li> 
            <li><a href="#pane2" data-toggle="tab">Sell</a></li> 
            <li><a href="#pane3" data-toggle="tab">Products</a></li> 
            <li><a href="#pane4" data-toggle="tab">Customers</a></li> 
            <li><a href="#pane5" data-toggle="tab">Settings</a></li> 
            <li><a href="#pane6" data-toggle="tab">Help</a></li> 
        </ul>                                                 
    </div>
    <div>
        <div class="tab-content">
            <div id="panel1" class="tab-pane">
                page 1
            </div>
        </div>
        <!--Panels 2-6 are omitted to save space -->

    </div>
</div>

Meine Frage ist, was ist die optimale Lösung.
1) einen Weg Zu finden, um diese in einer Razor-Layout und laden Sie die einzelnen Scheiben als RenderSections
2) Schrott, die Razor-Layout und nur für die navigation für alle Inhalte der Seiten

Ein layout ist in der Tat eine gute Wahl für dieses. Kopieren und einfügen die navigation in jeder Seite wäre eine schlechte Idee.

InformationsquelleAutor matt weston | 2013-11-18

  1. 1

    In diesem Fall würde ich Wahrscheinlich empfehlen die Verwendung RenderPage vs Klassen rendersection wie es scheint, dass Sie immer den gleichen Inhalt gerendert in jedem panel. So sind die meisten Ihrer arbeiten werden in Ihrem _Layout.cshtml. Ihr Körper wird so Aussehen:

      <body>
    <div class="nav navbar-fixed-top">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li> 
        <li><a href="#pane2" data-toggle="tab">Sell</a></li> 
        <li><a href="#pane3" data-toggle="tab">Products</a></li> 
        <li><a href="#pane4" data-toggle="tab">Customers</a></li> 
        <li><a href="#pane5" data-toggle="tab">Settings</a></li> 
        <li><a href="#pane6" data-toggle="tab">Help</a></li> 
    </ul>                                                 
</div>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

    Dann sind Sie gehen zu müssen, ein Index.cshtml, die als Ihre landing page und es wird in etwa so Aussehen:

    <div>
   @Html.Partial("ViewName")
   //Reapeat for each tab
</div>

    Dann ist jeder Reiter teilweise haben Sie Ihre Inhalte für die Registerkarte:

    <div class="tab-content">
     <div id="panel1" class="tab-pane">
          page 1
     </div>
</div>
    Also jeder "Blick" hätte die divs mit der panel-Inhalte oder würde man einfach haben, eine landing page mit allen panel-Inhalte?
    wird der tab-Inhalt Los zu werden statische oder ist es dynamisch?
    Wir suchen zum Aufbau eines POS-app, ähnlich der bei http://www.vendhq.com. Ich bin versucht zu bauen, die navigation, wo wir haben ein Haupt-Navigationsleiste im oberen Bereich und eine sub-Navigationsleiste wird geladen, je nach der "tab" ausgewählt.
    also, dass würde bedeuten, dass jede Registerkarte dynamische Inhalte vs statisch, HTML
    Richtig, ich denke ich habe eine Lösung. Basierend auf dem code, den Sie präsentiert, ich denke, ich werde mein panel divs in die "landing" - Seite und legen Sie meine sub-Menüs teilweise Ansichten innerhalb dieser divs. Ich werde dann eine RenderPage für den Inhalt für jedes Fenster und laden Sie die Inhalte über jquery.

    InformationsquelleAutor Jared

  2. 0

    Diese kann getan werden, durch die Verwendung von layouts. Hier sind die grundlegenden Schritte:

    1. Erstellen ein layout mit Ihren navbar. Setzen Sie das layout im /Views/Shared " - Ordner. (z.B. _LayoutMain.cshtml) 

      <body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
    <li class="active"><a href="#pane1Link">Dashboard</a></li> 
    <li><a href="#pane2Link">Sell</a></li> 
    <li><a href="#pane3Link">Products</a></li> 
    <li><a href="#pane4Link">Customers</a></li> 
    <li><a href="#pane5Link">Settings</a></li> 
    <li><a href="#pane6Link">Help</a></li> 
</ul>                                                 
</div>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

    2. Erstellen Sie eine Vorlage (Optional mit einer controller-action) für jedes nav-Element bar (Verkauf, Produkte, Kunden, etc.)

    3. In jeder Vorlage, Referenz Ihr layout in etwa so:

      @{
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}

    4. Dann fügen Sie den folgenden javascript-code hinzu die main-layout-Seite. Dieser code aktiv ausgewählt, die nav-bar Element, das Sie haben derzeit geklickt:

      <script>
    $(document).ready(function () {
        var pathname = $(location).attr('pathname');
        $('a[href="' + pathname + '"]').parent().addClass('active');
    });
</script>

    Das schöne an diesem Ansatz ist, dass Sie Schachteln können so viele layouts, wie Sie wollen. So zum Beispiel könnten Sie haben eine Haupt-Navigationsleiste und in einer jener Seiten haben, könnten Sie eine weitere Navigationsleiste (wie tabs/Pillen) mit dem gleichen Ansatz.

    Dies könnte ebenfalls hilfreich sein:
    http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.

    InformationsquelleAutor oalbrecht

Schreibe einen Kommentar