实现简单的Blazor低代码

本篇博客只实现基本的低代码,比如新增组件,动态修改组件参数

创建项目

首先创建一个空的Blazor Server,并且命名LowCode.Web

实现我们还需要引用一个Blazor组件库,由于作者用Masa Blazor比较多所以使用Masa Blazor

安装Masa Blazor

Masa Blazor添加到项目依赖中.

<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();

打开_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 href="https://cdn.masastack.com/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" 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">