web-dev-qa-db-fra.com

Emplacement approprié pour charger jQuery en mode Présentation MVC

J'ai créé un MVC 4 en utilisant le modèle par défaut, où @Script.Render(~"bundles/jquery") est appelé après @RenderBody(). Selon this post, il s'agit de l'ordre d'exécution recommandé pour empêcher le chargement de scripts pour bloquer le rendu de la page.

Je veux ajouter un petit appel jQuery dans ma vue, ou ma section RenderBody(). Cela ressemble à ceci, en haut de ma vue:

<script type="text/javascript">
$(document).ready(function()
{
    $("#eta_table").tablesorter({
        headers: {
            0: { sorter: false }
        }
    });
});

Cependant, cela générera toujours l'erreur Error: '$' is undefined Car jQuery n'est chargé qu'après la RenderBody().

Je ne peux pas imaginer que c'est un nouveau problème, cela semble être une tâche assez courante ... Des suggestions sur la façon dont cela devrait être géré?

Pour référence, voici où le jQuery est chargé:

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

Modifier

J'ai fini par déplacer le script ci-dessus dans mon fichier scripts.js et je l'ai chargé dans jQuery ci-dessous dans la page de mise en page, comme suit:

            bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                    "~/Scripts/Custom/tablesorter.js",
                    "~/Scripts/Custom/scripts.js"));

Et le HTML:

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

Sauf que cela semble toujours faux, car maintenant les scripts vont devoir se charger pour chaque page qui utilise la vue de mise en page principale. Cela fonctionne, mais est-ce la meilleure façon?

jqueryasp.net-mvc
36
Tom

Créez une nouvelle section MyScripts sous tous les autres scripts de bibliothèque

_Disposition

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

Mon avis

@section MyScripts {
    <script type="text/javascript">
        $("#eta_table");
        ...
    </script>
}

Vos scripts de page personnalisés ne sont désormais chargés qu'une seule fois après le chargement de jQuery.

83
Jasen