.NET5 Razor Pages项目中jQuery仅在Layout.cshtml中生效问题求助

DevOps 小满

2026-9-30

核心问题排查

第一优先级检查Section名称大小写匹配：Razor Pages的@section名称大小写敏感，你的_Layout.cshtml中定义的渲染节点是@RenderSection("Scripts", required: false)（首字母S大写），但子页面index.cshtml中写的是@section scripts（全小写），名称不匹配导致脚本块根本没有被渲染到最终生成的HTML页面中，这是最常见的问题。
检查jQuery资源加载状态：打开浏览器开发者工具的「网络」面板，筛选JS资源，确认jquery.min.js的加载状态为200，不存在404错误。如果出现404，检查wwwroot/lib/jquery/dist目录下是否存在对应文件，或调整脚本引用路径。
检查控制台JS报错：打开浏览器开发者工具的「控制台」面板，确认没有$ is not defined这类报错。你当前的Layout中jQuery引用在Scripts节渲染之前，顺序是正确的，只要Section正确渲染就不会出现该报错。
检查元素绑定逻辑：如果.btn-reply是页面加载完成后动态生成的元素，直接用click绑定不会生效，需要用事件委托写法。

解决方案

1. 修正Section名称

将index.cshtml中的节名称改为和Layout一致的大写开头：

@section Scripts {
    <script>
        // 静态元素可以用原有写法
        $(document).ready(function () {
            $(".btn-reply").click(function (event) {
                alert("it works");
            });
        });

        // 如果是动态生成的元素，替换为事件委托写法
        // $(document).on('click', '.btn-reply', function(event) {
        //     alert("it works");
        // });
    </script>
}