前言
最近想了解下Blazor，于是嘗試使用Blazor寫一個簡單的低代碼框架，于是就采用了Ant Design Blazor作為組件庫
低代碼框架在表現(xiàn)層的第一步則是動態(tài)表單，需要將設(shè)計時的結(jié)構(gòu)渲染成運行時的表單，本次主要實現(xiàn)動態(tài)表單，相關(guān)數(shù)據(jù)接口都以返回固定數(shù)據(jù)的形式實現(xiàn)
實現(xiàn)
1.項目準備
先通過命令創(chuàng)建一個Ant Design Blazor項目，并加入到空的解決方案當中：
dotnet new antdesign -o LowCode.Web -ho server
?
由于我們需要寫一些API接口，所以在Startup類中加入控制器相關(guān)的代碼：
?
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類并填入固定數(shù)據(jù)，并在Startup類中注冊：
?
public class MenuService
{
/// <summary>
/// 獲取左側(cè)導(dǎo)航數(shù)據(jù)
/// </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="動態(tài)表單",
Key="Form",
Icon="plus-square"
}
}
}
};
}
}
?
修改BaseicLayout.razor中@code部分，將_menuData改為從MenuService中獲?。?/span>
?
private MenuDataItem[] _menuData ;
[Inject] public MenuService MenuService { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
_menuData = MenuService.GetMenuData();
}
?
3.表單組件接口
創(chuàng)建一個簡單的表單與組件的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.動態(tài)表單頁面
在Pages文件夾下創(chuàng)建一個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>
運行效果
?
總結(jié)
在Blazor項目中要訪問API接口則需要注入HttpClient類，使用HttpClient請求API接口即可，也可以直接注入Services調(diào)用。
目前僅僅是驗證了動態(tài)表單的可能性，其他的組件渲染可以根據(jù)Ant Design Blazor官方文檔定義模型結(jié)構(gòu)實現(xiàn)
參考文檔：
Blazor官方文檔
Ant Design Blazor官方文檔文章來源：http://www.zghlxwxcb.cn/news/detail-498595.html
Ant Design Blazor倉庫文章來源地址http://www.zghlxwxcb.cn/news/detail-498595.html
到了這里，關(guān)于小試Blazor——實現(xiàn)Ant Design Blazor動態(tài)表單的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
