.NET Core 2.0 MVC如何将页面特定JS注入Shared/_Layout

嘿，这个需求在.NET Core 2.0 MVC里其实有挺成熟的解决方案，我来给你捋几个实用的方法，都能轻松实现页面级的JS注入：

这是官方推荐的方式，完美适配布局页和视图的组合场景：

1. 修改Shared/_Layout.cshtml：在页面底部的现有全局脚本（比如jQuery、通用站点JS）下方，添加一个可渲染的Section标记：

<!-- 现有全局脚本 -->
<script src="~/js/jquery.min.js"></script>
<script src="~/js/site.js"></script>

<!-- 页面专属脚本注入区域 -->
@RenderSection("Scripts", required: false)

这里required: false是关键，意思不是所有页面都必须提供这个Section，避免没有专属JS的页面报错。

2. 在登录页（Login.cshtml）中添加专属JS：在视图的任意位置（通常放在末尾）定义Scripts Section，把登录页的JS引用放进去：

@section Scripts {
    <!-- 引入登录页专属JS文件 -->
    <script src="~/js/login.js"></script>
    
    <!-- 也可以直接写内联JS逻辑 -->
    <script>
        $(function() {
            // 登录页的初始化逻辑
            $('#login-form').submit(function(e) {
                // 自定义表单验证等逻辑
            });
        });
    </script>
}

这样当渲染登录页时，Razor会自动把这个Section的内容插入到布局页的对应位置，刚好在全局脚本之后，符合JS加载顺序的最佳实践。

如果你的页面专属JS需要根据后端条件动态生成（比如根据用户角色加载不同的JS），ViewComponent会更合适：

1. 创建PageScriptsViewComponent：在项目中新建一个ViewComponent类：

public class PageScriptsViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        // 获取当前视图名称，判断是哪个页面
        var viewName = ViewContext.View.Path.Split('/').Last().Replace(".cshtml", "");
        
        // 传递视图名称到视图模板
        return View(viewName);
    }
}

2. 创建ViewComponent的视图模板：在Views/Shared/Components/PageScripts目录下新建Default.cshtml，根据视图名称渲染对应JS：

@model string

@if (Model == "Login")
{
    <script src="~/js/login.js"></script>
}
else if (Model == "Home")
{
    <script src="~/js/home.js"></script>
}
<!-- 其他页面的JS引用可以继续添加 -->

3. 在布局页中调用ViewComponent：在全局脚本下方添加：

@await Component.InvokeAsync("PageScripts")

如果只是临时快速实现，不想搞复杂的Section或ViewComponent，可以用ViewBag：

1. 在Login的Action中设置ViewBag：

public IActionResult Login()
{
    ViewBag.PageScript = "<script src='~/js/login.js'></script>";
    return View();
}

2. 在布局页中渲染：在全局脚本下方添加：

@Html.Raw(ViewBag.PageScript ?? "")

⚠️ 注意：这个方法要谨慎使用，如果PageScript包含用户输入的内容，会有XSS风险，只适合自己可控的静态JS引用。

总结一下：优先用Razor Sections，因为它是Razor视图体系的标准功能，清晰且易维护；如果需要后端逻辑控制，就用ViewComponent；快速临时场景可以用ViewBag。

内容的提问来源于stack exchange，提问作者user6383418