15

我在文件末尾有以下 Asp.Net MVC 4 剃须刀代码。

....
@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 的最后四行。

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

6 回答 6

27

在实际使用它之前，您需要包含 JQuery。

实现此目的的一种常见方法是在您的主布局中将您的需求脚本包含在头部。或者放置一个可选部分（head），您可以在其中有条件地包含脚本

首先为您想要在每个页面上的 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>

然后使用这个 razor 文件作为所有其他派生的 razor 视图的基本布局，如下所示：

@{
    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 之前调用您的脚本，因此它不知道 $ 是什么意思。尝试将 jquery 脚本加载到布局文件的 head 部分。

于 2013-03-17T07:36:38.157 回答
2

无需移动任何东西。就在视图中有脚本的地方，将脚本放在节脚本中，假设您在 _Layout 文件中声明了节脚本：

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

您可以对每个页面上带有附加 CSS 的部分执行相同的技术，声明部分 CSS 或 Head 或任何名称，然后在标记之前的视图顶部添加 @section name{ }

于 2020-10-15T19:02:19.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 回答
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 回答