首页 > 其他分享 >实现简单的`Blazor`低代码

实现简单的`Blazor`低代码

时间:2023-02-15 15:47:09浏览次数:33  
标签:set string get 代码 RenderFragment options 简单 Blazor public

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

创建项目

首先创建一个空的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")/[email protected]/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">

标签:set,string,get,代码,RenderFragment,options,简单,Blazor,public
From: https://www.cnblogs.com/hejiale010426/p/17123263.html

相关文章

  • java 代码优化
    代码优化的目标是:1.减小代码的体积2.提高代码运行的效率1、尽量指定类、方法的final修饰符带有final修饰符的类是不可派生的。在Java核心API中,有许多应用final的例子......
  • 直播系统app源码,shiro简单的密码加盐与密码验证
    直播系统app源码,shiro简单的密码加盐与密码验证 publicclasstest{  publicstaticvoidmain(String[]args){                ......
  • git 创建远程源 并提交代码
    一、提交代码到远程源1、gitremote2、gitremote-v3、gitremoteadd自己起的名字git的仓库地址(http)gitremoteaddsourcehttps://codeup.aliyun.com/cip-games.......
  • 分页查询功能_代码实现_后台代码实现与分页查询功能_代码实现_前台代码实现
    分页查询功能_代码实现_后台代码实现packagehf.xueqiang.web.servlet;importhf.xueqiang.domain.PageBean;importhf.xueqiang.domain.User;importhf.xueqiang.se......
  • wsl简单记录
    1.装了windowterminal,打开ubuntu终端的时候,不知道root密码,可以用wsl -u root来打开终端,再`passwdroot`修改root密码就可以了2.wsl的文件目录位置文件系统路......
  • Idea如何支持写Python代码
    在IDEA中,点击【File】-【Settings...】-【Plugins】,在里面搜索python,并安装插件。(安装后需要重启有效)在IDEA中,配置pythonSDK的路径  (清除红色下划线)【Modules】......
  • 用无代码开发应用系统-应用创建基础
    互联网共享软件工厂KeplerPAP无代码平台系列持续更新中学完后我涨薪了。​在软件开发构建应用程序时,我们有时候会发现,在整个应用程序中如何使用数据也是一个令人头疼的问题......
  • 简单试用Android Annotations
    AndroidAnnotations号称"是一个能够加速Android开发的开源框架,它可以帮助开发者处理一些前后台任务、rest服务、应用类、代码片段等,让开发者专......
  • 在代码中实现背景单击变换颜色和TextView变换文字颜色
    效果:点击前:[img]http://dl2.iteye.com/upload/attachment/0093/6747/421353dc-c6b1-3518-8f00-13d7ba03cc37.png[/img]点击中:[img]http://dl2.......
  • js 简单算法学习
    http://liting.ltd/#/algorithm_js/翻转字符串转算法http://liting.ltd/#/js简单算法学习......