c# - 如何在 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 之后加载，但可以在各个页面上初始化。

Master _Layout Page

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

内容页

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