小试Blazor——实现Ant Design Blazor动态表单

小试Blazor——实现Ant Design Blazor动态表单已关闭评论
147 次浏览

A+

所属分类：.NET技术

摘要

前言最近想了解下Blazor，于是尝试使用Blazor写一个简单的低代码框架，于是就采用了Ant Design Blazor作为组件库

便宜好用的国外VPS推荐

前言

最近想了解下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——实现Ant Design Blazor动态表单