前言
最近想了解下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().BaseUri) }); services.Configure(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 { /// /// 获取左侧导航数据 /// /// 修改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(); } public List 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(){ 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 StdFormModel { get; set; } [Inject] public HttpClient HttpClient { get; set; } public void Init() { var formStruc = HttpClient.GetFromJsonAsync("api/Form/GetFormStruc").Result; StandardFormModel= formStruc; } protected override async Task OnInitializedAsync() { Init(); await base.OnInitializedAsync(); } } StdForm.razor:
@page "/StdForm"
运行效果
总结
在Blazor项目中要访问API接口则需要注入HttpClient类，使用HttpClient请求API接口即可，也可以直接注入Services调用。
目前仅仅是验证了动态表单的可能性，其他的组件渲染可以根据Ant Design Blazor官方文档定义模型结构实现
参考文档：
Blazor官方文档
Ant Design Blazor官方文档
Ant Design Blazor仓库
标签：
