如何在 ASP.​NET Core 中使用 jquery

【问题标题】：How to use jquery in ASP.​NET Core如何在 ASP.​NET Core 中使用 jquery
【发布时间】：2016-10-21 18:54:18
【问题描述】：

我创建了一个 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>
}

【问题讨论】：

  • 调试控制台有错误吗？
  • 你是在$(document).ready之前加载jQuery吗？
  • 与该页面相关的 jQuery 参考在哪里？它是在那个脚本之上还是之下？
  • @BviLLe_Kid 在页面下方，但这就是它的 $(document).ready 的原因
  • 使用@section 脚本{ } 见这里：stackoverflow.com/questions/23327578/…

标签： c# jquery asp.net asp.net-mvc asp.net-core


【解决方案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>
}

【讨论】：

  • 是的，这可能有效，但我使用了部分。 @section 脚本 { }
  • 我可以选择重复的答案吗？
  • 非常感谢，就是这样 :) 我需要自己做这件事，只需调整布局中我的 jquery 脚本标签下的部分部分就可以了 :)
  • 选项 2 是更好的选择。
  • 干得好。选项 2 对我有用。
【解决方案2】：

澄清

如果您在 _Layout 页面中引用 jQuery.. 请仔细检查以确保该引用位于您的 _Layout 页面的 TOP 中，因为如果它位于底部，那么每个您拥有的其他页面使用 _Layout 并具有 jQuery，它会给您错误，例如：

$ 未定义

因为您在定义之前尝试使用 jQuery！

另外，如果您在 _Layout 页面中引用 jQuery，那么您无需在使用 _Layout 样式的页面中再次引用它

在开始使用 &lt;scripts&gt; 之前，请确保您正在加载对 jQuery 的引用。

如果您将引用放在脚本上方，您的 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>

【讨论】：

  • 为什么要加载两次？
  • 你不会加载它两次...加载一次但在页面呈现到屏幕之前加载它...只需将您的 jQuery 引用移到脚本上方
  • ASP.NET Core 模板在 _Layout.cshtml 文件中为您执行此操作。此外，它使用环境标签在 Dev 中选择本地副本或在 Staging and Production 中选择 CDN。
  • @ClintB 我知道，但显然在 OP 的 _Layout 中，对 jQuery 的引用位于其 -Layout 页面的底部......他们只需将该引用移至其 @ 的顶部987654329@页面。
  • @BviLLE - 应在页面底部加载 JavaScript 文件，以便在运行可能会产生错误的脚本之前加载可视元素。他在页面加载后调用的 $(document).ready 内部进行调用。就像约翰说的，他为什么要加载两次？
【解决方案3】：

如果您创建一个新的.Net Core 2.2 - Web Application with Razor Pages 并尝试在index.cshtml 中添加一个jQuery 脚本，您将收到错误Uncaught ReferenceError: $ is not defined。正如已经提到的，这是因为 jQuery 是在页面内容的其余部分之后加载的。

通过导航到 Pages\Shared\_Layout.cshtml 并将脚本部分添加到 html head 标记来解决此问题。然后它将起作用：

例子：

从&lt;/footer&gt;下方移动：

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
    </script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)

进入&lt;head&gt;，应该是这样的：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - JiraApp.Clients.Web</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</head>

【讨论】：

  • 如果不起作用，为什么他们默认将其放在页脚中..？
  • @Steji 我不知道。
【解决方案4】：

感谢所有为这些答案做出贡献的人。我是 JavaScript/jQuery 的新手，并且已经尝试让 jQuery 脚本工作两个多星期了。我已经得到了一些可以使用的示例，但是直到现在，我都不知道为什么某些东西有效或无效。

我在网上查看的所有示例都在页面底部显示了对 .js 文件的引用。这些示例都没有解释 _Layout.cshtml 文件如何与应用程序中的 Razor 视图相关联。将链接和脚本引用添加到 _Layout.cshtml 文件只是让它无法按预期工作是非常令人困惑的。接下来，我将链接和引用移动到剃须刀页面上的标题部分，但它仍然不起作用。现在我已经正确组织了一切，它正在工作，我明白为什么！！！ 关键是将脚本放在 @section Scripts {} 块中。我看到了对 RenderSectionAsync 的调用，但没有意识到它在做什么。这就是我的 _Layout.cshtml 文件底部现在的样子：

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.inputmask.min.js"></script>
<script src="~/lib/jquery/dist/inputmask.binding.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)

我希望许多新开发者看到这篇文章。对于带有 Razor 视图的 ASP Net Core 应用程序，此线程中提供的信息是无价的！再次感谢所有为答案做出贡献的人。

【讨论】：

    【解决方案5】：

    必须写在你要执行脚本的第一行下面。 如果您以其他方式编写第一行，则它不起作用。
    下面的例子来测试 JQUERY 的工作与否。

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

    【讨论】：

      猜你喜欢
      • 2020-03-25
      • 1970-01-01
      • 1970-01-01
      • 2021-04-01
      • 2020-04-03
      • 1970-01-01
      • 2022-07-13
      • 2020-04-01
      • 2021-06-14
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode