Работа со статическими файлами в Blazor Hybrid

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

Необработанные ресурсы

Ресурсы проекта Blazor Hybrid размещаются в папке Resources, которая, в свою очередь, содержит дочерние папки, каждая из которых используется для хранения ресурсов определенного вида — шрифты, иконки приложения и так далее. При этом, в папке Resources/Raw мы можем хранить так называемые необработанные ресурсы для нашего приложения. В качестве примера, в этой папке по умолчанию располагается текстовый файл AboutAssets.txt, в котором дается краткая справка по работе с ресурсами из папки Resources/Raw. Попробуем воспользоваться этой инструкцией в нашем приложении.

Создадим новое приложение Blazor Hybrid и изменим код компонента Home следующим образом:

@page "/"

<p>@content</p>

@code{
    string content = "";

    protected override async Task OnInitializedAsync()
    {
        await LoadMauiAsset();
    }


    async Task LoadMauiAsset()
    {
        using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
        using var reader = new StreamReader(stream);

        content = reader.ReadToEnd();
    }
}

После запуска приложения вы увидите на экране содержимое файла:

Разберемся с этим примером подробно. Здесь мы используем для получения потока (Stream) метод класса FileSystem.OpenAppPackageFileAsync(). Класс FileSystem — это класс из пространства имен Microsoft.Maui.Storage, который предоставляет нам доступ к папкам приложения и содержит следующие свойства:

а также два метода:

Таким образом, используя OpenAppPackageFileAsync() мы можем получать доступ к различны файлам, расположенным в пакете приложения.

Все ресурсы расположенные в папке Resources/Raw копируются непосредственно в выходной каталог (пакет) приложения. Например, создайте новый файл с именем AboutAssets2.txt и перенесите его на папку Resources/Raw в Visual Studio. В свойствах этого файла вы увидите:

теперь соберите приложение и убедитесь, что файл расположен в корне папки приложения в Windows:

Доступ к файлам из папки wwwroot

Для проекта Blazor Hybrid папка Resources/Raw не единственная в которой могут храниться статические файлы. Так, например, компоненты Razor при работе со статическими файлами используют специальную папку wwwroot проекта:

Используя всё тот же класс FileSystem мы можем получать доступ к статическим файлам из папки wwwroot и всех её подкаталогов. Например, изменим код компонента Home следующим образом:

@page "/"

<button @onclick="LoadIndex">app.css</button>
<p>@content</p>

@code{
    string content = "";

    async void LoadIndex()
    {
        content = await LoadFromWwwRoot("wwwroot/css/app.css");
    }


    async Task<string> LoadFromWwwRoot(string filename)
    {
        using var stream = await FileSystem.OpenAppPackageFileAsync(filename);
        using var reader = new StreamReader(stream);

        return reader.ReadToEnd();
    }
}

Здесь мы, используя метод OpenAppPackageFileAsync(), получаем доступ к файлу app.css. После запуска приложения, кликните по кнопке «app.css» и вы увидите, содержимое этого файла:

Итого

В проекте Blazor Hybrid статические файлы могут располагаться как в папке wwwroot (как и во всех проектах Blazor), так и в папке Resources/Raw (необработанные ресурсы). Чтобы получить доступ к содержимому этих файлов мы можем использовать метод класса FileSystem.