如何在ASP .NET Core中使用jquery

Question

我创建了一个ASP.NET核心模板并编写了一个jquery脚本.当我查看页面时,我看到jquery被加载到页面中,但脚本没有运行.我查看了ASP.NET文档页面,我的layout.cshtml看起来是一样的,所以我必须采取额外的步骤让jquery工作吗？ 主页

@{
    ViewData["Title"] = "Home Page";
}
<!-- Page Content-->
<div class="container">
    <div class="row">
        <form method="post" enctype="multipart/form-data">
            <input type="file" id="files" name="files" multiple />
            <input type="button" id="upload" value="Upload Selected Files" />
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        alert("Test"); 
    });
</script>

解

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

Answer 1

我怀疑您的jquery在页面其余内容之后加载。

这意味着您不能引用jquery对象，因为该库尚未初始化。

加载jQuery后，移动页面脚本。

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
  $(document).ready(function () {
    alert("Test"); 
  });
</script>

为了提高效率，我建议您使用以下两种方法之一：

选项1

使用在jquery之后加载的主脚本文件。

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/master.js"></script>

选项2

使用占位符模板，该模板将始终在jquery之后加载，但可以在各个页面上初始化。

主_版面页面

<script src="~/lib/jquery/dist/jquery.js""></script>
@RenderSection("Scripts", required: false)

内容页

@section Scripts {
  <script>
    $(function () {
      alert("Test"); 
    });
  </script>
}

Answer 2

为了澄清

如果你在你的_Layout页面中引用jQuery ..仔细检查以确保该引用位于页面的顶部,_Layout因为如果它位于底部,那么你拥有的每个其他页面都使用了_LayoutjQuery,它会给你错误如:

$未定义

因为你在定义之前尝试使用jQuery!

此外,如果您在_Layout页面中引用了jQuery,那么您不需要在使用您的_Layout样式的页面中再次引用它

在开始使用之前,请确保您正在加载对jQuery的引用<scripts>.

如果您将引用放在脚本上方,那么您的cshtml应该可以正常工作:

<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using

// you do not need to use this reference if you are already referencing jQuery in your Layout page

<script>
    $(document).ready(function () {
        alert("Test"); 
    });
</script>