練習：存取 Blazor Hybrid 中的平台功能

5 分鐘

在此練習中，您會新增將待辦事項清單儲存並載入檔案系統的功能。

新增載入和儲存按鈕

首先，在 <h3> 下和 Todo.razor 檔案中的代辦事項清單上，為載入和儲存按鈕新增兩個新的 <button> 元素。

@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>

為 Save 和 Load 功能在 @code 區塊中新增兩個方法：
```
private async Task Save()
{
}

private void Load()
{
}
```

儲存並載入資料至磁碟

.NET 包含 System.IO 命名空間，其中包含將檔案載入和儲存至磁碟的能力。 .NET MAUI 會自動將此功能對應至原生 API；您只需要指定儲存檔案的位置。每個平台都有特殊位置可儲存使用者資料。 .NET MAUI 中的檔案系統協助程式可讓您存取多個平台目錄，包括快取和應用程式資料目錄。它也可以載入直接與應用程式搭配的檔案。現在，讓我們使用內建於 .NET 的 System.Text.Json 來實作 Save 方法。

將適用于 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
```

將資料序列化為 string，實作 Save 並建立檔案的路徑，將內容寫入檔案。

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

請注意，我們也可以存取平臺快顯視窗。在這裡，我們會在儲存檔案時顯示警示。

從磁碟載入資料、還原序列化資料，並將項目載入待辦事項清單，實作 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);
}

儲存檔案。如果應用程式尚未執行，請重新啟動應用程式。
新增項目、編輯項目，以及標記完成的項目以測試元件。選取 Save 按鈕將項目儲存至磁碟，然後關閉並重新啟動應用程式，或進行變更，並選取 Load 以載入儲存的資料。

練習：存取 Blazor Hybrid 中的平台功能

新增載入和儲存按鈕

儲存並載入資料至磁碟

意見反應