在今年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的送上了一分惊喜. 微软正式开源Blazor ，将.NET带回到浏览器.

这个小惊喜, 迅速的在dotnet开发者中间传开了. 而就在昨天(2018年3月22日) Blazor发布了它的第一次Release. Blazor到底是个什么样的东西呢?我们是否真的可以携着C#语言进入前端的市场中? 不如现在就跟我一起体验dotnet blazor吧.

首先

获取最新版的dotnet core 并安装Blazor模板:

  • 安装 最新的.Net Core(版本需要高于2.1.101)

  • 对于简单的尝试来说, VS code 已经足够. 所以笔者并没有亲自安装Visual Studio.

使用命令行初始化项目:

dotnet new -i Microsoft.AspNetCore.Blazor.Templatesdotnet new blazor -o BlazorApp1cd BlazorApp1dotnet run

  • 如果你需要使用Visual Studio,

    • 安装最新的Visual Studio 2017.

    • 安装 ASP.NET Core Blazor Language Services extension

    • 在Visual Studio中创建新的测试项目:

    • 选择 File -> New Project -> Web -> ASP.NET Core Web Application

    • 确定在Target Framework里选择了 .NET Core and ASP.NET Core 2.0.

    • 选择 Blazor 模板

敌后根据地? 如何在前端渲染cshtml

当我们运行起项目之后, 就可以看到如下提示

个时候我们在浏览器里打开监听的端口 http://localhost:17477. 就可以看到我们这个项目的网页了.

这个简单的示例项目带了3个页面

第一个页面比较简单, 但先别急,让我们打开浏览器工具. 先看看页面在加载页面过程中都加载了什么

在初次打开页面的时候, 我们看到的是这样一个Loading..的页面.  这个页面的代码是这样的.

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>BlazorDemo</title><base href="/" /><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /><link href="css/site.css" rel="stylesheet" /></head><body><app>Loading...</app><script src="css/bootstrap/bootstrap-native.min.js"></script><script src="_framework/blazor.js" main="BlazorDemo.dll" entrypoint="BlazorDemo.Program::Main" references="Microsoft.AspNetCore.Blazor.Browser.dll,Microsoft.AspNetCore.Blazor.dll,Microsoft.Extensions.DependencyInjection.Abstractions.dll,Microsoft.Extensions.DependencyInjection.dll,mscorlib.dll,netstandard.dll,System.Core.dll,System.Diagnostics.StackTrace.dll,System.dll,System.Globalization.Extensions.dll,System.Net.Http.dll,System.Runtime.Serialization.Primitives.dll,System.Security.Cryptography.Algorithms.dll" linker-enabled="true"></script></body></h可以看到这个页面加载了两个js, 第一个是bootstrap的, 第二个叫做blazor.js. 只不过这个js有非常多的参数, 有 main, entrypoint, 和 references. 看看References里写的是不是很熟悉? 一看就是.net的dll.

blazor.js 加载了mono.js, mono.js 加载了mono.wasm. 这个是个什么文件?

asm代表的就是Web Assembly, 简单地说它就是编译好的二进制文件, 可以由浏览器直接运行, 源语言可以是C/C++或者任何可以编译到Web Assembly的文件, 而这里我们加载的就是mono 编译好的Web Assembly文件, 它被加载之后, 相当于浏览器中启动了一个mono 运行环境.

随后的两个js 是笔者chrome浏览器插入的js, 在这里不要被他们干扰了. 那么mono 运行时加载完成之后. 就需要加载dotnet 的Dll了, 首先是入口库, 接着就是需要的引用库

好家伙 1.9MB. 当所有的Dll被下载完毕之后, 这个时候我们的浏览器就可以运行我们这个dotnet的网页了. 于是就回到了我们最开始看到的那个应用程序.

所以 总结一下 blazor.js 调用mono.js, mono.js加载mono.wsam, 然后根据写在script标签里的内容继续的加载dotnet的库文件. 如果浏览器不支持wsam, 就会尝试使用asm.js加载mono.asm.js

柳暗花明又一村,Blazor的模板究竟是怎样的.

