web-dev-qa-db-ja.com

ASP.NETコアでjqueryを使用する方法

ASP.NETコアテンプレートを作成し、jqueryスクリプトを作成しました。ページを見ると、jqueryがページに読み込まれていることがわかりますが、スクリプトは実行されません。 ASP.NETのドキュメントページを見て、layout.cshtmlは同じように見えるので、jqueryを機能させるために必要な追加の手順はありますか？ enter image description here ホームページ

@{
    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>

ソリューション

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

残りのページコンテンツの後にjqueryがロードされていると思われます。

これは、ライブラリがまだ初期化されていないため、jqueryオブジェクトを参照できないことを意味します。

Jqueryがロードされた後、ページスクリプトを移動します。

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

効率のために、次の2つの方法のいずれかでこれを行うことをお勧めします。

オプション1

Jqueryの後にロードするマスタースクリプトファイルを使用します。

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

オプション2

Jqueryの後に常にロードされるが、個々のページで初期化できるプレースホルダーテンプレートを使用します。

マスター_レイアウトページ

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

コンテンツページ

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

説明用

_LayoutページでjQueryを参照している場合は、その参照が_Layoutの-​​[〜＃〜] top [〜＃〜]にあることを確認してください。ページが一番下にある場合、_Layoutを使用しjQueryを使用している他のすべてのページでは、次のようなエラーが発生します。

$は未定義です

jQueryを定義する前に使用しようとしているからです！

また、_LayoutページでjQueryを参照している場合、_Layoutスタイルを使用するページで再度jQueryを参照する必要はありません

<scripts>の使用を開始する前に、jQueryへの参照をロードしていることを確認してください。

スクリプトの上に参照を置くと、cshtmlが機能するはずです。

<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

新しい.Net Core 2.2-Web Application with Razor Pagesを作成し、index.cshtmlにjQueryスクリプトを追加しようとすると、エラーUncaught ReferenceError: $ is not definedが表示されます。既に述べたように、これはjQueryが残りのページコンテンツの後にロードされるためです。

Pages\Shared\_Layout.cshtmlに移動してこれを修正し、代わりにscripsセクションをhtml headタグに追加します。それから動作します：

例：

下から移動します</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)

<head>には、次のようになります。

<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