Article directory
foreword
Blazor is a C# full-stack framework that pursues the ultimate development speed without separation of front and back ends. The upper limit is the full platform reference running on Winform, WPF, MAUI and other host environments. Like Electron, the solution is a shell browser.
In order to pursue the ultimate development speed, Blazor urgently needs the Blazor version of Element UI. But I found that there are Microsoft technology enthusiasts in China who have developed this UI framework, which is still open source. This is too powerful. I have always had the highest respect for the developers of open source frameworks. Not to mention, after writing this small company project, I will send money to the author.
resource
BootstrapBlazor official documentationBootstrapBlazor
project templateBoostrapBlazor
administrator and front-end projectBlazorAdmin
suitable for the crowd
- rapid development
- No need to write front-end and back-end
- security development
- The browser only receives the rendering result, not afraid of API exposure
- agile iteration
- The demand is uncertain, and the demand changes every day.
- C# full stack development
- Use C# to write logic instead of JS and TS in the front end
- small project development
- Because it is the way the server sends the rendering result. The network speed and load requirements for the server are relatively high
- It is said online that it can support 1,000 people online at the same time. It is enough for most small websites. DAU does not necessarily have 1000.
how to start
Environment configuration
- .NET CORE 6.0 and above
- VS2022 or above
- Install the BootstrapBlazor project template
Tips: BootstrapBlazor hereinafter referred to as BB
It is too much trouble to import BB into Microsoft's default project template. It is better to use the project template provided by BB directly
start a new project
The difference between Server and Wasm
simply put
- Server: the front and back ends are not separated
- Wasm: front-end project
It is recommended to use Server here
.NET CORE does not support 7.0
Might be my own bug. .NET Core7.0 is installed on my computer
operation result
use components
We add elements to the Counter page
@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++;
}
}
post project
Configured in IIS
normal access
style problem
The files we create using templates do not automatically import global styles. How to perform style isolation, please refer to Microsoft's official documentation.
We can import the style ourselves.
<link href="项目名.styles.css" rel="stylesheet" />