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和数据库快速教程
