Blazor学习之旅(2)第一个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;}
}

这里的改动为：