Comment utilisez-vous mvc vue de remplir bootstrap onglets?

Je suis de la construction d'une application MVC et essaie d'utiliser twitter bootstrap pour construire un réactif de l'interface utilisateur. J'ai configurer mon de navigation comme suit:

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

Ma question est quelle est la solution optimale.
1) trouver un moyen, pour mettre cela dans un Rasoir de Mise en page et de charger les panneaux comme RenderSections
2) À la ferraille le Rasoir de Mise en page et la navigation sur toutes les pages de contenu

Une mise en page est en effet un bon choix. Copie et collage de la navigation dans chaque page serait une mauvaise idée.

OriginalL'auteur matt weston | 2013-11-18

1

Dans ce cas, je serais Probablement vous recommandons d'utiliser RenderPage vs RenderSection comme il semblerait que vous ayez toujours le même contenu affiché dans chaque panneau. Si la plupart de votre travail sera fait dans votre _Layout.cshtml. Votre corps va ressembler à ceci:
```
  <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>
```
Alors vous allez avoir un Index.cshtml qui agira comme votre page d'atterrissage et il ressemblera à quelque chose comme ceci:
```
<div>
   @Html.Partial("ViewName")
   //Reapeat for each tab
</div>
```
Chaque onglet partielle, vous aurez votre contenu de l'onglet:
```
<div class="tab-content">
     <div id="panel1" class="tab-pane">
          page 1
     </div>
</div>
```
Ainsi, chaque "vue" aurait des divs avec le panneau de contenu ou voulez-vous juste qu'une page d'atterrissage avec tout le contenu du panneau?
est votre onglet de contenu va être statique ou dynamique?
Nous sommes à la recherche à la construction d'un POS application similaire à celui de http://www.vendhq.com. Je suis en train de construire la navigation où nous avons l'un des principaux barre de navigation en haut et un sous barre de navigation qui se charge en fonction de l'onglet sélectionné.
donc, ce qui impliquerait que chaque onglet contenu dynamique vs statique HTML
Correct, je pense avoir une solution. Basé sur le code que vous avez présenté, je pense que je vais mettre mon panneau de divs dans la "landing page" et insérer mes sous menus que des vues partielles à l'intérieur de ces divs. Je vais donc avoir un RenderPage pour le contenu de chaque panneau et de charger le contenu via jquery.

OriginalL'auteur Jared
0

Cela peut être fait à l'aide de mises en page. Voici les étapes de base:
1. Créer une mise en page qui comprend votre barre de navigation. Mettre à la disposition du /Vues/dossier Partagé. (par exemple, _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. Créer un modèle (avec éventuellement une action de contrôleur) pour chaque élément de la barre de navigation (à Vendre, des Produits, des Clients, etc.)
3. Dans chaque modèle, référence à votre disposition comme:
```
@{
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
```
4. Puis ajouter le code javascript suivant à la page principale de la page. Ce code activement sélectionne la barre de navigation de l'élément que vous avez actuellement cliqué:
```
<script>
    $(document).ready(function () {
        var pathname = $(location).attr('pathname');
        $('a[href="' + pathname + '"]').parent().addClass('active');
    });
</script>
```
La bonne chose à propos de cette approche est que vous pouvez imbriquer autant de mises en page comme vous le souhaitez. Ainsi, par exemple, vous pourriez déjà avoir une barre de navigation et à l'intérieur de l'une de ces pages, vous pourriez avoir une autre barre de navigation (comme les onglets de pilules) en utilisant la même approche.

Cela peut être utile aussi:
http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.

OriginalL'auteur oalbrecht

Vous devez vous connecter pour publier un commentaire.