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

前言

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

低代码框架在表现层的第一步则是动态表单,需要将设计时的结构渲染成运行时的表单,本次主要实现动态表单,相关数据接口都以返回固定数据的形式实现

实现

1.项目准备

先通过命令创建一个Ant Design Blazor项目,并加入到空的解决方案当中:

1
dotnet new antdesign -o LowCode.Web -ho server

 

由于我们需要写一些API接口,所以在Startup类中加入控制器相关的代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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类中注册:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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中获取:

 

1
2
3
4
5
6
7
8
private MenuDataItem[] _menuData ;
[Inject] public MenuService MenuService { get; set; }
 
protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    _menuData = MenuService.GetMenuData();
}

 

3.表单组件接口

创建一个简单的表单与组件的Model:

录入控件Input:

1
2
3
4
5
public class Input
{
    public string Name { get; set; }
    public string Value { get; set; }
}

 

标准表单StandardFormModel:

1
2
3
4
5
6
7
8
public class StandardFormModel
{
    public StandardFormModel()
    {
        ArrayInput = new List<Input>();
    }
    public List<Input> ArrayInput { get; set; }
}

  

表单API接口FormController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public partial class StdForm
{
    public StandardFormModel StandardFormModel { get; set; }
 
    public Form<StandardFormModel> StdFormModel { get; set; }
 
    [Inject]
    public HttpClient HttpClient { get; set; }<br>    
    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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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官方文档

Ant Design Blazor仓库

posted @   梳墨呀  阅读(1706)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇
点击右上角即可分享
微信分享提示