如何在ASP.NET Core Razor视图中注入动态JavaScript？

1. 修改现有代码使其正常运行 #

你遇到的a is not defined错误，是因为Razor里的a是C#变量，直接在<script>标签里写alert(a)时，浏览器会把它当成JavaScript变量，自然找不到定义。要把C#变量的值传递给JS，需要用Razor的输出语法@把变量值渲染到脚本里。

修改后的代码如下：

@if (ViewBag.CurrentPageId != null)
{
    var currentPage = wizard.Pages.FirstOrDefault(p => p.PageId == ViewBag.CurrentPageId);
    if (!string.IsNullOrEmpty(currentPage?.JavaScript))
    {
        var jsContent = currentPage.JavaScript.ToString();
        <script>
            @Html.Raw(jsContent)
        </script>
    }
}

这里做了几个关键调整：

• 加了空值判断currentPage?.JavaScript，避免currentPage为null时抛出空引用异常
• 用@Html.Raw(jsContent)直接渲染JS内容，因为如果JS里包含HTML特殊字符（比如<、>），Razor默认会转义，Html.Raw可以跳过转义保证脚本正常执行
• 直接把JS内容输出到<script>标签里，不需要额外用变量中转（当然你也可以保留变量，但核心是要用@输出）

如果你的需求就是弹出JS内容的话，也可以写成：

<script>
    alert("@Html.Raw(jsContent)");
</script>

不过要注意如果JS内容里包含双引号，需要额外处理转义，所以直接输出整个脚本内容更稳妥。

2. ASP.NET Core Razor视图中注入动态JavaScript的最佳方案 #

TagHelpers是合适的选择吗？ #

当然是！TagHelpers是ASP.NET Core里推荐的视图扩展方式，用它来封装动态JS注入逻辑非常合适，能让视图代码更干净，还能复用逻辑。

几种最佳方案： #

方案一：自定义TagHelper

比如你可以写一个DynamicScriptTagHelper，专门用来渲染动态加载的脚本：

[HtmlTargetElement("dynamic-script")]
public class DynamicScriptTagHelper : TagHelper
{
    public string ScriptContent { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "script";
        output.TagMode = TagMode.StartTagAndEndTag;
        if (!string.IsNullOrEmpty(ScriptContent))
        {
            output.Content.SetHtmlContent(ScriptContent);
        }
    }
}

然后在视图里注册并使用：

@addTagHelper *, YourAssemblyName

@if (ViewBag.CurrentPageId != null)
{
    var currentPage = wizard.Pages.FirstOrDefault(p => p.PageId == ViewBag.CurrentPageId);
    if (!string.IsNullOrEmpty(currentPage?.JavaScript))
    {
        <dynamic-script script-content="@currentPage.JavaScript"></dynamic-script>
    }
}

这种方式的好处是把脚本渲染的逻辑从视图里抽离出来，视图代码更简洁，而且可以在多个地方复用这个TagHelper。

方案二：使用局部视图（Partial View）

如果你的动态JS有固定的模板或者需要更复杂的逻辑，可以把脚本渲染逻辑放到局部视图里：
比如创建_DynamicScript.cshtml：

@model string
@if (!string.IsNullOrEmpty(Model))
{
    <script>
        @Html.Raw(Model)
    </script>
}

然后在主视图里调用：

@if (ViewBag.CurrentPageId != null)
{
    var currentPage = wizard.Pages.FirstOrDefault(p => p.PageId == ViewBag.CurrentPageId);
    await Html.PartialAsync("_DynamicScript", currentPage?.JavaScript);
}

方案三：视图组件（ViewComponent）

如果动态JS的生成需要依赖更多业务逻辑（比如需要从数据库或者服务里获取脚本内容），视图组件是更好的选择，因为它可以注入服务，处理更复杂的逻辑：

public class DynamicScriptViewComponent : ViewComponent
{
    private readonly IWizardService _wizardService;

    public DynamicScriptViewComponent(IWizardService wizardService)
    {
        _wizardService = wizardService;
    }

    public async Task<IViewComponentResult> InvokeAsync(Guid currentPageId)
    {
        var page = await _wizardService.GetPageByIdAsync(currentPageId);
        return View("_DynamicScript", page?.JavaScript);
    }
}

然后在视图里调用：

@if (ViewBag.CurrentPageId != null)
{
    @await Component.InvokeAsync("DynamicScript", new { currentPageId = ViewBag.CurrentPageId })
}

安全注意事项 #

不管用哪种方案，都要注意XSS攻击风险：如果currentPage.JavaScript的内容是用户输入的，一定要做严格的校验和过滤，避免注入恶意脚本。如果是你自己控制的脚本内容，用Html.Raw没问题，但如果是用户提交的内容，必须先进行安全处理。

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