前言

最近想了解下Blazor，于是嘗試使用Blazor寫一個(gè)簡單的低代碼框架，于是就采用了Ant Design Blazor作為組件庫

低代碼框架在表現(xiàn)層的第一步則是動(dòng)態(tài)表單，需要將設(shè)計(jì)時(shí)的結(jié)構(gòu)渲染成運(yùn)行時(shí)的表單，本次主要實(shí)現(xiàn)動(dòng)態(tài)表單，相關(guān)數(shù)據(jù)接口都以返回固定數(shù)據(jù)的形式實(shí)現(xiàn)

(資料圖)

實(shí)現(xiàn)

1.項(xiàng)目準(zhǔn)備

先通過命令創(chuàng)建一個(gè)Ant Design Blazor項(xiàng)目，并加入到空的解決方案當(dāng)中：

dotnet new antdesign -o LowCode.Web -ho server

由于我們需要寫一些API接口，所以在Startup類中加入控制器相關(guān)的代碼：

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.菜單接口

在項(xiàng)目中新增Services文件夾，添加MenuServices類并填入固定數(shù)據(jù)，并在Startup類中注冊：

public class MenuService    {        /// 
        /// 獲取左側(cè)導(dǎo)航數(shù)據(jù)        /// 
        ///         public virtual MenuDataItem[] GetMenuData()        {            return new MenuDataItem[]            {                new MenuDataItem                {                    Path="/",                    Name="測試模塊",                    Key="Test",                    Icon="smile",                    Children=new MenuDataItem[]                    {                        new MenuDataItem                        {                            Path="/StdForm",                            Name="動(dòng)態(tài)表單",                            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.表單組件接口

創(chuàng)建一個(gè)簡單的表單與組件的Model：

錄入控件Input：

public class Input     {        public string Name { get; set; }        public string Value { get; set; }    }

標(biāo)準(zhǔn)表單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="賬號(hào)"                },                new Input()                {                    Name="密碼"                }            });            return result;        }    }

4.動(dòng)態(tài)表單頁面

在Pages文件夾下創(chuàng)建一個(gè)StdForm.razor和StdForm.razor.cs文件

StdForm.razor.cs(注意partial):

public partial class StdForm    {        public StandardFormModel StandardFormModel { get; set; }        public Form StdFormModel { 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"
    @foreach (var item in StandardFormModel.ArrayInput)    {                    @if (item is Model.Component.Input)            {                            }            }

運(yùn)行效果

總結(jié)

在Blazor項(xiàng)目中要訪問API接口則需要注入HttpClient類，使用HttpClient請求API接口即可，也可以直接注入Services調(diào)用。

目前僅僅是驗(yàn)證了動(dòng)態(tài)表單的可能性，其他的組件渲染可以根據(jù)Ant Design Blazor官方文檔定義模型結(jié)構(gòu)實(shí)現(xiàn)

參考文檔：

Blazor官方文檔

Ant Design Blazor官方文檔

Ant Design Blazor倉庫

關(guān)鍵詞：