Oefening: toegang krijgen tot platformfuncties in Blazor Hybrid

In deze oefening voegt u de mogelijkheid toe om de takenlijst op te slaan en te laden in het bestandssysteem.

Knoppen voor laden en opslaan toevoegen

1. Laten we beginnen met het toevoegen van twee nieuwe <button>-elementen voor onze laad- en opslaan-knoppen onder de <h3> en boven onze lijst van taken in het Todo.razor-bestand.

   @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. Voeg twee methoden toe in het @code blok voor Save en Load functionaliteit:

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

Gegevens opslaan en laden op schijf

.NET bevat de System.IO naamruimte met de mogelijkheid om bestanden op schijf te laden en op te slaan. .NET MAUI wijst deze functionaliteit automatisch toe aan systeemeigen API's; U hoeft alleen maar op te geven waar u het bestand wilt opslaan. Elk platform heeft speciale locaties om gebruikersgegevens op te slaan. De bestandssysteemhelpers in .NET MAUI bieden toegang tot meerdere platformmappen, waaronder de cache- en app-gegevensmappen. Het kan ook bestanden laden die rechtstreeks in de app zijn gebundeld. Nu gaan we de Save methode implementeren met behulp van System.Text.Json, dat is ingebouwd in .NET.

1. Voeg de using-instructies voor Microsoft.Maui.Storage, System.Text.Jsonen System.IO boven aan het todo.razor-bestand toe.

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

2. Implementeer Save door de gegevens te serialiseren in een string, het pad voor het bestand te maken en de inhoud naar het bestand te schrijven:

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

   Houd er rekening mee dat we ook toegang hebben tot pop-ups van platformen. Hier wordt een waarschuwing weergegeven wanneer het bestand wordt opgeslagen.

3. Implementeer Load door de gegevens van de schijf te laden, deserialiseren van de gegevens en het laden van items in de takenlijst:

   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. Sla het bestand op. Start de app opnieuw als deze nog niet wordt uitgevoerd.

5. Voeg items toe, bewerk items en markeer items die zijn uitgevoerd om het onderdeel te testen. Selecteer de Save knop om items op de schijf op te slaan, sluit de app en start de app opnieuw of breng wijzigingen aan en selecteer Load deze om de opgeslagen gegevens te laden.