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

这篇具有很好参考价值的文章主要介绍了小试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<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动态表单

 

总结

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

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

参考文档:

Blazor官方文档

Ant Design Blazor官方文档

Ant Design Blazor仓库文章来源地址https://www.toymoban.com/news/detail-498595.html

到了这里,关于小试Blazor——实现Ant Design Blazor动态表单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果         最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此

    2024年02月15日
    浏览(46)
  • ant design pro + umi4的动态菜单与动态路由

    困扰我好多天的自定义菜单及路由终于完成了,首先虽然看似为一个功能,但在umi4中是两项配置。 先说说我浪费了大量时间使用的处理方式:因为曾经的项目是umi3的,所以我就想原样搬过来,结果发现,布局页BasicLayout的子children不见了!     如果这个子路由能正常显示,

    2024年02月11日
    浏览(41)
  • ant design pro v5 - 03 动态菜单 动态路由(配置路由 动态登录路由 登录菜单)

    1 动态菜单         技术思路:配置路由,用户登录后根据用户信息获取后台菜单。 2 动态路由+动态菜单         技术思路: 使用umijs的运行时修改路由 patchRoutes({ routes })  UMIJS 参考文档 ,react umi 没有守护路由的功能 直接在 app.tsx  的 layout 下的 childrenRender 添加守护路

    2023年04月09日
    浏览(36)
  • Ant vue中表单验证(动态校验、部分校验)

    前提 :写了超级复杂的表单,其中涉及了很多表单验证的地方,现一一记录一下; ant-vue 版本1.7.8 vue 版本2.6.11 校验的原理大体相似,灵活应用!! 需求: 1根据 读写方式 去动态自动校验规则; 2.只是监听挂载路径,但因嵌套太多,表单监听的表单域不满足自动监听的条件

    2024年02月05日
    浏览(36)
  • vue3 组合式 ant.design组件Table嵌套表格,从后端获取数据并动态渲染

    在根据官方文档使用ant.design中的嵌套表格时,发现官方文档很多地方都不够详细。在过程中踩了不少坑,例如: 子表如何获取父表的数据? 如何获取子表的行索引? 如何让子表的数据源来自父表该行的数据? 总之,最后还是磕磕绊绊做完了功能,于是第一时间把代码整理

    2024年02月15日
    浏览(46)
  • SpringBoot + Ant Design Vue实现数据导出功能

    以xlsx格式导出所选表格中的内容 要求进行分级 设置表头颜色。 首先我们需要添加一个用于到导出的按钮上去,像这样的: 至于它放哪里,是什么样式可以根据自己的需求决定。 按钮有了,下来我们开始实现这个按钮的功能。 导出数据确定。 表格设置: 表头添加以下代码

    2024年02月10日
    浏览(48)
  • Ant Design Vue实现表格双击编辑、添加新行、文字提示

    早上刚上班,产品就朝我工位走了过来,一看大事不好,肯定又是来提需求的! 产品:做一个表格,要实现双击编辑的功能 我:做不了 产品:老板提的 我:好的,可以做 老板提的不能做也滴做😂 申明:项目基于Vue+Ant Design实现 想要实现双击编辑单元格,先开发一个简单的

    2024年02月11日
    浏览(48)
  • vue3 + Ant Design 实现双表头表格(横向表头+纵向表头)

     一、要实现的效果( 纵向固定表头的表格,横向表头数量动态化 ) 二、这是后台返回的数据格式(以企业为数组,每个企业里有个站点数组pointFactors)   三、代码实现步骤   (1)定义纵向固定表头 (2)动态生成横向表头( 从接口获取数据 )   (3)循环原始数据,生

    2024年02月04日
    浏览(50)
  • ant-design-vue中upload上传图片、视频实现预览功能

    有没有小伙伴在使用ant-design-vue的upload组件时,发现api文档在图片预览功能的介绍寥寥无几,而且也没提供视频预览的demo,在实际开发中碰到相应的需求直挠头~~~~,别急,下面来给大家分享一个我自己封装的upload组件,符合需求可以直接在项目中放到组件目录调用。 templat

    2024年02月12日
    浏览(45)
  • react ant-design实现导航菜单menu的路由设置/切换页面

    ant-design版本是5.1.1,路由版本是v6的 新版本的导航菜单路由设置与旧版的不太一样,刚开始的时候甚至不知道该怎么写 实现效果: 代码: 首先,给导航菜单的menu添加点击事件 修改item,通过设置点击事件获取点击后的key值(key值即路由跳转的页面) 打印出来看看 获取到的

    2024年02月12日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包