Blazor学习之旅系列总结目录

Posted 2023-05-03 Edison Zhou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Blazor学习之旅系列总结目录相关的知识，希望对你有一定的参考价值。

Blazor是微软近年来主推的，基于C#、HTML与CSS来构建交互式Web UI的框架。基于Blaozr的特点，Edison认为它应当是.NET技术栈的发团队开发企业级信息管理系统的首选框架，特别是对于传统行业的数字化IT团队，比如Edison所在的西门子成都工厂IT团队。那么，就来一起学习使用Blazor吧！

1 什么是Blazor？

Blazor是微软近年来主推的，基于C#、HTML与CSS来构建交互式Web UI的框架。

借助 Blazor，开发人员可以使用 C# 生成客户端和服务器代码。他们还可以与前端客户端代码和后端逻辑共享代码和库。使用 C# 生成所有代码可简化在前端和后端之间共享数据，重复使用代码以加速开发和维护。因此，它特别适用于已熟悉 .NET 并且希望获得用于设计和交付基于 HTML 的应用程序的各种选项的开发人员。

基于Blaozr的特点，Edison认为它应当是.NET技术栈的发团队开发企业级信息管理系统的首选框架，特别是对于传统行业的数字化IT团队。

例如Edison所在的制造业数字化工厂的IT团队，受限于团队规模和人员水平，不能像互联网公司那样搞纯粹的大规模前后端独立团队，对性能的要求也不会有互联网大促的要求那么高，此外最重要的是每个人的职责除了开发可能还兼顾运维和一定程度的需求梳理，因此利用已掌握的技术栈实现端到端的业务需求，将精力更多放到与业务的融合和微服务API逻辑的编写是更好的选择。

最后，我想说：对传统行业的数字化转型来说，只有适合的技术，没有最好的技术。

2 开始学习Blazor！

（1）Blazor学习之旅 - 初步了解Blazor

（2）Blazor学习之旅 - 第一个Blazor应用

（3）Blazor学习之旅 - 实现一个Todo应用

（4）Blazor学习之旅 - 实现数据共享

（5）Blazor学习之旅 - 实现数据绑定

（6）Blazor学习之旅 - 路由系统知多少

（7）Blazor学习之旅 - 布局知多少

（8）Blazor学习之旅 - MudBlazor组件库

（9）Blazor学习之旅 - 使用MudBlazor重构Todo应用

（10）未完待续...

作者：周旭龙

出处：https://edisonchou.cnblogs.com

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

Blazor学习之旅第一个Blazor应用

【Blazor】| 总结/Edison Zhou

大家好，我是Edison。

最近在学习Blazor做全栈开发，因此根据老习惯，我会将我的学习过程记录下来，一来体系化整理，二来作为笔记供将来翻看。

本篇我们来构建第一个Blazor Web应用，这里我们选择Blazor Server类型，后面我们再学习Blazor WebAssembly类型。

话外音：有人问我西门子在用Blazor吗？是的，西门子德国的两家数字化工厂都有在用Blazor开发Web应用，特别用到了MudBlazor这个UI组件库，值得关注！而作为西门子在中国的首家数字化工厂，我们自然也要用Blazor开发新的Web应用系统啦！

创建新的Blazor应用

在VS中，添加一个Blazor Server应用。

在“框架”组合框中选择“.NET 6.0(长期支持)”。保持其他设置不变，然后选择“创建”即可。

Blazor应用的结构

一个默认的Blazor应用的项目结构如下图所示：

其中：

（1）Data文件夹主要存放Model和Service。

（2）Pages文件夹主要存放基于Razor的页面和组件。其中，.cshtml是页面，.razor的则一般是组件，可复用。

（3）Shared文件夹主要存放页面模板、导航模板等。

其他：

（1）Imports.razor用于声明全局应用的命名空间。

（2）App.razor用于声明默认的Router。

Blazor应用初体验

这里，我们暂时啥也不改，Run起来看看效果：

（1）首先是一段文字介绍：

（2）点击Counter菜单，进入计数器页面：

（3）点击Fetch data菜单，进入天气预报示例数据表格：

计数器示例

在Pages/Counter.razor我们可以看到这个Counter组件的实现：

@page "/counter"


<h1>Counter</h1>


<p role="status">Current count: @currentCount</p>


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


@code 
    private int currentCount = 0;


    private void IncrementCount()
    
        currentCount++;

我们来看看这个组件的代码：

（1）@page指令说明了浏览器可以通过/counter请求来访问该组件；

（2）@code指令说明了C#代码区域，声明了一个InCrementCount方法用于点击次数的自增。

（3）button标签中通过@onclick绑定了点击事件InCrementCOunt，会触发currentCount的自增。

使用组件

这里我们尝试在Index.razor文件中添加一个刚刚的Counter组件：

@page "/"


<h1>Hello, world!</h1>


Welcome to your new app.


<SurveyPrompt Title="How is Blazor working for you?" />


<Counter />

这时，我们重新启动应用就可以看到Counter组件显示在主页上面了：

此时，假设我们每个Counter组件的调用方希望的递增值是不固定的，不一定都是1。换句话说，我们希望支持调用方传递它需要递增的值，比如10。

这里，我们稍微改动一下Counter组件的实现：

@page "/counter"


<h1>Counter</h1>


<p role="status">Current count: @currentCount</p>


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


@code 
    private int currentCount = 0;


    [Parameter]
    public int IncrementAmount  get; set;  = 1;


    private void IncrementCount()
    
        currentCount += IncrementAmount;

这里的改动为：