Blazor 简单介绍 - C# 全栈工程师的福音

2018-06-12 本文已影响9人程序员长春

WASM

想知道Blazor 的前世今生，需要先了解一下 WebAssembly。
WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体制定的一个新的规范。
WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式。
谷歌、苹果、微软和Mozilla的工程师正合力创建WebAssembly（又名wasm），这是能够运用在未来浏览器中承诺可带来20倍更快性能的字节码（bytecode）。WebAssembly项目创造全新的字节码（一种机器可读的指令集，能够更快为浏览器加载高级语言），让桌面和移动端浏览器相比较网页或者应用的整体源代码变得更加高效。

Blazor

Blazor 是一个 Web UI 框架，可通过 WebAssembly 在任意浏览器中运行 .Net 。也就说，你可以用C# 写前端。可以理解为，这是一个C#语言的Vue, Angular, React。
Blazor 拥有现代 Web 框架具备的所有功能，包括：

用于构建 composable UI 的组件模型
路由
布局
表格和验证
依赖注入
JavaScript 互操作
开发期间在浏览器中实时重新加载
服务器端渲染
在浏览器和 IDE 中全面调试 .NET
能够通过 asm.js 在较早版本的（非 WebAssembly ）浏览器上运行

Blazor GitHub 地址：https://github.com/aspnet/blazor
Blazor 文档地址： https://blazor.net/

开发环境

安装 .NET Core 2.1 SDK 或更高版本
安装 Visual Studio 2017 15.7 或更高版本
安装最新的 Blazor Language Services extension

创建项目

使用 Visual Studio，新建 ASP.NET Core Web Application 项目,

image.png

如果你不喜欢 Visual Studio ，也可以用命令行创建项目

dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run

界面及代码简单解析

image.png

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {
    int currentCount = 0;
    void IncrementCount()
    {
        currentCount++;
    }
}

@page 表示本页面（组件）在路由中，如果没有这一行代码，那么可以作为独立组件使用，只是不能使用 http://localhost:14747/counter 这个url 访问。
@functions 可以理解为一个 Controller 类（C# MVC）
currentCount 是一个 int 类型的成员变量
@currentCount 在HTML代码中渲染 currentCount值
IncrementCount() 是一个 C# 函数，每次调用， currentCount 增加1
onclick="@IncrementCount()" 类似于javascript中的 onClick。

用过 Vue, Angular, React 或者WPF 的对于这种代码应该一眼就能看出来，MVVM模式。

Blazor 的现状

目前Blazor 处于Alpha阶段，最新版本号0.4.0（2018年6月11日）。
我的感觉是，目前来说，效果已经很惊艳，用来做后台管理界面问题不大。