我应该在哪里将 js 脚本文件放在 mvc 应用程序中以便 jquery 运行良好？答案

【问题标题】：where should i place the js script files in a mvc application so jquery works well?我应该在哪里将 js 脚本文件放在 mvc 应用程序中以便 jquery 运行良好？
【发布时间】：2015-12-08 02:52:15
【问题描述】：

_layout.cshtml 有代码行

@Scripts.Render("~/bundles/jquery")    
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

默认情况下，它们被 MVC 放置在 <body> 标记内。但是当我将它们留在这个地方时，有时jquery 不起作用。所以我决定将这三行放在_layout.cshtml 中的<head> 块中，这样页面就会将样式和脚本文件放在<head> 中，就像任何人对php 或jsp 所做的那样。好消息是当我把这些文件放在<head> 中时，我所有的jquery 又开始工作了。但是大多数 MVC 书籍都说将脚本放在 <body> 块中。

那么我应该把它们放在哪里？

更新帖子：

这是我的捆绑文件：

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
}

这是布局文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")


</head>
<body>
    @RenderBody()

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

这里是视图：

@{
    ViewBag.Title = "TestPage";
}

<h2>TestPage</h2>

<input type="submit" name="name" value="Click me" id="btn"/>
<div id="d1"></div>

<script type="text/javascript">
    $('#btn').click(function(){

        alert('clicked');

    });
</script>

这里是video to show that click does not work

【问题讨论】：

建议将所有 javascript 文件添加到页面末尾，这样可以先呈现页面，并且不会减慢您感知的页面速度。 jQuery 需要成为底部添加的脚本列表中的第一个才能正常工作。您的问题很可能是您将脚本添加到 jquery 链接上方的正文中。

标签： asp.net-mvc-4

【解决方案1】：

在您的布局文件中，用于加载 jQuery 库的脚本标签包含在页面末尾。但在其下方还有一个名为scripts 的部分。因此，在您的各个页面中（例如：索引、视图等。）您应该将您的 javascript 放在部分脚本中

<body>
 @RenderBody()

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

在你的观点中（例如：索引视图）

@section scripts{

    <script src="~/Scripts/SomePageSpecificFile.js"></script>
    <script>
     $(function(){
        // Your other js code goes here
     });
   </script>

}

所以当 razor 渲染页面时，它将是

<body>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/SomePageSpecificFile.js"></script>
    <script>
      $(function(){
        // Your other js code goes here
      }); 
   </script>
</body>

只要您在 scripts 部分执行使用 jQuery 的页面特定 javascript，就可以了。

【讨论】：

但是@Scripts.Render("~/bundles/jquery") 代码行包括主要的jquery脚本文件，但这就是问题所在，当我放置@Scripts 时，我正在编写代码以获取选中的复选框.Render("~/bundles/jquery") 在布局文件的正文区域它没有执行点击事件所以我不得不将它们移动到然后它工作
你不需要！只要您的其他脚本位于脚本部分下，它就应该可以工作。
你是说这个包@Scripts.Render("~/bundles/jquery") 只添加主jquery文件然后所有其他与引导和ajax相关的脚本应该放在一个“节”
在布局中包含所有常见的（例如：jQuery/Bootstrap 等）以及使用脚本部分的各个页面中的页面特定脚本。
在您的 TestPage.cshtml 中，您需要将您的 javascript 代码放入 @section scripts 中，正如我在回答中提到的那样。另外我建议你把你的点击事件处理程序代码放在 document.ready event($(function(){ //code });