Использование JSON-файлов для конфигурации приложения Blazor Hybrid

Использование JSON-файлов для конфигурации приложения — это один из наиболее распространенных способов хранения настроек приложения Blazor.

Файл конфигурации appsettings.json

Если вы до изучения Blazor Hybrid работали с другими типами проектов Blazor или, в принципе, с проектами ASP.NET Core, то наверняка заметили, что в Blazor Hybrid отсутствует по умолчанию такой файл как appsettings.json, в котором обычно хранятся настройки приложения. Однако, никто не запрещает нам создать этот файл самостоятельно и использовать в приложении.

Итак, первое, что нам необходимо сделать — это создать новый проект и разместить в папке wwwroot файл appsettings.json

со следующим содержимым:

{
  "Message": "Привет, Blazor"
}

Если бы мы использовали наше приложение только в Windows, то на этом моменте мы бы закончили работу с json-файлом и перешли бы к работе с приложением. Но так как мы планируем использовать конфигурацию приложения и в Windows и в Android, то нам необходимо сделать этот файл встроенным ресурсом приложения. Для этого выберем файл в обозревателе решений и укажем для него действие при сборке:

Теперь наш файл будет встраиваться в сборку и нам необходимо будет только правильно его загрузить в приложении.

Работа с конфигурацией приложения в виде JSON

Для загрузки конфигурации из JSON у интерфейса IConfigurationBuilder имеется следующий метод расширения:

public static IConfigurationBuilder AddJsonStream(this IConfigurationBuilder builder, Stream stream)

Воспользуемся этим методом в нашем приложении. Изменим код MauiProgram.cs следующим образом:

using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

using System.Reflection;

namespace MauiApp3
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            using var appsettingsStream = Assembly
                .GetExecutingAssembly()
                .GetManifestResourceStream("MauiApp3.wwwroot.appsettings.json");


            if (appsettingsStream != null)
            {
                var config = new ConfigurationBuilder()
                    .AddJsonStream(appsettingsStream)
                    .Build();

                builder.Configuration.AddConfiguration(config);
            }

            builder.Services.AddMauiBlazorWebView();

#if DEBUG
    		builder.Services.AddBlazorWebViewDeveloperTools();
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

Первое, что мы делаем — это получаем наш ресурс (файл appsettings.json) в виде объекта Stream:

using var appsettingsStream = Assembly
    .GetExecutingAssembly()
    .GetManifestResourceStream("MauiApp3.wwwroot.appsettings.json");

Здесь стоит обратить внимание на имя загружаемого ресурса: MauiApp3.wwwroot.appsettings.json. MauiApp3 — это имя проекта, wwwroot — имя папки в которой расположен файл appsettings.json

Получив ы свое распоряжение Stream, мы создаем новую конфигурацию:

var config = new ConfigurationBuilder()
    .AddJsonStream(appsettingsStream)
    .Build();

здесь config — это объект, реализующий интерфейс IConfigurationRoot.  Полученный объект передается в качестве параметра для метода расширения AddConfiguration():

builder.Configuration.AddConfiguration(config);

Этот код можно сделать немного короче, просто воспользовавшись методом расширения AddJsonStream() непосредственно через свойство Configuration:

if (appsettingsStream != null)
{
    builder.Configuration.AddJsonStream(appsettingsStream);
}

Теперь воспользуемся конфигурацией так же, как мы это делали в предыдущей части:

@inject IConfiguration config

@page "/"

<h1>@message</h1>

Welcome to your new app.

@code{
    string message = "Hello, world!";

    protected override void OnInitialized()
    {
        message = config.GetValue<string>("Message");
    }
}

Теперь можно запустить приложение, например, в Android и убедиться, что конфигурация с использованием JSON-файлов работает:

Использование секций

Преимуществом использования JSON-файлов для конфигурации приложения является в первую очередь то, что мы можем удобно размещать настройки приложения в секциях (объектах JSON). Например, изменим наш файл следующим образом:

{
  "Greetings": {
    "MessageRu": "Привет, Blazor",
    "MessageEn": "Hello, Blazor"
  },
  "Counter": {
    "Value":  10
  }  
}

Здесь мы определили две секции: Greetings — для настроек строки приветствия в компоненте Home и Counter — для настройки компонента Counter. Воспользуемся этими настройками в нашем приложении. Изменим компонент Home:

@inject IConfiguration config

@page "/"

<h1>@messageRu</h1>
<h2>@messageEn</h2>

Welcome to your new app.

@code{
    string? messageEn = "Hello, world!";
    string? messageRu = "Привет, мир!";

    protected override void OnInitialized()
    {
        var section = config.GetSection("Greetings");
        messageRu = section.GetValue<string>("MessageRu");
        messageEn = section.GetValue<string>("MessageEn");
    }
}

и Counter:

@page "/counter"

@inject IConfiguration config

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    protected override void OnInitialized()
    {
        var section = config.GetSection("Counter");
        currentCount = section.GetValue<int>("Value");
    }
}

Теперь запустим приложение и посмотрим на результаты:

Итого

В Blazor Hybrid мы можем использовать конфигурацию приложения в виде JSON-файлов. При этом, JSON-файл должен определяться в приложении как встроенный ресурс. Конфигурация в виде JSON может содержать секции с настройками, что делает конфигурацию приложения более удобно в чтении и использование.