Esercizio - Accedere alle funzionalità della piattaforma in Blazor Hybrid

Completato

In questo esercizio si aggiunge la possibilità di salvare e caricare l'elenco todo nel file system.

Aggiungere i pulsanti di caricamento e salvataggio

1. Per iniziare, aggiungere due nuovi elementi <button> per i pulsanti di caricamento e salvataggio dopo <h3> e prima dell'elenco di elementi todo nel file 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. Aggiungere due metodi nel blocco @code per le funzionalità Save e Load:

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

Salvare e caricare i dati su disco

.NET include lo spazio dei nomi System.IO che consente di caricare e salvare file su disco. .NET MAUI esegue automaticamente il mapping di questa funzionalità alle API native. È sufficiente specificare dove salvare il file. Ogni piattaforma prevede un percorso speciale per il salvataggio dei dati utente. Gli helper del file system in .NET MAUI forniscono l'accesso a più directory della piattaforma, tra cui quella della cache e quella dei dati dell'app. Consentono anche di caricare i file aggregati direttamente nell'app. A questo punto, verrà implementato il metodo Save usando System.Text.Json, che è integrato in .NET.

1. Aggiungere le direttive using per Microsoft.Maui.Storage, System.Text.Json e System.IO all'inizio del file Todo.razor.

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

2. Implementare Save serializzando i dati in un oggetto string, creando il percorso del file e scrivendo il contenuto nel file:

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

   Si noti che è anche possibile accedere agli elementi popup della piattaforma. In questo caso viene visualizzato un avviso quando il file viene salvato.

3. Implementare Load caricando i dati dal disco, deserializzando i dati e caricando gli elementi nell'elenco attività:

   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. Salva il file. Riavviare l'app se non è già in esecuzione.

5. Per testare il componente, aggiungere, modificare e contrassegnare gli elementi completati. Selezionare il pulsante Save per salvare gli elementi nel disco e quindi chiudere e riavviare l'app o apportare modifiche e selezionare Load per caricare i dati salvati.

   

Continua