web-dev-qa-db-fra.com

Pourquoi Asp.Net MVC 5 a mis @ Scripts.Render ("~ / bundles / jquery") en bas dans _Layout.cshtml?

J'ai mis des blocs <script> Qui utilisent jQuery dans le corps d'un (et un seul) fichier cshtml qui utilise le modèle et ils provoquent une erreur car jQuery n'est pas encore chargé.

Quel est le point de mettre la @Scripts.Render("~/bundles/jquery") au bas du fichier _Layout.cshtml?

Le bas du _Layout.cshtml.

    @RenderBody()
    <hr />
    <footer>
    </footer>
</div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Ce qui suit montre la source générée du fichier cshtml.

<script>
    $(document).ready(function () { /// $ not defined.
        // .....
    });
</script>

    <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
jqueryasp.netasp.net-mvcasp.net-mvc-5
20
ca9163d9

Vous pouvez utiliser des sections:

dans votre mise en page:

...
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
@RenderSection("scripts", required: false)
...

dans le vôtre cshtml:

@section scripts {
    <script>
        $(document).ready(function () { /// $ not defined.
            // .....
        });
    </script>
}
31
Pascalz

Il suffit de l'enfermer à l'intérieur section scripts dans la page .cshtml comme indiqué.

@section scripts{
  <script>
  $(document).ready(function () { 
    // .....
  });
  </script>
}
9
Kartikeya Khosla

Si le script se trouve en haut de la page et qu'il y a des problèmes, cela peut entraîner l'arrêt/le chargement de la page. Les placer en bas permet à la page de s'afficher complètement avant que votre script ne fonctionne.

1
TSK007

Il est recommandé de charger vos fichiers javascript après chaque élément HTML possible.

Sachant cela, je placerais votre gestionnaire de documents prêt après le chargement de toutes les bibliothèques.

 <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script>
    $(document).ready(function () { /// $ not defined.
        // .....
    });
</script>
1
sergserg