bh002- Blazor hybrid / Maui 保存设置快速教程

1. 建立工程 bh002_ORM

源码

2. 添加 nuget 包

<PackageReference Include="BootstrapBlazor.WebAPI" Version="7.*" />
<PackageReference Include="FreeSql" Version="*" />
<PackageReference Include="FreeSql.Provider.SqliteCore" Version="*" />
<PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" Version="2.*" />

3. 添加命名空间引用

_Imports.razor

@using BootstrapBlazor.Components

4. 添加服务

MauiProgram.cs

在 return builder.Build(); 之前加入这句

builder.Services.AddScoped<IStorage, StorageService>();

5. 添加代码后置文件 Pages/Index.razor.cs

Index.razor.cs

using BootstrapBlazor.WebAPI.Services;
using Microsoft.AspNetCore.Components;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;namespace bh002_ORM.Pages;public partial class Index
{[Inject, NotNull] protected IStorage Storage { get; set; }[DisplayName("用户名")][Required(ErrorMessage = "请输入用户名")]public string Username { get; set; }IFreeSql Fsql { get; set; }protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){Username = await Storage.GetValue("username","");if (!string.IsNullOrEmpty(Username)){StateHasChanged();}}}async Task Login(){await Storage.SetValue("username", Username);} 
}

6. 添加 UI

Index.razor

@page "/"
<h1>Hello, @Username</h1>
用户名:
<InputText @bind-Value="Username" />
<button @onclick="Login">登录</button>

7. 执行效果

8. 添加清除按钮

Index.razor

<button @onclick="Reset">清除</button>

Index.razor.cs

    async Task Reset(){await Storage.RemoveValue("username");Username = "";}

9. 相关资料

如何远程调试 MAUI blazor / Blazor Hybrid
https://www.cnblogs.com/densen2014/p/16988516.html

下篇 bh002- Blazor hybrid / Maui 使用ORM和数据库快速教程