渲染 jquery 与包含脚本 MVC答案

【问题标题】：Render jquery versus include script MVC渲染 jquery 与包含脚本 MVC
【发布时间】：2023-03-21 20:35:02
【问题描述】：

脚本一般在html文件的表单头部分添加：

<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

MVC .NET 框架，默认情况下它在底部使用它们，在页脚之后如下：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

问题： 我检查了 DOM 并添加了它们。在布局底部使用渲染，不会使 .affix 等 jQuery 功能正常工作。但是如果我在视图顶部包含 same 两个脚本，它就可以工作。示例：

DOM (NOT Work):

<body data-target="#mysidebar" data-spy="scroll">
   <section>
    <div class="container">    
       <div id="mysidebar" class="col-md-3">
       ... Sidebar content
       </div>
       <div class="col-md-9">
       ... Content
       </div>
   </section>
</body>
<footer></footer>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>


DOM (Works):

<body data-target="#mysidebar" data-spy="scroll">
   <script src="/Scripts/jquery-3.1.1.min.js"></script> <-- Added them here too make it work!
   <script src="/Scripts/bootstrap.min.js"></script>
   <section>
    <div class="container">    
       <div id="mysidebar" class="col-md-3">
       ... Sidebar content
       </div>
       <div class="col-md-9">
       ... Content
       </div>
   </section>
</body>
<footer></footer>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

解决方案

After trying many things this worked:
<body data-target="#mysidebar" data-spy="scroll">
   <section>
    <div class="container">    
       <div id="mysidebar" class="col-md-3">
       ... Sidebar content
       </div>
       <div class="col-md-9">
       ... Content
       </div>
   </section>
</body>
<footer></footer>
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/jquery.easing.min.js"></script>
<script src="/Scripts/classie.js"></script>
<script src="/Scripts/cbpAnimatedHeader.js"></script>
<script src="/Scripts/site.js"></script> <-- updated queries

【问题讨论】：

您的脚本引用是否在部分页面上？
你看过控制台日志吗？请记住，通常 jQuery 在其他需要它的脚本之前首先加载，方法是放置在 <head> 标记内。
将它们放在底部让内容加载更快

标签： jquery .net asp.net-mvc razor

【解决方案1】：

建议将脚本放在页面底部以减少加载页面所需的时间，除非页面顶部需要您的脚本，例如：Modernizer

如果你直接包含脚本标签它工作的原因很可能是你忘记将它添加到 BundleConfig 中，检查 BundleConfig 并确保 JQuery 包含在正确的版本中，也许它包含在特定的更新包时已更改的版本

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

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

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }

【讨论】：

不，它们已正确添加。我仍然不确定为什么我需要第二次添加查看添加的代码。
您是否通过查看源代码来检查生成的 HTML 并确保将正确的标签添加到页面中？在将它们添加到页面之前，您是否还引用了这些库中的任何一个？
是的，这就是疯狂的地方。我将所有渲染脚本移动到加载到中，（应该没问题并正确解决问题）它没有。如果我仍然在节部分之前再次将这两个添加到视图中。
当您打开开发工具栏时，您可以在网络选项卡中检查网络吗？只是为了查找你是否是任何带有 404 的文件
缩小范围是某种依赖顺序（不知道为什么）。在标题中：添加了 jquery、bootstrap 和我自己的脚本 (site.js)。然后在页脚添加了像 jquery 验证这样的附加内容之后，这似乎解决了问题。有关详细信息，请参阅上面的更新代码。