我们已经知道,经过前面的步骤,浏览器里已经运行了一个.Net 运行时了. 而且加载了项目必须的dll. 那么这样一个简单的程序,它的代码究竟是怎么样的呢?

打开项目代码,映入眼帘的是一个标准的.net Project

_ViewImports.cshtml包含了项目一些其他页面中最常使用的namespace

5

7

@using System.Net.Http

@using Microsoft.AspNetCore.Blazor

@using Microsoft.AspNetCore.Blazor.Components

@using Microsoft.AspNetCore.Blazor.Layouts

@using Microsoft.AspNetCore.Blazor.Routing

@using BlazorDemo

@using BlazorDemo.Shared

　

Program.cs是程序的入口点

using Microsoft.AspNetCore.Blazor.Browser.Rendering;

using Microsoft.AspNetCore.Blazor.Browser.Services;

using System;

namespace BlazorDemo

{

class Program

{

static void Main(string[] args)

{

var serviceProvider = new BrowserServiceProvider(configure =>

{

// Add any custom services here

});

new BrowserRenderer(serviceProvider).AddComponent<App>("app");

}

}

}

在入口点中, 我们注册了一个浏览器渲染服务 BrowserRender,让他渲染App

App.cshmtl是这样的

<Router AppAssembly=typeof(Program).Assembly />

这里的Router对应的是Microsoft.AspNetCore.Blazor.Routing.Router. 当给它一个AppAssembly时, 他就会自动的把当前的Url 和 AppAssembly的其他Pages对应起来.

所以 当我们在浏览器里输入 /Counter时,他就会加载Pages/Couter.cshtml.

Shared文件夹里分别是布局文件,导航栏, 还有一个我们自定义的控件 SurveyPrompt.

熟悉Razor引擎的小伙伴们一定很轻车熟路了. 那么当我们打开网站时, 默认显示给我们的 就是Index, 这个时候我们会加载Pages/Index.cshtml

Index.cshtml的代码是这个样子的

@page "/"<h1>Hello, world!</h1>Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

@page 可以告诉Router, 当前页面注册到 "/"

除了显示hello world以外, 我们在这里还看到了刚刚说到的第三方控件. SurveyPrompt. 果然不简单嘛, 一个看似简单的页面, 居然还告诉了我们如何使用自定义控件.

从声明上看, 我们知道 SunveyPrompt是一个控件,并且有一个属性Title. 现在我们打开它的代码

<div class="alert alert-survey" role="alert">

<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>

<strong>@Title</strong>

Please take our

<a target="_blank" class="alert-link" href="https://go.microsoft.com/fwlink/?linkid=870381">

brief survey

</a>

and tell us what you think.

</div>

@functions

{

// This is to demonstrate how a parent component can supply parameters

public string Title { get; set; }

}

我们可以看到代码分为两部分, @functions上面是类似html的东西, 下面是类似C#的东西. 熟悉React或者Vue的伙伴们恐怕不会对这种混写感到陌生. 这个就是Blazor的语法. Html部分很像使Razor的模板方式. 而最后整个页面都会被编译成一个类, 这个类派生自 Component. 如果你编译过项目, 你会在Debug下面的Shared目录找到一个叫SurveyPrompt.g.cs的东西

#pragma checksum "/Users/pzhi/SCM/gitHub/zhipu123/BlazorDemo/Shared/SurveyPrompt.cshtml" "{ff1816ec-aa5e-4d10-87f7-6f4963833460}" "a2a2ea88635b799343bc6d9647bbb818c8a20c9d"

// <auto-generated/>

#pragma warning disable 1591

namespace BlazorDemo.Shared

