Ćwiczenie — uzyskiwanie dostępu do funkcji platformy w rozwiązaniu Blazor Hybrid

W tym ćwiczeniu dodasz możliwość zapisywania i ładowania listy zadań do wykonania do systemu plików.

Dodawanie przycisków ładowania i zapisywania

1. Zacznijmy od dodania dwóch nowych elementów <button> dla naszych przycisków ładowania i zapisu pod <h3> i nad listą zadań w pliku 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. Dodaj dwie metody w @code bloku dla Save funkcji i :Load

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

Zapisywanie i ładowanie danych na dysku

Platforma .NET zawiera System.IO przestrzeń nazw, która obejmuje możliwość ładowania i zapisywania plików na dysku. Program .NET MAUI mapuje tę funkcję na natywne interfejsy API automatycznie; wystarczy określić miejsce zapisania pliku. Każda platforma ma specjalne lokalizacje do zapisywania danych użytkownika. Pomocnicy systemu plików w programie .NET MAUI zapewniają dostęp do wielu katalogów platformy, w tym katalogów danych pamięci podręcznej i aplikacji. Może również ładować pliki, które są powiązane bezpośrednio z aplikacją. Teraz zaimplementujmy metodę Save przy użyciu System.Text.Jsonmetody , która jest wbudowana w platformę .NET.

1. Dodaj dyrektywy using dla Microsoft.Maui.Storage, System.Text.Json i System.IO na początku pliku Todo.razor.

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

2. Zaimplementuj Save , serializując dane w stringpliku , tworząc ścieżkę dla pliku i zapisując zawartość w pliku:

   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");
   }
   

   Należy pamiętać, że możemy również uzyskać dostęp do wyskakujących okienek platformy. W tym miejscu wyświetlamy alert po zapisaniu pliku.

3. Zaimplementuj Load , ładując dane z dysku, deserializacji danych i ładując elementy do listy zadań do wykonania:

   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. Zapisz plik. Uruchom ponownie aplikację, jeśli nie jest jeszcze uruchomiona.

5. Dodaj elementy, edytuj elementy i oznacz elementy gotowe do przetestowania składnika. Save Wybierz przycisk , aby zapisać elementy na dysku, a następnie zamknij i uruchom ponownie aplikację lub wprowadź zmiany i wybierz, Load aby załadować zapisane dane.