小试Blazor——实现Ant Design Blazor动态表单_今日关注
前言
最近想了解下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 FormStdFormModel { 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"
运行效果
总结
在Blazor项目中要访问API接口则需要注入HttpClient类,使用HttpClient请求API接口即可,也可以直接注入Services调用。
目前仅仅是验证了动态表单的可能性,其他的组件渲染可以根据Ant Design Blazor官方文档定义模型结构实现
参考文档:
Blazor官方文档
Ant Design Blazor官方文档
Ant Design Blazor仓库
关键词:
相关阅读
-
小试Blazor——实现Ant Design Blazor...
前言最近想了解下Blazor,于是尝试使用Blazor写一个简单的低代码框架, -
大学奖学金申请理由(奖学金申请理由300...
1、本人在校期间遵纪守法,遵守学校规章制度,表现良好。2、在学习方面 -
放弃遗产继承能否代理,放弃遗产继承需...
放弃遗产继承是可以代理的。但是代理人在从事放弃遗产继承时需要出具授 -
全球即时:网页如何申请版权 天天快播
1、材料要求:申请作品著作权登记应当提交的材料及要求:(1)按要求填写 -
剑桥美女学霸:嫁豪门8年,怀孕后却遭抛...
2008年,香港一起豪门离婚案引起轰动:男主角是恒丰太子李建勤,其豪横 -
免费、打折!一大批景区暑期限时优惠!...
刚结束今年中、高考的同学们请注意,携带准考证,可以在杭州及其他多个 -
分享资本周期分析的八大信条!
爱德华钱塞勒将马拉松资本对“资本周期”分析的精华简化成以下八大... -
天天快报!固定收益周报:利差全面走阔
固定收益周报:利差全面走阔 -
200家淄博企业 数千种特色产品 淄博好...
6月22日,淄博好品展销会(端午专场)在淄博国际会客厅盛大开幕,淄博 -
纸剪蝴蝶结怎么剪?|环球快报
要剪一个漂亮的纸剪蝴蝶结,我们需要准备一张宽度较宽、长度适中的纸张 -
怎样能系好看的蝴蝶结,是鞋子的?
您好,以下是一些步骤,教你如何系好看的蝴蝶结:1 将鞋带交叉,再将右 -
如何编蝴蝶结?
1 准备8根30厘米的玉线,或者自己喜欢的彩线。2 两根绳子,中间固定好 -
环球资讯:队记:湖人与落选后卫达米恩-...
据湖人随队记者DanWoike报道,消息人士透露,湖人与落选后卫达米恩-鲍 -
高质量发展调研行丨每秒卖出2173元——...
端午假期,海口国际免税城内,伴随着悠扬的音乐,阳光倾泻“天际秘... -
全球今日报丨6.24大盘早评分析
6 24大盘早评:没有惊喜,美股再度下跌,周一低开无疑!老铁们,早安! -
关注:这个新增市场,或达百亿美元!
6月21日下午,在CDN龙头网宿科技的临时股东大会上,公司董事长刘成彦坦 -
中国媒体行业:AI应用催化不断 把握游...
中国媒体行业:AI应用催化不断把握游戏主线关注C端应用逻辑兑现 -
全球聚焦:各地纪检监察机关严查快处纠...
各地纪检监察机关严查快处纠治节日“四风” -
【世界热闻】天通股份(600330):材料与...
天通股份(600330):材料与设备共举研发不辍 -
厦门今明多发局部性雷阵雨 中考生要注...
昨天是端午假期最后一天,也是厦门中考第一天,我市维持闷热潮湿天气,