Le contrôle d'onglet ne rend pas correctement

J'essayais de suivre un jquery tutorial de base sur la façon d'appeler l'objet onglet. Cependant, pour l'amour de moi, je n'ai pas eu de chance pour le rendre correctement.Le contrôle d'onglet ne rend pas correctement

Au lieu de le faire avec jQuery comme il se doit, il apparaît en texte brut. comme ci-dessous

zone 1
zone 2
zone 3

Proin elit arcu

Morbi tincidunt

Mauris eleifend

Je regarde une semblable question où la solution était en train d'ajouter quelques @Styles.Render et @Scripts.Render de rendre à la section <head> et en supprimant un @Scripts.Render du <body>. Mais cela ne m'a pas fait du bien.

Actuellement dans mon _Layout.cshtml le <head> ressemble à.

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title>  
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/themes/base/css") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/modernizr") 
</head>

Et en bas à droite avant la </body> je:

@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false)

Ailleurs, je dois-je l'appel @RenderBody

<div class="container body-content"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - Built with ASP.NET MVC 4</p> 
    </footer> 
</div>

Le Index.cshtml Je suis en train de faire l'onglet le contrôle ressemble actuellement.

@{ 
    ViewBag.Title = "Home Page"; 
} 

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

<div class="jumbotron"> 
    <h1>I will make a dynamic tab control here</h1>  
</div> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">area 1</a></li> 
     <li><a href="#tabs-2">area 2</a></li> 
     <li><a href="#tabs-3">area 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Mauris eleifend</p>   
    </div> 
</div>

Le développement Web me met en colère certains jours. Ma section de modèle et de couche de données de mon projet était un jeu d'enfant pour faire un test.

Source

2014-06-19 tyh

vous manque le 'jQuery UI CSS' dans votre tête de page. – melancia

MelanciaUK avait partiellement raison. Mes paquets ont été foirés, il me manquait des feuilles de style et des scripts. Je fais trop confiance à Visual Studio.

J'ai utilisé NuGet pour réinstaller les packages, puis j'ai corrigé mon BundleConfig.cs pour qu'il corresponde.

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
       "~/Scripts/jquery-ui*")); 

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.css", 
      "~/Content/site.css", 
      "~/Content/themes/base/jquery-ui.css"));

Comme l'a dit dans Monty Python, "Et il se réjouissait beaucoup"

enter image description here

Source

2014-06-19 16:58:49 tyh

Le contrôle d'onglet ne rend pas correctement

Répondre

Questions connexes