小试Blazor——实现Ant Design Blazor动态表单
1.小试Blazor——实现Ant Design Blazor动态表单
前言
最近想了解下Blazor,于是尝试使用Blazor写一个简单的低代码框架,于是就采用了Ant Design Blazor作为组件库
低代码框架在表现层的第一步则是动态表单,需要将设计时的结构渲染成运行时的表单,本次主要实现动态表单,相关数据接口都以返回固定数据的形式实现
实现
1.项目准备
先通过命令创建一个Ant Design Blazor项目,并加入到空的解决方案当中:
1 | dotnet new antdesign -o LowCode.Web -ho server |
由于我们需要写一些API接口,所以在Startup类中加入控制器相关的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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类中注册:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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中获取:
1 2 3 4 5 6 7 8 | private MenuDataItem[] _menuData ; [Inject] public MenuService MenuService { get ; set ; } protected override async Task OnInitializedAsync() { await base .OnInitializedAsync(); _menuData = MenuService.GetMenuData(); } |
3.表单组件接口
创建一个简单的表单与组件的Model:
录入控件Input:
1 2 3 4 5 | public class Input { public string Name { get ; set ; } public string Value { get ; set ; } } |
标准表单StandardFormModel:
1 2 3 4 5 6 7 8 | public class StandardFormModel { public StandardFormModel() { ArrayInput = new List<Input>(); } public List<Input> ArrayInput { get ; set ; } } |
表单API接口FormController:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | [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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | public partial class StdForm { public StandardFormModel StandardFormModel { get ; set ; } public Form<StandardFormModel> StdFormModel { get ; set ; } [Inject] public HttpClient HttpClient { get ; set ; }<br> 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @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官方文档定义模型结构实现
参考文档:
分类:
Asp.Net Core
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