ASP.NET Core 3.1如何将配置参数传递至JavaScript文件

其实不用每次都通过Ajax请求端点来获取配置，下面是几种直接高效的实现方式：

方案1：在Razor视图中直接注入全局JS变量 #

利用Razor的服务器端渲染能力，把配置序列化为JSON后嵌入页面的<script>标签，前端JS就能直接访问。

实现步骤： #

1. 在你的Index.cshtml视图中添加如下代码：

<script>
    // 将服务器端配置序列化为JSON，注入全局变量
    window.appConfig = @Json.Serialize(Model.ViewConfiguration);
</script>

注意：如果配置包含敏感信息，禁止使用这种方式，避免数据泄露。

2. 在外部JS文件中直接调用全局变量：

// 外部JS文件中使用配置
console.log(appConfig.property1); // 对应EnableTransactionSearch的值
// 如果传递的是完整UIConfiguration对象，可直接嵌套访问
console.log(appConfig.UI?.Transaction?.EnableTransactionSearch);

方案2：创建配置API端点（适合动态更新场景） #

如果配置需要动态更新（无需重启应用生效），或者需要控制访问权限，可以创建一个API接口返回配置：

实现步骤： #

1. 确保Startup.cs中已配置MVC（ASP.NET Core 3.1默认已包含）：

services.AddControllers();
// 保留原有Options配置
services.Configure<UIConfiguration>(Configuration.GetSection("ProjectOptions"));

2. 新建配置控制器：

[ApiController]
[Route("api/[controller]")]
public class ConfigController : ControllerBase
{
    private readonly UIConfiguration _config;

    public ConfigController(IOptions<UIConfiguration> configOptions)
    {
        _config = configOptions.Value;
    }

    [HttpGet]
    public IActionResult GetAppConfig()
    {
        // 只返回需要暴露的配置项，避免敏感信息泄露
        var exposedConfig = new 
        {
            _config.ProjectName,
            TransactionSettings = _config.UI.Transaction
        };
        return Ok(exposedConfig);
    }
}

3. 前端通过Fetch请求获取配置：

// 外部JS文件中请求配置
async function loadAppConfig() {
    const response = await fetch('/api/config');
    const config = await response.json();
    console.log(config.TransactionSettings.EnableTransactionSearch);
    // 将配置存入全局变量或状态管理工具
    window.appConfig = config;
}

// 页面加载时执行
loadAppConfig();

方案3：封装Tag Helper统一注入（进阶复用方案） #

如果多个页面都需要注入配置，可以封装Tag Helper减少重复代码：

实现示例： #

[HtmlTargetElement("app-config")]
public class AppConfigTagHelper : TagHelper
{
    private readonly UIConfiguration _config;
    private readonly IJsonHelper _jsonHelper;

    public AppConfigTagHelper(IOptions<UIConfiguration> configOptions, IJsonHelper jsonHelper)
    {
        _config = configOptions.Value;
        _jsonHelper = jsonHelper;
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "script";
        var configJson = _jsonHelper.Serialize(_config);
        output.Content.SetHtmlContent($"window.appConfig = {configJson};");
    }
}

之后在任意视图中只需添加<app-config></app-config>，即可自动注入配置。

方案选择建议： #

• 配置静态不变：优先用方案1，无额外网络请求，简单高效。
• 配置需要动态更新/权限控制：选择方案2，可通过接口权限验证限制访问。

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