如何访问 blazor webassembly 中的应用程序设置

Question

我正在尝试将 api url 保存在 appsettings 中。但是，configuration.Propertiers 似乎是空的。我不确定如何获得设置。在 program.cs 中：

public static async Task Main(string[] args)
{
   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   //string url = builder.Configuration.Properties["APIURL"].ToString();
   foreach (var prop in builder.Configuration.Properties)
      Console.WriteLine($"{prop.Key} : {prop.Value}" );
   //builder.Services.AddSingleton<Service>(new Service(url));
   builder.RootComponents.Add<App>("app");
   await builder.Build().RunAsync();
}

Answer 1

使用 ASP.NET Core 6.0 Blazor 配置。默认情况下，Blazor WebAssembly 从以下应用程序设置文件加载配置：

• wwwroot/appsettings.json。
• wwwroot/appsettings.{ENVIRONMENT}.json，其中 {ENVIRONMENT} 占位符是应用程序的运行时环境。

例子：

wwwroot/appsettings.json

{
  "h1FontSize": "50px"
}

页面/ConfigurationExample.razor

@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

警告 Blazor WebAssembly 应用中的配置和设置文件对用户可见。请勿在 Blazor WebAssembly 应用的配置或文件中存储应用机密、凭据或任何其他敏感数据。

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/configuration?view=aspnetcore-6.0

您还可以将值绑定到类。

public class ClientAppSettings
{
    public string h1FontSize{ get; set; }
}

然后将此类作为 Singleton 添加到 Program.cs 中：

var settings = new ClientAppSettings();
builder.Configuration.Bind(settings);
builder.Services.AddSingleton(settings);

添加命名空间_Imports.razor，然后在需要的地方注入，以在 Visual Studio 中使用自动完成功能获取设置：

@inject ClientAppSettings ClientAppSettings

Answer 2

当 blazor 还不支持 wwwroot 文件夹中的 appsettings.json 时，此答案涉及 blazor 预览。您现在应该在 wwroot 文件夹中使用 appsettings.json 和WebAssemblyHostBuilder.Configuration. 它还支持每个环境文件 (appsettings.{env}.Json)。

我通过在应用程序wwwroot文件夹中使用settings.json文件存储并注册一个任务来获取设置来解决这个问题：

设置.cs

public class Settings
{
    public string ApiUrl { get; set; }
}

wwwroot/settings.json

{
   "ApiUrl": "https://localhost:51443/api"
}

程序文件

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);

    builder.Services.AddSingleton(async p =>
    {
        var httpClient = p.GetRequiredService<HttpClient>();
        return await httpClient.GetJsonAsync<Settings>("settings.json")
            .ConfigureAwait(false);
    });

SampleComponent.razor

@inject Task<Settings> getsettingsTask
@inject HttpClient client
...
@code {
    private async Task CallApi()
    {
        var settings = await getsettingsTask();
        var response = await client.GetJsonAsync<SomeResult>(settings.ApiUrl);
    }
}

这有以下优点：

• 不共享服务器的appsettings.json文件，这可能是一个安全漏洞
• 可按环境配置

Answer 3

Inkkiller 成功了。您可以在没有 APIHelper 类的情况下简化对 IConfiguration 的调用，并直接在 Program.cs 中从 WebAssemblyHostBuilder 访问它。

应用程序设置：

{
   "ServerlessBaseURI": "http://localhost:0000/",
}

程序.cs：

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);

    string serverlessBaseURI = builder.Configuration["ServerlessBaseURI"];
}

Answer 4

您也可以（wwwroot 中的 appsettings.json）：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        var url = builder.Configuration.GetValue<string>("ApiConfig:Url");
        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(url) });
    }
}

Answer 5

截至目前，您可以使用IConfiguration.

应用程序设置.json：

{
  "Services": {
    "apiURL": "https://localhost:11111/"
  }
}

。

using Microsoft.Extensions.Configuration;

public class APIHelper
    {
        private string apiURL;

        public APIHelper(IConfiguration config)
        {
            apiURL = config.GetSection("Services")["apiURL"];
            //Other Stuff
        }

    }

Answer 6

Blazor WASMappsettings.json

appsettings.json如果文件夹中没有，wwwroot那么只需：

1. 右键单击wwwroot文件夹。
2. 单击添加==>新项目==>应用程序设置文件

这将添加appsettings.json到您的应用程序中。打开appsettings.json文件，您将看到其中已经有一个用于数据库的部分，添加一个像我添加的部分apiinfo：

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=_CHANGE_ME;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

  "apiinfo":{
    "apiurl": "your api url"
  }

}

现在，当您想调用此部分时，只需注入配置并像这样调用它：

@inject Microsoft.Extensions.Configuration.IConfiguration config;

并致电apiurl：

config.GetSection("apiinfo")["apiurl"].ToString()