您的位置:首页>教育 >

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

2023-06-25 08:21:19    来源:博客园

前言

最近想了解下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    {        ///         /// 获取左侧导航数据        ///         ///         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();        }        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"
@foreach (var item in StandardFormModel.ArrayInput) { @if (item is Model.Component.Input) { } }

运行效果

总结

在Blazor项目中要访问API接口则需要注入HttpClient类,使用HttpClient请求API接口即可,也可以直接注入Services调用。

目前仅仅是验证了动态表单的可能性,其他的组件渲染可以根据Ant Design Blazor官方文档定义模型结构实现

参考文档:

Blazor官方文档

Ant Design Blazor官方文档

Ant Design Blazor仓库

关键词:

相关阅读