Blazor入门——第一个入门程序

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

• 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
• 共享使用 .NET 编写的服务器端和客户端应用逻辑。
• 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

• 使用 C# 代替 JavaScript 来编写代码。
• 利用现有的 .NET 库生态系统。
• 在服务器和客户端之间共享应用逻辑。
• 受益于 .NET 的性能、可靠性和安全性。
• 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

                                                                                                                        —— 微软官方ASP.NET Core Blazor 简介

一、新建Blazor Web应用

准备工作：

1. Visual Studio 2019 
2. .NET Core 3.0

 打开VS2019选择Blazor应用

项目创建完成，下面看一下文件目录结构

1. wwwroot放了网站的静态资源如css、js、image文件；
2. Data文件夹存放数据相关类
3. appsetting.json是应用程序的配置文件。
4. buidlerconfig.json是应用程序的打包配置文件。
5. page是应用程序的页面
6. program.cs是程序的入口，代码如下，意思是创建一个站点，并从startup类开始运行。
7. Shared文件夹存放公共的页面

 以上文件熟悉.NET Core的同学应该不陌生，我们要讲的是_Imports.razor、App.razor文件

_Imports.razor

通过文件名和文件内容可以得知，_Imports.razor文件引用了程序所需程序集。

App.razor

App.razor定义了程序的全局路由，当客户端请求路由正确时，则会执行节点，DefaultLayout="@typeof(MainLayout)"则去请求了默认模板并跳转至相应页面。当客户端请求路由正确时，则会执行节点在页面输出错误信息“Sorry, there's nothing at this address.”

运行项目

可以看到项目已经为我们搭建了一个包含左侧菜单栏的后台框架，并包含了Pages文件夹中的Index、Counter、FetchData三个页面

点击对应的菜单栏，可以切换至相应页面。

路由

从新建项目到运行，我们并没有看见有路由配置的文件，也没有手动设置过路由，但是点击菜单却能跳转至相应的页面。

其实Blazor应用的路由是在每个页面中进行配置的。

分别打开页面，可以看到第一行代码便是该页面的路径。

我们手动把counter页面的路径改为“Mycounter”,刷新页面，再次点击菜单栏上的counter，就会找到不到页面，而渲染了错误信息。

手动将地址改为Mycounter，即可正确访问。

下一节，将继续深入理解和使用Blazor Web应用程序。