小试Blazor——实现Ant Design Blazor动态表单
前言
最近想了解下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官方文档定义模型结构实现
参考文档：
