comment ajouter un script src dans une vue lors de l'utilisation de la mise en page

100

Je souhaite inclure une référence javascript comme:

<script src="@Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>

Si j'ai une vue Razor, quelle est la bonne façon de l'inclure sans avoir à l'ajouter à la mise en page (je n'en ai besoin que dans une seule vue spécifique, pas toutes)

Dans aspx, nous pourrions utiliser des espaces réservés pour le contenu. J'ai trouvé des exemples plus anciens utilisant aspx dans mvc mais pas avec la vue Razor.

asp.net-mvc razor

— dferraro
source

Ajoutez simplement la balise de script à votre vue.

— jrummell

Je veux juste ajouter le script dans ma vue, mais lorsque j'affiche la source sur la page qui est créée, il met les balises de script dans le <body> du html au lieu du <head>?

— dferraro le

pour les navigateurs plus récents, type = "text / javascript" n'est pas nécessaire

— Mark Schultheiss

Réponses:

170

Selon la façon dont vous voulez l'implémenter (s'il y avait un emplacement spécifique où vous vouliez les scripts), vous pourriez implémenter un @sectiondans votre _Layoutqui vous permettrait d'ajouter des scripts supplémentaires à partir de la vue elle-même, tout en conservant la structure. par exemple

_Disposition

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    @RenderSection("Scripts",false/*required*/)
  </head>
  <body>
    @RenderBody()
  </body>
</html>

Vue

@model MyNamespace.ViewModels.WhateverViewModel
@section Scripts
{
  <script src="@Url.Content("~/Scripts/jqueryFoo.js")"></script>
}

Sinon, ce que vous avez est très bien. Si cela ne vous dérange pas d'être "en ligne" avec la vue qui a été sortie, vous pouvez placer la <script>déclaration dans la vue.

— Brad Christie
source

BTW, les sections sont essentiellement vos contentplaceholders auxquels vous faisiez référence. Voir le projet Web MVC par défaut et comment ils placent un en-tête sur la page.

— Brad Christie

Merci. C'était ce que je cherchais - mais est-il possible de le faire sans RenderSection? Vous dites `` ce que vous avez va bien '' - mais je n'ai encore rien ... J'ai essayé de mettre les références de script en haut du .cshtml, mais le résultat est que les références sont dans le <body> mais elles devraient être dans la tête

— dferraro

@dferraro: vous devez alors ajouter RenderSection("Scripts")à votre mise en page (comme vous le feriez pour un espace réservé), puis définir un @section Scripts {}dans la vue. À un moment donné, une modification du "maître" (_layout) est imminente. Vous ne pouvez pas simplement définir quelque chose dans une vue et lui dire "placez-le entre <head>pour moi" (sauf si vous voulez entrer dans un script qui ajoute un script)

— Brad Christie

+1. Aussi @dferraro une meilleure chose serait de mettre les références à jQuery et à la RenderSection avant le </body> et pas du tout dans la tête. Lecture ancienne mais pertinente: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev

Si votre script n'est pas dans le Scriptsdossier, vous devrez peut-être également activer l'accès à celui-ci: stackoverflow.com/questions/24763493/…

— Homer

Si vous utilisez le moteur de visualisation Razor, modifiez le fichier _Layout.cshtml. Déplacez le @ Scripts.Render ("~ / bundles / jquery") présent en pied de page vers la section d'en-tête et écrivez le code javascript / jquery comme vous le souhaitez:

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(document).ready(function () {
        var divLength = $('div').length;
        alert(divLength);
    });
</script>

— Dilip Nannaware
source

Vous pouvez ajouter les balises de script comme celles que nous utilisons dans asp.net tout en effectuant des validations côté client comme ci-dessous.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
       //Your code
    });
</script>

— Santhosh kumar Vadlamani
source

pour les navigateurs plus récents type="text/javascript"n'est pas nécessaire

— Mark Schultheiss