大家好，我是沙漠盡頭的狼。 網站使用Blazor重構上線一天了，用Blazor開發是真便捷，空閑時間查查gpt和github，又上線一個 [正則表達式線上驗證工具](https://dotnet9.com/tools/regextester) 和幾個線上小游戲，比如 [井字棋游戲](https:// ...
前言
最近想瞭解下Blazor，於是嘗試使用Blazor寫一個簡單的低代碼框架，於是就採用了Ant Design Blazor作為組件庫
低代碼框架在表現層的第一步則是動態表單，需要將設計時的結構渲染成運行時的表單，本次主要實現動態表單，相關數據介面都以返回固定數據的形式實現
實現
1.項目準備
先通過命令創建一個Ant Design Blazor項目，並加入到空的解決方案當中：
dotnet new antdesign -o LowCode.Web -ho server
由於我們需要寫一些API介面，所以在Startup類中加入控制器相關的代碼：
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddControllers();//添加控制器
services.AddEndpointsApiExplorer();
services.AddServerSideBlazor();
services.AddAntDesign();
services.AddScoped(sp => new HttpClient
{
BaseAddress = new Uri(sp.GetService<NavigationManager>().BaseUri)
});
services.Configure<ProSettings>(Configuration.GetSection("ProSettings"));
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapControllers();//配置控制器
});
}
2.菜單介面
在項目中新增Services文件夾，添加MenuServices類並填入固定數據，併在Startup類中註冊：
public class MenuService
{
/// <summary>
/// 獲取左側導航數據
/// </summary>
/// <returns></returns>
public virtual MenuDataItem[] GetMenuData()
{
return new MenuDataItem[]
{
new MenuDataItem
{
Path="/",
Name="測試模塊",
Key="Test",
Icon="smile",
Children=new MenuDataItem[]
{
new MenuDataItem
{
Path="/StdForm",
Name="動態表單",
Key="Form",
Icon="plus-square"
}
}
}
};
}
}
修改BaseicLayout.razor中@code部分，將_menuData改為從MenuService中獲取：
private MenuDataItem[] _menuData ;
[Inject] public MenuService MenuService { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
_menuData = MenuService.GetMenuData();
}
3.表單組件介面
創建一個簡單的表單與組件的Model：
錄入控制項Input：
public class Input
{
public string Name { get; set; }
public string Value { get; set; }
}
標準表單StandardFormModel:
public class StandardFormModel
{
public StandardFormModel()
{
ArrayInput = new List<Input>();
}
public List<Input> ArrayInput { get; set; }
}
表單API介面FormController：
[Route("api/[controller]/[action]")]
[ApiController]
public class FormController : ControllerBase
{
[HttpGet]
public StandardFormModel GetFormStruc()
{
var result = new StandardFormModel();
result.ArrayInput.AddRange(new List<Input>(){
new Input()
{
Name="賬號"
},
new Input()
{
Name="密碼"
}
});
return result;
}
}
4.動態表單頁面
在Pages文件夾下創建一個StdForm.razor和StdForm.razor.cs文件
StdForm.razor.cs(註意partial):
public partial class StdForm
{
public StandardFormModel StandardFormModel { get; set; }
public Form<StandardFormModel> StdFormModel { get; set; }
[Inject]
public HttpClient HttpClient { get; set; }
public void Init()
{
var formStruc = HttpClient.GetFromJsonAsync<StandardFormModel>("api/Form/GetFormStruc").Result;
StandardFormModel= formStruc;
}
protected override async Task OnInitializedAsync()
{
Init();
await base.OnInitializedAsync();
}
}
StdForm.razor:
@page "/StdForm"
<Form @ref="StdFormModel"
Model="StandardFormModel"
LabelColSpan="1"
WrapperColSpan="6">
@foreach (var item in StandardFormModel.ArrayInput)
{
<FormItem Label="@item.Name">
@if (item is Model.Component.Input)
{
<Input @bind-Value="@item.Value"/>
}
</FormItem>
}
</Form>
運行效果
總結
在Blazor項目中要訪問API介面則需要註入HttpClient類，使用HttpClient請求API介面即可，也可以直接註入Services調用。
目前僅僅是驗證了動態表單的可能性，其他的組件渲染可以根據Ant Design Blazor官方文檔定義模型結構實現
參考文檔：
