前言
最近想了解下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项目中要访问API接口则需要注入HttpClient类,使用HttpClient请求API接口即可,也可以直接注入Services调用。
目前仅仅是验证了动态表单的可能性,其他的组件渲染可以根据Ant Design Blazor官方文档定义模型结构实现
参考文档:
Blazor官方文档
Ant Design Blazor官方文档文章来源:https://www.toymoban.com/news/detail-498595.html
Ant Design Blazor仓库文章来源地址https://www.toymoban.com/news/detail-498595.html
到了这里,关于小试Blazor——实现Ant Design Blazor动态表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!