{

#line hidden

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using System.Net.Http;

using Microsoft.AspNetCore.Blazor;

using Microsoft.AspNetCore.Blazor.Components;

using Microsoft.AspNetCore.Blazor.Layouts;

using Microsoft.AspNetCore.Blazor.Routing;

using BlazorDemo;

using BlazorDemo.Shared;

public class SurveyPrompt : Microsoft.AspNetCore.Blazor.Components.BlazorComponent

{

#pragma warning disable 1998

protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)

{

base.BuildRenderTree(builder);

builder.OpenElement(0, "div");

builder.AddAttribute(1, "class", "alert alert-survey");

builder.AddAttribute(2, "role", "alert");

builder.AddContent(3, "\n    ");

builder.OpenElement(4, "span");

builder.AddAttribute(5, "class", "glyphicon glyphicon-ok-circle");

builder.AddAttribute(6, "aria-hidden", "true");

builder.CloseElement();

builder.AddContent(7, "\n    ");

builder.OpenElement(8, "strong");

builder.AddContent(9, Title);

builder.CloseElement();

builder.AddContent(10, "\n\n    Please take our\n    ");

builder.OpenElement(11, "a");

builder.AddAttribute(12, "target", "_blank");

builder.AddAttribute(13, "class", "alert-link");

builder.AddAttribute(14, "href", "https://go.microsoft.com/fwlink/?linkid=870381");

builder.AddContent(15, "\n        brief survey\n    ");

builder.CloseElement();

builder.AddContent(16, "\n    and tell us what you think.\n");

builder.CloseElement();

builder.AddContent(17, "\n\n");

}

#pragma warning restore 1998

// This is to demonstrate how a parent component can supply parameters

public string Title { get; set; }

}

}

#pragma warning restore 1591

我们发现@functions里面的内容 会作为这个类的成员变量和 成员方法, 而上面的内容则被编译到了BuildRenderTree方法中.

那么到了这里我们大概知道了这个简单的HomePage都有什么玄机了. 我们也大概知道了Blazor的语法, 也知道其实我们所有的页面最终都会是一个Componet.

那么什么是Componet呢? 在这里并不想过多的去笔墨介绍这个概念. 如果你是一个Vue或者React的开发, 你应该对这个模块化开发不陌生. 一个Componet, 就是满足一定的功能, 有自己的属性, 状态. 可以展示特定数据的元素.

就如同我们这里的SurveyPrompt, 接受一个Title属性,并且负责把他展示成这样子

数据驱动? Blazor的刷新和绑定机制初探

现在我们知道了一个简单的页面是如何渲染出来的. 那么让我们打开Counter这个配置来看一看. 数据是如何交互的

我们第二个page张这样子

有一个button, 大声的叫我们点它. 当我们点击的时候. 上面的current count 变成了 1

这一切是怎么发生的呢? 以下是Counter.cshtml的代码

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button @onclick(IncrementCount)>Click me</button>

@functions {

int currentCount = 0;

void IncrementCount()

{

currentCount++;

}

}

我们看到 这个页面非常简单, 我们定义了一个CurrentCount的Field, 然后在IncreaseCount方法里给它加一. 一个叫Click me的button标签里 有一个@onclick方法, 将IncreaseCount作为参数

Counter.cshtml编译后的代码张这样

#pragma checksum "/Users/pzhi/SCM/gitHub/zhipu123/BlazorDemo/Pages/Counter.cshtml" "{ff1816ec-aa5e-4d10-87f7-6f4963833460}" "05ad2dd449cbc9f09f8b759e1f06e7eb5e9583b4"

// <auto-generated/>

#pragma warning disable 1591

namespace BlazorDemo.Pages

{

#line hidden

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using System.Net.Http;

using Microsoft.AspNetCore.Blazor;

using Microsoft.AspNetCore.Blazor.Components;

using Microsoft.AspNetCore.Blazor.Layouts;

using Microsoft.AspNetCore.Blazor.Routing;

using BlazorDemo;

using BlazorDemo.Shared;

[Microsoft.AspNetCore.Blazor.Layouts.LayoutAttribute(typeof(MainLayout))]

[Microsoft.AspNetCore.Blazor.Components.RouteAttribute("/counter")]

public class Counter : Microsoft.AspNetCore.Blazor.Components.BlazorComponent

{

#pragma warning disable 1998

protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)

{

base.BuildRenderTree(builder);

builder.OpenElement(0, "h1");

builder.AddContent(1, "Counter");

builder.CloseElement();

builder.AddContent(2, "\n\n");

builder.OpenElement(3, "p");

builder.AddContent(4, "Current count: ");

builder.AddContent(5, currentCount);

builder.CloseElement();

builder.AddContent(6, "\n\n");

builder.OpenElement(7, "button");

builder.AddAttribute(8, onclick(IncrementCount));

builder.AddContent(9, "Click me");

builder.CloseElement();

builder.AddContent(10, "\n\n");

}

#pragma warning restore 1998

int currentCount = 0;

void IncrementCount()

{

currentCount++;

}

}

}

