15

ファイルの最後に次のAsp.NetMVC4かみそりコードがあります。

....
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    $('#Address_State').val('MA');
</script>
////// End of file

ただし、次のhtmlコードが生成されました。そして、それは行でエラーを発生させます$('#Address_State').val('MA');。エラーメッセージはUncaught ReferenceError: $ is not definedです。かみそりファイルにjQueryコードを挿入する方法は？

.....
<script type="text/javascript">
    $('#Address_State').val('MA'); // Uncaught ReferenceError: $ is not defined
</script>
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2013 - Paperspeed</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.9.1.js"></script>


    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>


    </body>
</html>

アップデート：

以下は、_Layout.cshtmlの最後の4行です。

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

6 に答える 6

27

実際に使用する前に、JQueryを含める必要があります。

これを実現する一般的な方法は、マスターレイアウトで、requireスクリプトをヘッドに含めることです。または、条件付きでスクリプトを含めることができるオプションのセクション（ヘッド）を配置します

まず、すべてのページで必要なjqueryスクリプトに必要なバンドルを作成します。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/js/required").Include(
        "~/Scripts/jquery-2.0.2.js"));

    //other bundles
}

次に、サイトテンプレートを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    @Styles.Render("~/css/required")
    @RenderSection("head", false) //For css on a page by page basis
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/js/required") //Here add your jquery include
    @RenderSection("scripts", false) //Here you add scripts at the bottom of the page
</body>
</html>

次に、このかみそりファイルを、次のような他のすべての派生かみそりビューの基本レイアウトとして使用します。

@{
    ViewBag.Layout = "~/Views/Shared/_MasterLayout.cshtml";
}

@section head {
     //Any css you want to add
}

<p>Some html content</p>

@section scripts {
    //scripts you want to include at the bottom on a page by page basis
}
于 2013-03-17T07:38:38.637 に答える
19

次のコード行を、bodyタグ内の_Layout.cshtmlビューの上部に移動します。次に、jQueryスクリプトが最初にロードされます。

<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
于 2014-08-20T03:55:28.677 に答える
7

スクリプトはjqueryが読み込まれる前に呼び出されるため、$の意味がわかりません。レイアウトファイルのheadセクションにjqueryスクリプトをロードしてみてください。

于 2013-03-17T07:36:38.157 に答える
2

何も動かす必要はありません。ビュー内のスクリプトがある場所で、スクリプトをセクションスクリプト内に配置します。たとえば、_Layoutファイルでセクションスクリプトを宣言したと仮定します。

@section scripts{
    <script>
        $(document).ready(function () {
            alert('Hello');
        });
    </script>
}

各ページにCSSが追加されているセクションに対して同じ手法を実行し、セクションCSSまたはHeadなどの名前を宣言してから、マークアップの前にビューの上部に@sectionname{}を追加できます。

于 2020-10-15T19:02:19.623 に答える
0

jquery addはレンダリング本体の後にありますか？次のように移動します"

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

"タグへの行

このような "

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

「」

于 2015-08-17T09:11:02.623 に答える
0

@Dmitri Kが言及しているように、何かを動かす必要はありません。

ページの読み込み後に呼び出す必要のあるスクリプトを中に入れるだけです

$(document).ready(function () {}そのようです：

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            // Items that NEED to be set after the page is loaded.
            $('#Address_State').val('MA');
            $('.some-div-class').on('click', 'button', function (event) 
            {
               // Binding click event to all buttons in 'some-div-class'
               // Do something on those clicks
               event.preventDefault();
               someFunction();
            }
            // And so on.
        });

        //Items that DON'T NEED to be called on page load can be put outside document.ready. For eg:
        function someFunction() { // Some logic }
    </script>
}
于 2022-02-11T16:26:03.930 に答える