web-dev-qa-db-fra.com

comment ajouter un script src dans une vue lors de l'utilisation de la disposition

Je veux 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 au contenu. J'ai trouvé des exemples plus anciens utilisant aspx dans mvc, mais pas dans Razor View.

77
dferraro

En fonction de la manière dont vous souhaitez l'implémenter (si vous souhaitez utiliser les scripts à un emplacement spécifique, vous pouvez implémenter un @section dans votre _Layout qui 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 bien. Si cela ne vous dérange pas d'être "en ligne" avec la vue qui a été sortie, vous pouvez placer la déclaration <script> dans la vue.

143
Brad Christie

Si vous utilisez le moteur de vue Razor, éditez le fichier _Layout.cshtml. Déplacez le @ Scripts.Render ("~/bundles/jquery") présent dans le 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>
11
Dilip Nannaware

Vous pouvez ajouter les balises de script de la même manière que nous utilisons dans asp.net lors 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>