web-dev-qa-db-fra.com

Comment utiliser jquery dans ASP .NET Core

J'ai créé un modèle de base ASP.NET et écrit un script jquery. Quand je regarde la page, je vois que jquery est chargé dans la page, mais le script ne s'exécute pas. J'ai regardé la page des documents ASP.NET et mon layout.cshtml est le même, alors y a-t-il des étapes supplémentaires que je dois prendre pour que jquery fonctionne? enter image description here Page d'accueil

@{
    ViewData["Title"] = "Home Page";
}
<!-- Page Content-->
<div class="container">
    <div class="row">
        <form method="post" enctype="multipart/form-data">
            <input type="file" id="files" name="files" multiple />
            <input type="button" id="upload" value="Upload Selected Files" />
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        alert("Test"); 
    });
</script>

Solution 

@section scripts
{
    <script>
        $(document).ready(function() {
            alert("Test");
        });
    </script>
}
c#jqueryasp.netasp.net-mvcasp.net-core
15
AJ_

Je soupçonne que votre requête est chargée après le reste du contenu de la page.

Cela signifie que vous ne pouvez pas référencer les objets jquery car la bibliothèque n'a pas encore été initialisée.

Déplacez le script de page après le chargement de jquery.

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
  $(document).ready(function () {
    alert("Test"); 
  });
</script>

Pour plus d'efficacité, je vous recommande de le faire de deux manières:

OPTION 1

Utilisez un fichier de script principal qui se charge après jquery.

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/master.js"></script>

OPTION 2

Utilisez un modèle d'espace réservé qui se chargera toujours après jquery mais qui peut être initialisé sur des pages individuelles.

Page Master _Layout

<script src="~/lib/jquery/dist/jquery.js""></script>
@RenderSection("Scripts", required: false)

Page de conten

@section Scripts {
  <script>
    $(function () {
      alert("Test"); 
    });
  </script>
}
10
DreamTeK

POUR LA CLARIFICATION

Si vous faites référence à jQuery dans votre _Layout page .. revérifiez pour vous assurer que cette référence se trouve au EN HAUT de votre _Layout page parce que si elle est en bas, alors toutes les autres pages que vous avez qui utilisent le _Layout et a jQuery, il vous donnera des erreurs telles que:

$ n'est pas défini

parce que vous essayez d'utiliser jQuery avant qu'il ne soit jamais défini!

De plus, si vous faites référence à jQuery dans votre _Layout page alors vous n'avez pas besoin de la référencer à nouveau dans vos pages qui utilisent votre _Layout style

Assurez-vous que vous chargez la référence à jQuery avant de commencer à utiliser <scripts>.

Votre cshtml devrait fonctionner si vous placez la référence au-dessus de votre script comme suit:

<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using

// you do not need to use this reference if you are already referencing jQuery in your Layout page

<script>
    $(document).ready(function () {
        alert("Test"); 
    });
</script>
10
Grizzly

Si vous créez un nouveau .Net Core 2.2 - Web Application with Razor Pages et essayez d'ajouter un script jQuery dans index.cshtml vous obtiendrez l'erreur Uncaught ReferenceError: $ is not defined. Comme déjà mentionné, c'est parce que jQuery est chargé après le reste du contenu de la page.

Corrigez cela en accédant à Pages\Shared\_Layout.cshtml et ajoutez la section scripts à la balise html head à la place. Ensuite, cela fonctionnera:

Exemple:

Déplacer d'en bas </footer>:

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
    </script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)

Dans <head>, devrait ressembler à ceci:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - JiraApp.Clients.Web</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</head>
0
Ogglas