.NET 8 MVC项目中如何从appsettings.json读取配置到JavaScript

下面提供几种实用的实现方式，根据你的场景选择即可：

方法一：通过Razor视图注入配置生成全局JS变量 #

适合需要在页面加载时直接获取配置的场景：

1. 首先创建配置绑定类（可选，也可以直接读取配置键）

// 新建AppSettings.cs类
public class AppSettings
{
    public string RequestCountlimit { get; set; }
}

2. 在Program.cs中注册配置绑定

builder.Services.Configure<AppSettings>(builder.Configuration);

3. 在目标视图（比如_Layout.cshtml或具体业务视图）中注入配置并生成全局变量

@inject IOptions<AppSettings> AppSettings
<script>
    // 定义全局可访问的配置对象
    window.appConfigs = {
        requestCountLimit: '@AppSettings.Value.RequestCountlimit'
    };
</script>

4. 在任意JS文件或脚本块中直接使用

console.log(window.appConfigs.requestCountLimit); // 输出10

方法二：通过后端API接口获取配置 #

适合异步加载配置或需要动态更新配置的场景：

1. 创建配置API控制器

[ApiController]
[Route("api/config")]
public class ConfigController : ControllerBase
{
    private readonly IOptions<AppSettings> _appSettings;

    public ConfigController(IOptions<AppSettings> appSettings)
    {
        _appSettings = appSettings;
    }

    [HttpGet("get-request-limit")]
    public IActionResult GetRequestLimit()
    {
        return Ok(new { Limit = _appSettings.Value.RequestCountlimit });
    }
}

2. 在JavaScript中通过fetch请求获取

fetch('/api/config/get-request-limit')
    .then(res => res.json())
    .then(data => {
        const requestLimit = data.Limit;
        console.log(requestLimit); // 输出10
        // 这里可以处理配置的后续逻辑
    })
    .catch(err => console.error('获取配置失败:', err));

方法三：直接在Razor视图中读取配置键（简单场景快速实现） #

如果只是单个配置键，不需要绑定类，可以直接在视图中读取：

<script>
    const requestCountLimit = '@Configuration["RequestCountlimit"]';
    console.log(requestCountLimit); // 输出10
</script>

注：如果视图无法直接访问Configuration，在Program.cs中添加以下代码注入即可：

builder.Services.AddSingleton<IConfiguration>(builder.Configuration);

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