Упражнение. Доступ к функциям платформы в Blazor Hybrid

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

Добавление кнопок загрузки и сохранения

1. Начнем с добавления двух новых <button> элементов для загрузки и сохранения кнопки в <h3> списке элементов todo в файле Todo.razor .

   @page "/todo"
   @using BlazorHybridApp.Data
   
   <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
   
   <button @onclick="Save">Save</button>
   <button @onclick="Load">Load</button>
   
   <ul class="list-unstyled">
       @foreach (var todo in todos)
       {
           <li>
               <input type="checkbox" @bind="todo.IsDone" />
               <input @bind="todo.Title" />
           </li>
       }
   </ul>
   

2. Добавьте два метода в блок @code для функций Save и Load:

   private async Task Save()
   {
   }
   
   private void Load()
   {
   }
   

Сохранение и загрузка данных на диск

.NET содержит пространство имен System.IO, которое включает возможность загрузки и сохранения файлов на диск. .NET MAUI сопоставляет эту функцию с собственными API автоматически. Все, что нужно сделать, — указать место сохранения файла. Каждая платформа имеет специальные расположения для сохранения пользовательских данных. Вспомогательные службы файловой системы в .NET MAUI предоставляют доступ для получения нескольких каталогов платформы, включая каталоги данных кэша и приложений. Они также могут загружать файлы, которые связаны непосредственно с приложением. Теперь давайте реализуем метод Save с помощью System.Text.Json, встроенного в .NET.

1. Добавьте директивы using для Microsoft.Maui.Storage, System.Text.Jsonа затем System.IO в начало файла Todo.razor .

   @page "/todo"
   @using BlazorHybridApp.Data
   @using Microsoft.Maui.Storage
   @using System.IO
   @using System.Text.Json
   

2. Реализуйте путем Save сериализации данных в stringфайл, создания пути к файлу и записи содержимого в файл:

   private async Task Save()
   {
       var contents = JsonSerializer.Serialize(todos);
       var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
       File.WriteAllText(path, contents);
       await App.Current.MainPage.DisplayAlert("List Saved", $"List has been saved to {path}", "OK");
   }
   

   Обратите внимание, что мы также можем получить доступ к всплывающим окнам платформы. Здесь мы отображаем оповещение при сохранении файла.

3. Реализуйте путем Load загрузки данных с диска, десериализации данных и загрузки элементов в список дел:

   private void Load()
   {
       var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
       if (!File.Exists(path))
           return;
       var contents = File.ReadAllText(path);
       var savedItems = JsonSerializer.Deserialize<List<TodoItem>>(contents);
       todos.Clear();
       todos.AddRange(savedItems);
   }
   

4. Сохраните файл. Перезапустите приложение, если оно еще не запущено.

5. Добавление элементов, изменение элементов и пометка элементов, выполненных для тестирования компонента. Save Нажмите кнопку, чтобы сохранить элементы на диске, а затем закройте и перезапустите приложение или внесите изменения и выберитеLoad, чтобы загрузить сохраненные данные.