#pragma warning restore 1591

我们看到 @onclick其实在这里就是执行了一个Component的一个方法onclick, 顾名思义,当这个Component被点击的时候就被调用. 我们的IncreaseCount被作为参数传给了它, 可见onclick会在被点击的时候执行IncreaseCount.

那么问题来了,当我们执行了IncreaseCount方法时, 页面怎么会知道要不要刷新? 是刷新整个页面还是刷新所有?

熟悉WPF的同学可能知道, 在WPF中如果我们需要让一个ViewModel可以被监听变化, 他就需要实现INotifyChanged事件. 那么同样道理, 我们的这个IncreaseCount可能也是类似的吗?

然而基于编译后的代码我们可以发现 CurrentCount作为我们Counter这个类的Field, 并没有任何机会高速Page自己变化了. 而且这个Field非常普通,也不是什么WPF中的DP, 所以到目前为止变化是怎么通知的.并没有一个合理的解释. 后面的时间里我会尝试阅读Blazor的代码搞清楚这件事情.

第一个问题画个问号, 那么第二个问题呢?

打开浏览器工具, 定位到button, 再次点击button观察dom的反应.

我们看到 在点击Button的时候, button上面的<p>标签闪动了, 说明它被刷新了, 而其他标签并没有. 所以局部刷新的功能是有的. 效率问题不用担心了.

编辑Click me, 把他的内容变成 "点击我", 再次点击按钮, 我们看到还是只有p变, 而且button也没有变回原来的内容

所以我们知道, 这个局部刷新不是简单的拿Dom作比较, 肯定是有Virtual Dom的机制在里面.

星星之火,可燎原?

在简单的尝试了Blazor之后, 还是很兴奋的. 可以看到Blazor是一个初具规模的产品. 我们C#开发可以用Blazor在今后写前端渲染的网页了!

我很期望这样一个产品能够持续的演进下去.

就目前版本看(0.1.0), Blazor尚不能应用到产品中. 主要还是有以下的原因

  • 打包大小太大, 1.8M的大小对于网站简直是致命的.

  • 产品还不成熟, 现在Component还只能支持简单的事件, 笔者测试的时候只有onclick,onchange.

  • 兼容性差,使用了WebAssembly,就注定了两年前的浏览器必定不能支持.

当然我们还是不能否认, Blazor为如何让更多语言进入前端世界打开了一扇新的大门. 也许未来JavaScript将不仅仅是前端唯一可以使用的利器. 我们会看到C/C++, Python, Java写的前端渲染页面也不一定呢.

当然在后端语言打入前端世界的道路上, WebAssembly也未必是唯一的路劲, 比如Scala.js就完全使用了js重写了Scala的库函数, 类似的还有Kotlin.js. 可以看到虽然JavaScript已经非常Fancy了,但是后端程序员们进军前端的热情可谓从未停歇过啊.

祝dotnet的应用越来越广, 祝广大后端程序员们新年成就慢慢, 加薪升职.

原文： https://www.cnblogs.com/Gerryz/p/get-start-with-dotnet-blazor.html

.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com

