實(shí)現(xiàn)簡(jiǎn)單的Blazor低代碼（低代碼api）
實(shí)現(xiàn)簡(jiǎn)單的Blazor低代碼
本篇博客只實(shí)現(xiàn)基本的低代碼，比如新增組件，動(dòng)態(tài)修改組件參數(shù)
創(chuàng)建項(xiàng)目
首先創(chuàng)建一個(gè)空的Blazor Server，并且命名LowCode.Web
實(shí)現(xiàn)我們還需要引用一個(gè)Blazor組件庫(kù)，由于作者用Masa Blazor比較多所以使用Masa Blazor
安裝Masa Blazor
將Masa Blazor添加到項(xiàng)目依賴中
<ItemGroup>
<PackageReference Include="Masa.Blazor" Version="1.0.0-preview.3" />
</ItemGroup>
修改Program.cs文件 增加了builder.Services.AddMasaBlazor;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages;
builder.Services.AddServerSideBlazor;
builder.Services.AddMasaBlazor;
var app = builder.Build;
if (!app.Environment.IsDevelopment)
{
// 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.MapBlazorHub;
app.MapFallbackToPage("/_Host");
app.Run;
打開(kāi)_Imports.razor添加以下代碼
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using LowCode.Web
@using Masa.Blazor
@using BlazorComponent
@using LowCode.Web.Components
修改Pages_Host.cshtml，添加以下代碼
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace LowCode.Web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="~/"/>
<link href="css/site.css" rel="stylesheet"/>
<!-- masa blazor css style -->
<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet"/>
<!--icon file,import need to use-->
<link rel="stylesheet">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered"/>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">??</a>
</div>
<script src="_framework/blazor.server.js"></script>
<!--js(should lay the end of file)-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
</body>
</html>
修改MainLayout.razor文件
@inherits LayoutComponentBase
<MApp>
@Body
</MApp>
這樣就完成安裝了Masa Blazor
然后開(kāi)始寫(xiě)實(shí)現(xiàn)
實(shí)現(xiàn)低代碼組件設(shè)計(jì)
創(chuàng)建Components文件夾
創(chuàng)建渲染組件ComponentRender.razor，添加以下代碼
@using LowCode.Web.Components.Options
@RenderFragment
@code{
/// <summary>
/// 渲染組件
/// </summary>
[Parameter]
public RenderFragment RenderFragment { get; set; }
/// <summary>
/// 渲染配置
/// </summary>
public GenerateMButtonOptions GenerateMButtonOptions { get; set; }
/// <summary>
/// 渲染動(dòng)態(tài)代碼
/// </summary>
public string Code { get; set; }
}
定義組件庫(kù)模板 DynamicComponentGenerator.razor，由于cs文件不能razor模板，所以創(chuàng)建razor文件，添加以下代碼，以下代碼我們添加三個(gè)組件模板，
@using LowCode.Web.Components.Options
@code {
public static (RenderFragment, string) GenerateMButton(GenerateMButtonOptions options)
{
// 定義模板默認(rèn)數(shù)據(jù)
RenderFragment template = @<MButton Block=options.block
Height=options.height
Width=options.width
Class=@options.Class
Style=@options.Style
Dark=options.dark
Attributes=options.attributes>@options.childContent</MButton>;
// 模板定義代碼 （存在問(wèn)題）
var data = $@"<MButton Block={options.block}
Height={options.height}
Width={options.width}
Class={options.Class}
Style={options.Style}
Dark={options.dark}
Attributes={options.attributes}>{@options.childContent}</MButton>";
return (builder => { builder.AddContent(0, template); }, data);
}
public static (RenderFragment, string) GenerateMCard(GenerateMButtonOptions options)
{
RenderFragment template = @<MCard Height=options.height
Width=options.width
Class=@options.Class
Style=@options.Style
Dark=options.dark
Attributes=options.attributes>@options.childContent</MCard>;
var data = $@"<MCard Height={options.height}
Width={options.width}
Class={options.Class}
Style={options.Style}
Dark={options.dark}
Attributes={options.attributes}>{@options.childContent}</MCard>";
return (builder => { builder.AddContent(0, template); }, data);
}
public static (RenderFragment, string) GenerateMAvatar(GenerateMButtonOptions options)
{
RenderFragment template = @<MAvatar Height=options.height
Width=options.width
Class=@options.Class
Style=@options.Style
Attributes=options.attributes>@options.childContent</MAvatar>;
var data = $@"<MAvatar Height={options.height}
Width={options.width}
Class={options.Class}
Style={options.Style}
Attributes={options.attributes}>{@options.childContent}</MAvatar>";
return (builder => { builder.AddContent(0, template); }, data);
}
}
添加ComponentComponentType.cs組件枚舉
namespace LowCode.Web.Components;
public enum ComponentType
{
MButton,
MCart,
MAvatar
}
添加ComponentComponentLibrary.razor用于顯示支持的組件
<div style="height: 100px">
<MButton class="button" OnClick=" => OnClick?.Invoke(ComponentType.MButton)">
<MIcon>
mdi-card
</MIcon>
按鈕
</MButton>
<MButton class="button" OnClick=" => OnClick?.Invoke(ComponentType.MCart)">
<MIcon>mdi-id-card</MIcon>
卡片
</MButton>
<MButton class="button" OnClick=" => OnClick?.Invoke(ComponentType.MAvatar)">
<MIcon>mdi-id-card</MIcon>
頭像
</MButton>
</div>
@code{
public delegate void OnClickDelegate(ComponentType type);
[Parameter]
public OnClickDelegate? OnClick { get; set; }
}
<style>
.button {
margin: 5px;
}
</style>
新增ComponentOptionsGenerateMButtonOptions.cs添加以下代碼 ，添加組件時(shí)的參數(shù)
using BlazorComponent;
using Microsoft.AspNetCore.Components;
namespace LowCode.Web.Components.Options;
public class GenerateMButtonOptions
{
public string? height { get; set; }
public string? width { get; set; }
public bool block { get; set; }
public bool dark { get; set; }
public string Style { get; set; } = string.Empty;
public string Class { get; set; } = string.Empty;
public Dictionary<string, object>? attributes { get; set; } = new;
public RenderFragment? childContent { get; set; }
}
然后修改PagesIndex.razor，
@page "/"
@using LowCode.Web.Components.Options
<MRow NoGutters>
<MCol>
<MCard Class="pa-1"
Outlined
Style="height: 100vh"
tile>
<ComponentLibrary OnClick="CreateOnClick"></ComponentLibrary>
</MCard>
</MCol>
<MCol Order="2"
Cols="12"
Sm="6"
Md="8">
<MCard Class="pa-2"
Outlined
Style="height: 100vh"
tile>
@foreach (var item in Renders)
{
<render @onclick=" => Id = item.Key">
@item.Value.RenderFragment
</render>
}
</MCard>
</MCol>
<MCol Order="3">
<MCard Class="pa-2"
Outlined
Style="height:100vh"
tile>
<MCard>
@*TODO:通過(guò)反射實(shí)現(xiàn)獲取組件參數(shù)根據(jù)參數(shù)類(lèi)型顯示指定組件動(dòng)態(tài)修改參數(shù)*@
@foreach (var item in Renders)
{
var options = item.Value.GenerateMButtonOptions;
if (item.Key == Id)
{
<MTextField @bind-Value="options.width" Label="width"></MTextField>
<MTextField @bind-Value="options.height" Label="height"></MTextField>
<MTextField @bind-Value="options.Style" Label="Style"></MTextField>
<MTextField @bind-Value="options.Class" Label="Class"></MTextField>
<MDivider></MDivider>
<MButton OnClick=" => AddOptionsAttribute(options.attributes)" Block>新增擴(kuò)展參數(shù)輸入框</MButton>
@foreach (var e in options.attributes)
{
<MTextarea NoResize Rows="1" Value="@e.Key" ValueChanged="(v) => { options.attributes.Remove(e.Key);options.attributes.Add(v,e.Value);}"></MTextarea>
<MTextarea NoResize Rows="1" Value="@options.attributes[e.Key].ToString" ValueChanged="(v)=>options.attributes[e.Key]= v"></MTextarea>
}
<MButton Block OnClick="=>DeleteComponent(item.Key)">刪除</MButton>
}
}
</MCard>
</MCard>
</MCol>
</MRow>
@code {
public string Id { get; set; }
private Dictionary<string, Render> Renders = new;
private RenderFragment RenderFragment { get; set; }
private void AddOptionsAttribute(Dictionary<string, object> attribute)
{
attribute.Add("new","");
}
private void DeleteComponent(string key)
{
Renders.Remove(key);
}
private void CreateOnClick(ComponentType type)
{
GenerateMButtonOptions options = ;
string code;
switch (type)
{
case ComponentType.MButton:
options = new
{
childContent = @<span>新建的按鈕</span>,
attributes = new Dictionary<string, object>,
width = "100px",
};
(RenderFragment, code) = DynamicComponentGenerator.GenerateMButton(options);
Renders.Add(Guid.NewGuid.ToString("N"), new Render { RenderFragment = RenderFragment, GenerateMButtonOptions = options, Code = code });
break;
case ComponentType.MCart:
options = new
{
childContent = @<MButton>多個(gè)按鈕</MButton>,
attributes = new Dictionary<string, object>,
width = "100px",
};
(RenderFragment, code) = DynamicComponentGenerator.GenerateMCard(options);
Renders.Add(Guid.NewGuid.ToString("N"), new Render { RenderFragment = RenderFragment, GenerateMButtonOptions = options, Code = code });
break;
case ComponentType.MAvatar:
options = new
{
childContent = @<MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/jack.png" Alt="Jack"></MImage>,
attributes = new Dictionary<string, object>,
width = "100px",
};
(RenderFragment, code) = DynamicComponentGenerator.GenerateMAvatar(options);
Renders.Add(Guid.NewGuid.ToString("N"), new Render { RenderFragment = RenderFragment, GenerateMButtonOptions = options, Code = code });
break;
default:
throw new ArgumentOutOfRangeException(nameof(type), type, );
}
StateHasChanged;
}
}
這樣就實(shí)現(xiàn)了整個(gè)簡(jiǎn)單的低代碼操作，我們可以使用看看效果，簡(jiǎn)單了解實(shí)現(xiàn)原理
我們定義了組件的模板，這個(gè)模板是固定的，通過(guò)Blazor提供的雙向綁定實(shí)現(xiàn)動(dòng)態(tài)修改組件參數(shù)，這種方式可能不太適合完整的低代碼，但是也是不錯(cuò)的思路，
這個(gè)項(xiàng)目還處于Demo階段，不知道是否有大佬一塊研究，研究技術(shù)極限，Blazor非常好用，推薦
GitHub項(xiàng)目是MIT開(kāi)源，希望大佬一塊學(xué)習(xí)，促進(jìn)Blazor生態(tài)
來(lái)著Token的分享
