qidao123.com技术社区-IT企服评测·应用市场

标题: 小试Blazor——实现Ant Design Blazor动态表单 [打印本页]

---

作者: 兜兜零元    时间: 2023-6-24 22:32
标题: 小试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.         public void ConfigureServices(IServiceCollection services)
2.         {
3.             services.AddRazorPages();
4.             services.AddControllers();//添加控制器
5.             services.AddEndpointsApiExplorer();
7.             services.AddServerSideBlazor();
8.             services.AddAntDesign();
9.             services.AddScoped(sp => new HttpClient
10.             {
11.                 BaseAddress = new Uri(sp.GetService<NavigationManager>().BaseUri)
12.             });
13.             services.Configure<ProSettings>(Configuration.GetSection("ProSettings"));
14.         }
16.         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
17.         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
18.         {
19.             if (env.IsDevelopment())
20.             {
21.                 app.UseDeveloperExceptionPage();
22.             }
23.             else
24.             {
25.                 app.UseExceptionHandler("/Error");
26.                 // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
27.                 app.UseHsts();
28.             }
30.             app.UseHttpsRedirection();
31.             app.UseStaticFiles();
32.             
33.             app.UseRouting();
34.             
35.             app.UseEndpoints(endpoints =>
36.             {
37.                 endpoints.MapBlazorHub();
38.                 endpoints.MapFallbackToPage("/_Host");
39.                 endpoints.MapControllers();//配置控制器
40.             });
41.         }

复制代码

 
　　
2.菜单接口
在项目中新增Services文件夹，添加MenuServices类并填入固定数据，并在Startup类中注册：
 

1.     public class MenuService
2.     {
3.         /// <summary>
4.         /// 获取左侧导航数据
5.         /// </summary>
6.         /// <returns></returns>
7.         public virtual MenuDataItem[] GetMenuData()
8.         {
9.             return new MenuDataItem[]
10.             {
11.                 new MenuDataItem
12.                 {
13.                     Path="/",
14.                     Name="测试模块",
15.                     Key="Test",
16.                     Icon="smile",
17.                     Children=new MenuDataItem[]
18.                     {
19.                         new MenuDataItem
20.                         {
21.                             Path="/StdForm",
22.                             Name="动态表单",
23.                             Key="Form",
24.                             Icon="plus-square"
25.                         }
26.                     }
27.                 }
28.             };
29.         }
30.     }

复制代码

 
修改BaseicLayout.razor中@code部分，将_menuData改为从MenuService中获取：
 

1.     private MenuDataItem[] _menuData ;
2.     [Inject] public MenuService MenuService { get; set; }
4.     protected override async Task OnInitializedAsync()
5.     {
6.         await base.OnInitializedAsync();
7.         _menuData = MenuService.GetMenuData();
8.     }

复制代码

 
3.表单组件接口
创建一个简单的表单与组件的Model：
录入控件Input：

1.     public class Input
2.     {
3.         public string Name { get; set; }
4.         public string Value { get; set; }
5.     }

复制代码

 
标准表单StandardFormModel:

1.     public class StandardFormModel
2.     {
3.         public StandardFormModel()
4.         {
5.             ArrayInput = new List<Input>();
6.         }
7.         public List<Input> ArrayInput { get; set; }
8.     }

复制代码

　　
表单API接口FormController：

1.     [Route("api/[controller]/[action]")]
2.     [ApiController]
3.     public class FormController : ControllerBase
4.     {
6.         [HttpGet]
7.         public StandardFormModel GetFormStruc()
8.         {
9.             var result = new StandardFormModel();
10.             result.ArrayInput.AddRange(new List<Input>(){
11.                 new Input()
12.                 {
13.                     Name="账号"
14.                 },
15.                 new Input()
16.                 {
17.                     Name="密码"
18.                 }
19.             });
20.             return result;
21.         }
22.     }

复制代码

　　
4.动态表单页面
在Pages文件夹下创建一个StdForm.razor和StdForm.razor.cs文件
StdForm.razor.cs(注意partial):

1.     public partial class StdForm
2.     {
3.         public StandardFormModel StandardFormModel { get; set; }
5.         public Form<StandardFormModel> StdFormModel { get; set; }
7.         [Inject]
8.         public HttpClient HttpClient { get; set; }<br>　　　　
9.         public void Init()
10.         {
11.             var formStruc = HttpClient.GetFromJsonAsync<StandardFormModel>("api/Form/GetFormStruc").Result;
12.             StandardFormModel= formStruc;
13.         }
15.         protected override async Task OnInitializedAsync()
16.         {
17.             Init();
18.             await base.OnInitializedAsync();
19.             
20.         }
21.     }

复制代码

　　
StdForm.razor:

1. @page "/StdForm"
2. <Form @ref="StdFormModel"
3.       Model="StandardFormModel"
4.     LabelColSpan="1"
5.     WrapperColSpan="6">
7.     @foreach (var item in StandardFormModel.ArrayInput)
8.     {
9.         <FormItem Label="@item.Name">
11.             @if (item is Model.Component.Input)
12.             {
13.                 <Input @bind-Value="@item.Value"/>
14.             }
16.         </FormItem>
17.     }
19. </Form>

复制代码

　　
运行效果

 
总结
在Blazor项目中要访问API接口则需要注入HttpClient类，使用HttpClient请求API接口即可，也可以直接注入Services调用。
目前仅仅是验证了动态表单的可能性，其他的组件渲染可以根据Ant Design Blazor官方文档定义模型结构实现
参考文档：
Blazor官方文档
Ant Design Blazor官方文档
Ant Design Blazor仓库

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4