小試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項目中要訪問API接口則需要注入HttpClient類，使用HttpClient請求API接口即可，也可以直接注入Services調用。

目前僅僅是驗證了動態表單的可能性，其他的組件渲染可以根據Ant Design Blazor官方文檔定義模型結構實現

參考文檔：

Blazor官方文檔

Ant Design Blazor官方文檔

Ant Design Blazor倉庫

posted @ 2023-06-24 22:25 梳墨呀閱讀(1987) 評論(0) 收藏舉報

刷新頁面返回頂部

梳墨呀

小試Blazor——實現Ant Design Blazor動態表單

公告