本篇博客只实现基本的低代码,比如新增组件,动态修改组件参数
创建项目
首先创建一个空的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">