Blazor第三方组件库推荐：BootstrapBlazor UI_bootstrap blazor

前言

Blazor是C#全栈追求极致开发速度的一个前后端不分离的框架，上限是在Winform,WPF,MAUI等宿主环境上面运行的全平台引用。和Electron一样，解决方案都是套壳浏览器。

为了追求极致的开发速度，Blazor急需Blazor版本的Element UI。但是我发现国内竟然有微软技术爱好者开发了这个UI框架，还是开源的。这也太厉害了吧。我对开源框架的开发者一直都是最崇高的敬意的。不说了，写完这个公司小项目就去打钱给作者。

资源

BootstrapBlazor 官方文档
BootstrapBlazor 项目模板
BoostrapBlazor 管理员和前台项目 BlazorAdmin

适合人群

• 快速开发
  • 不需要写前后端
• 安全开发
  • 浏览器只收到渲染结果，不怕API暴露
• 敏捷迭代
  • 需求不确定，天天改需求。
• C#全栈开发
  • 前端里面不用JS,TS，就用C#写逻辑
• 小项目开发
  • 因为是服务器发送渲染结果的方法。对于服务器的网速和负载要求比较高
  • 网上说可以支持1000人同时在线。对于大部分小网站来说已经够用了。日活都不一定有1000.

如何开始

环境配置

• .NET CORE 6.0 及以上
• VS2022 以上
• 安装BootstrapBlazor项目模板

Tips:BootstrapBlazor以下简称BB

BB导入到微软默认项目模板实在太过于麻烦。不如直接使用BB提供的项目模板

开始新项目

Server和Wasm的区别

简单来说

• Server：前后端不分离
• Wasm：前端项目

这里推荐使用Server

.NET CORE 不支持 7.0

可能是我自己的Bug。我的电脑上面安装了.NET Core7.0

运行结果

使用组件

我们在Counter页面添加元素

@page "/counter"
@attribute [TabItemOption(Text = "Counter")]
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


<!--这个BB提供的Button组件，特点是用墨绿色标出和首字母大写-->
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

发布项目

配置到IIS里面

可以正常访问

样式问题

我们使用模板创建的文件里面没有自动引入全局样式。如何进行样式隔离请看微软官方文档。

Blazor CSS隔离

我们自己引入样式就可以了。

<link href="项目名.styles.css" rel="stylesheet" />
1