cs客户端接收网页传来的数据_用Blazor构建客户端Web程序

前段时间.NET Core 3.0出来了，随之发布的还有一个名为Blazor的开发框架，这几天我简单学习了一下，发现这个框架很有潜力，所以给大家介绍一下。

先来看看官方文档对于Blazor框架的介绍：

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

使用 C# 代替 JavaScript 来创建丰富的交互式 UI。

共享使用 .NET 编写的服务器端和客户端应用逻辑。

将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

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

使用 C# 代替 JavaScript 来编写代码。利用现有的 .NET 库生态系统。

在服务器和客户端之间共享应用逻辑。受益于 .NET 的性能、可靠性和安全性。

始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

简单来说就是一个利用C# 和.NET技术来创建网页程序的框架。好了，下面我们来看看如何使用框架吧。

创建Blazor框架程序

随.NET Core 3.0一起出现的是Blazor Server，也就是利用HTML、CSS等技术创建网页的框架，目前是正式版本。还有一个基于Web Assembly的版本，可以创建离线Web程序，将会随.NET Core 3.1一起正式推出，如果你想用Blazor WebAssembly，需要安装目前处于预览状态的.NET Core 3.1.目前我们简单看看Blazor Server就好了。

首先，如果你没有安装.NET Core 3.0 SDK，首先去官网下载安装。然后安装Visual Studio Code，并安装C# 扩展，然后就可以开始运行项目了。当然如果你已经安装了Visual Studio之类的，也可以运行。

下面是.NET Core 3.0 SDK的下载地址。

dotnet new blazorserver -o WebApplication1

然后用下面的命令创建一个Blazor Server项目。创建完成后，会出现一个新文件夹。

dotnet new blazorserver -o WebApplication1

然后用VSC将该文件夹打开，这时候，C#扩展会询问是否需要添加缺失的文件，选择是。稍等片刻，就可以运行项目了。

运行项目很简单，直接利用VSC的调试功能就可以运行了。

Blazor技术概览

好了，Blazor程序已经运行起来了，我们翻翻代码，看看Blazor是怎么运行的吧。首先来看看项目目录，可以看到项目并不复杂，基本上和ASP.NET Core项目差不多。Pages文件夹里面是Razor语法的网页模板。Shared文件夹里面是网页通用模板。wwwroot是网页用到的html和css文件。

首先来看看主页和对应的文件。这个比较简单，没什么说的，第一行page指令指定文件对应的路由，由于是主页嘛，所以一个斜杠代表根网址。之后就是正常的HTML语法，该怎么写就怎么写。

@page "/"

Hello, world!

Main Page.

然后是第二个网页，实现了一个计数器功能，每次按按钮都会使计数器加一。

这个页面对应的代码如下。这个页面设定了路由为counter，对应的网址自然也就变成了counter。值得注意的是code指令里面的，这是标准的C# 代码，定义了一个私有变量和函数。注意本来网页上onclick后面的函数应该是JavaScript，而这里则是直接指定了一个C#函数，这正是Blazor框架的特殊所在。

@page "/counter"

Counter

Current count: @currentCount

Click me@code { int currentCount = 0; void IncrementCount() { currentCount++; }}

第三个页面演示了异步接收数据的功能。切换到这个页面的时候，网页会从服务器异步获取数据，数据就位后填充网页列表，取代原来的正在加载提示。当然由于是本地开发，数据是瞬间加载完成，所以没办法看到这个变化。

虽然看起来功能好像比较高大上，其实代码同样很简单，当然需要有一定的C# 基础。网页很简单，用if指令判断数据是否加载完毕，如果加载完毕的话就显示表格。而看起来比较复杂的异步功能仅需要一个异步C#方法调用即可完成。

@page "/fetchdata"@using WebApplication1.Data@inject WeatherForecastService ForecastService

Weather forecast

This component demonstrates fetching data from a service.

@if (forecasts == null){

Loading...

}else{

Date	Temp. (C)	Temp. (F)	Summary
@forecast.Date.ToShortDateString()	@forecast.TemperatureC	@forecast.TemperatureF	@forecast.Summary

}@code { WeatherForecast[] forecasts; protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); }}

而这个异步方法的实现如下，很简单，自己创建一组数据并异步返回，没什么好说的。

namespace WebApplication1.Data{ public class WeatherForecastService { private static readonly string[] Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; public Task GetForecastAsync(DateTime startDate) { var rng = new Random(); return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = rng.Next(-20, 55), Summary = Summaries[rng.Next(Summaries.Length)] }).ToArray()); } }}

好了，虽然官方的例子很简单，但是却为我们演示了Blazor框架的几个重要特性。尤其是最后一个例子，异步获取数据并显示。假如我们用Vue、Angular或者React之类的前端框架实现同样的功能，不仅需要学习一大堆前端知识，而且还得写一个后端。而对于.NET程序员来说，仅需要学习Blazor框架，编写一套服务端代码即可，利用现有知识快速完成工作，简直就是C#程序员们的福音。

如果你是一名.NET 程序员，不妨学习一下Blazor框架，仅需要很低的学习成本，就可以获得快速完成项目的潜力，何乐而不为呢？另外目前Blazor Server仅支持联机程序，而Blazor WebAssembly不仅支持离线Web程序，而且还借由WebAssembly技术带来了的浏览器端高性能计算特性，相信未来.NET技术会有广阔的应用空间，各位.NET程序员可以一起期待。