當前位置：首頁 > 编程语言 > C# >内容正文

C#

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

發布時間：2023/12/4 C# 38 豆豆

生活随笔收集整理的這篇文章主要介紹了来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在今年年初, 恰逢新春佳節臨近的時候. 微軟給全球的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對應的是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. 現在我們打開它的代碼

? ? <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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：快速搭建CentOS+ASP.NET C
下一篇： dotnet watch+vs code