来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor相关推荐

  1. 开包即食的教程带你浅尝最新开源的C# Web引擎Blazor

    在今年年初,恰逢新春佳节临近的时候.微软给全球的C#开发者们,着实的送上了一分惊喜.微软正式开源Blazor,将.NET带回到浏览器.      这个小惊喜,迅速的在dotnet开发者中间传开了.20 ...

  2. 上周热点回顾（3.19-3.25）

    热点随笔: · 不谈面试题,谈谈招聘时我喜欢见到的特质(dino.c) · ASP.NET Core 2.0 : 七.一张图看透启动背后的秘密(FlyLolo) · 用Node.js写爬虫,撸羞羞的图 ...

  3. canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战

    H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...

  4. TDSCDMA手机N270 新邮通开包尝鲜！

    转自我和讯的博客 WindowsMobile.blog.hexun.com! 说在前面,TD应该是国人骄傲,这里只是扯一些实际情况,供实际的人参考.并不是讥讽和嘲笑,如果你非那么认为我也没有办法.本人 ...

  5. 真机开包！国产至强5600服务器35张图赏

    "看,来了件大家伙!"小编的目光都集中到了一件牛皮大纸箱上,这难道就是传说中的装备了今年3月份刚刚发布的Intel至强5600处理器的曙光I620r-G机架式服务器?     一. ...

  6. vultr 云主机收不到来自客户端的udp数据包

    问题:vultr 云主机收不到来自客户端的udp数据包 解决方案: 1.登录vultr云主机管理后台,https://my.vultr.com/,点击左侧菜单栏中servers,会看到类似于如下的界面 ...

  7. （开包即用，不用看代码！）借助Docker自动构建Java(Oracle)镜像

    开包即用,不用看代码! 如果着急使用可以直接使用我构建的镜像,请从配置镜像源开始看 Docker中的Java Java可能是程序员最常用的运行时环境了, 即使你不开发Java程序,大量的开发工具也需要 ...

  8. Python:函数的参数、混搭、开包

    一.位置参数 def calc(a, b, c):print(a*a + 2*b +c) calc(3, 5, 8) #27 位置参数适合参数少的情况,当参数较多时,位置容易存错. 二.关键词参数 d ...

  9. 容我喝一杯82年java_开罐即食哦，当土豪只剩一双手时，奋豆只想喝杯82年白开水压压惊...

    导语:本次的文章主要想讲述的故事内容是在冬瓜小学里,古老师带着学生们一起来到冬瓜山上露营啦.古老师.星太奇和小桂子他们都各自带了一些干粮过来,虽然吃起来没有家里现煮的好吃,但为了方便也是能接受的,不过 ...

最新文章

  1. OKR不但是目标管理工具，也是沟通工具
  2. FFmpeg被声明为已否决的解决方案
  3. ashx PHP文件 优劣,.NET_后缀为 ashx 与 axd 的文件区别浅析，唯一不同的地方是：axd扩展名 - phpStudy...
  4. NuGet.org服务管理变更，提升中国用户体验
  5. 创建和应用Java包文件的两种方式(转)
  6. bytes数组转string指定编码_一篇文章弄懂Python中所有数组数据类型
  7. Spring AOP事务管理（使用切面把事务管理起来）
  8. 互联网日报 | 2月22日 星期一 | 小米回应造车传闻；吉利确认组建全新纯电动汽车公司；沈腾成中国影史首位200亿票房演员...
  9. 感谢前任程序员赏饭吃！
  10. nutzwk运行后wk-web中生成ehcache.disk.store.dir有什么用,怎么去掉
  11. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_3.RabbitMQ研究-工作原理...
  12. 七年为限 一觉梦已远——我与你的新贵族
  13. python row column_将rowcolumnvalue数据转换为数组numpy
  14. Windows实现内外网同时使用
  15. 启动gis管理器显示无法启动服务器,mapgis狗不能启动,提示是服务器启动失败,是怎么回事?...
  16. 阿里巴巴矢量图标库使用在线字体图标
  17. 成分句法分析依存文法分析
  18. 阿里云邮箱企业版产品知识库
  19. cent怎么读(centre怎么读)
  20. 怎么把一张暗的照片调亮_PS怎么把一张暗的图调亮,就局部

热门文章

  1. python面试题~反射，元类，单例
  2. 光纤熔接过程详细说明
  3. Oracle数据库-主键（primary key）、外键（foreign key）、候选键（candidate key）、超键（super key）和references总结...
  4. （译）元素浮动的那些事儿
  5. 鸟哥学习笔记---网络驱动器设备iSCSI
  6. RabbitMQ有5种工作模式
  7. 理论修炼之RabbitMQ，消息队列服务的稳健者
  8. Newbe.Claptrap 0.10.2 发布，Blazor 演示
  9. Dotnet的垃圾回收
  10. 庐山真面目之一 微服务的简介和技术栈