如何在ASP.NET Core中使用jQuery

如果你创建一个新的.NET Core 2.2 - Razor Pages的Web应用程序，并尝试在index.cshtml中添加一个jQuery脚本，你会收到错误消息"Uncaught ReferenceError: $ is not defined"。如前所述，这是因为jQuery在页面内容加载完成后才被加载。

解决方法是打开Pages\Shared\_Layout.cshtml，将脚本部分添加到html的head标签中。如下所示：

移动到

之后的代码段：

    
    


    
    


("Scripts", required: false)

移到标签内，应该像这样：

    
    
    
    
        
    
    
        
    
    
    
        
        
    
    
        
        
    
    
    ("Scripts", required: false)

为什么他们默认把它放在页脚里，而不能起作用呢..？

我不知道。

问题的出现原因：在ASP.NET Core中，如果在_Layout页面中引用了jQuery，并且该引用位于页面底部，那么在使用_Layout并且包含jQuery的其他页面中将会出现错误，报错信息为$ is undefined，因为在使用jQuery之前，jQuery尚未被定义。另外，如果在_Layout页面中引用了jQuery，则不需要在使用_Layout样式的其他页面中再次引用它。

解决方法：确保在开始使用 // 或者使用其他版本的jQuery // 如果已经在_Layout页面中引用了jQuery，则不需要再次引用

此外，可以使用_scripts { }标记来加载页面上的脚本，并在_Layout.cshtml文件中使用("scripts", required: false)来加载脚本。如果在cshtml中使用脚本，则需要将其包装在section scripts { }中，或者引用要加载的JavaScript文件。可以参考这个stackoverflow.com/questions/23327578/…中的答案来解决该问题。

在ASP.NET Core中使用jQuery的问题是因为jQuery在页面内容的后面加载，这意味着在库初始化之前无法引用jQuery对象。解决方法是将页面脚本移动到jQuery加载之后。

为了提高效率，推荐两种方法：

OPTION 1：使用在jQuery之后加载的主脚本文件。

OPTION 2：使用一个总是在jQuery之后加载但可以在单独的页面上初始化的占位符模板。

Master _Layout Page

@RenderSection("Scripts", required: false)

Content Page

@section Scripts {
  
}

选项2是更好的选择。

好工作，选项2对我有效。