1. ASP.NET Core Blazor 簡介

Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架:

  • 使用 C# 代替 JavaScript 來創(chuàng)建豐富的交互式 UI。
  • 共享使用 .NET 編寫的服務器端和客戶端應用邏輯镣衡。
  • 將 UI 呈現(xiàn)為 HTML 和 CSS牧挣,以支持眾多瀏覽器,其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發(fā)可提供以下優(yōu)勢:

  • 使用 C# 代替 JavaScript 來編寫代碼斤贰。
  • 利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)佑淀。
  • 在服務器和客戶端之間共享應用邏輯耗拓。
  • 受益于 .NET 的性能拇颅、可靠性和安全性。
  • 始終高效支持 Windows乔询、Linux 和 macOS 上的 Visual Studio樟插。
  • 以一組穩(wěn)定、功能豐富且易用的通用語言竿刁、框架和工具為基礎來進行生成黄锤。

組件

Blazor應用基于組件 。 Blazor 中的組件是指 UI 元素们妥,例如頁面猜扮、對話框或數(shù)據輸入窗體。
組件是內置到 .NET 程序集的 .NET 類监婶,用來:

  • 定義靈活的 UI 呈現(xiàn)邏輯旅赢。
  • 處理用戶事件。
  • 可以嵌套和重用惑惶。
  • 可以作為 Razor 類庫NuGet 包共享和分發(fā)煮盼。
    組件類通常以 Razor 標記頁(文件擴展名為 .razor )的形式編寫。 Blazor 中的組件有時被稱為 Razor 組件 带污。 Razor 是用于將 HTML 標記與專為提高開發(fā)人員工作效率而設計的 C# 代碼結合在一起的語法僵控。 借助 Razor,可以使用 IntelliSense 支持在同一文件中的 HTML 標記和 C# 之間切換鱼冀。 Razor Pages 和 MVC 也使用 Razor报破。 與圍繞請求/響應模型生成的 Razor Pages 和 MVC 不同,組件專門用于處理客戶端 UI 邏輯和構成千绪。

以下 Razor 標記演示組件 (Dialog.razor )充易,該組件可以嵌套在另一個組件中:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

對話框的正文內容 (ChildContent) 和標題 (Title) 由在其 UI 中使用此組件的組件提供。 OnYes 是由按鈕的 onclick 事件觸發(fā)的 C# 方法荸型。
Blazor 使用 UI 構成的自然 HTML 標記盹靴。 HTML 元素指定組件,并且標記的特性將值傳遞給組件的屬性瑞妇。
在以下示例中稿静,Index 組件使用 Dialog 組件。 ChildContent 和 Title 由 <Dialog> 元素的屬性和內容設置辕狰。
Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

在瀏覽器中訪問父級 (Index.razor ) 時改备,將呈現(xiàn)該對話框:


瀏覽器中呈現(xiàn)的對話框組件

如果在應用中使用此組件,Visual StudioVisual Studio Code 中的 IntelliSense 可加快使用語法和參數(shù)補全的開發(fā)蔓倍。

組件呈現(xiàn)為瀏覽器文檔對象模型 (DOM) 的內存中表現(xiàn)形式绍妨,稱為“呈現(xiàn)樹” 润脸,用于以靈活高效的方式更新 UI。

Blazor WebAssembly

Blazor WebAssembly 是一個單頁應用框架他去,可用它通過 .NET 生成交互式客戶端 Web 應用毙驯。 Blazor WebAssembly 使用開放的 Web 標準(沒有插件或代碼轉換),適用于移動瀏覽器等各種新式 Web 瀏覽器灾测。

通過 WebAssembly(縮寫為 wasm )爆价,可在 Web 瀏覽器內運行 .NET 代碼。 WebAssembly 是針對快速下載和最大執(zhí)行速度優(yōu)化的壓縮字節(jié)碼格式媳搪。 WebAssembly 是開放的 Web 標準铭段,支持用于無插件的 Web 瀏覽器。

WebAssembly 代碼可通過 JavaScript(稱為 JavaScript 互操作性 或 JavaScript 互操作 )訪問瀏覽器的完整功能秦爆。 通過瀏覽器中的 WebAssembly 執(zhí)行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行序愚,沙盒提供的保護可防御客戶端計算機上的惡意操作。


Blazor WebAssembly 使用 WebAssembly 在瀏覽器中運行 .NET 代碼等限。 WebAssembly runs .NET code in the browser with WebAssembly.

生成 Blazor WebAssembly 應用并在瀏覽器中運行時:

  • C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集爸吮。
  • 該程序集和 .NET 運行時將被下載到瀏覽器。
  • Blazor WebAssembly 啟動 .NET 運行時并配置運行時望门,為應用加載程序集形娇。 Blazor WebAssembly 運行時使用 JavaScript 互操作處理 DOM 操作和瀏覽器 API 調用。

已發(fā)布應用的大谐镂蟆(其有效負載大小 )是應用可用性的關鍵性能因素桐早。 大型應用需要相對較長的時間才能下載到瀏覽器,這會損害用戶體驗厨剪。 Blazor WebAssembly 優(yōu)化有效負載大小哄酝,以縮短下載時間:

  • 中間語言 (IL) 鏈接器發(fā)布應用時,會從應用刪除未使用的代碼祷膳。
  • 壓縮 HTTP 響應陶衅。
  • .NET 運行時和程序集緩存在瀏覽器中。

Blazor 服務器

Blazor 將組件呈現(xiàn)邏輯從 UI 更新的應用方式中分離出來钾唬。 Blazor 服務器在 ASP.NET Core 應用中添加了對在服務器上托管 Razor 組件的支持。 可通過 SignalR 連接處理 UI 更新侠驯。

運行時處理從瀏覽器向服務器發(fā)送 UI 事件抡秆,并在運行組件后,將服務器發(fā)送的 UI 更新重新應用到瀏覽器吟策。

Blazor 服務器用于與瀏覽器通信的連接還用于處理 JavaScript 互操作調用儒士。


Blazor 服務器在服務器上運行 .NET 代碼,并通過 SignalR 連接與客戶端上的文檔對象模型進行交互 Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

JavaScript 互操作

對于需要第三方 JavaScript 庫和訪問瀏覽器 API 的應用檩坚,組件與 JavaScript 進行互操作着撩。 組件能夠使用 JavaScript 能夠使用的任何庫或 API诅福。 C# 代碼可以調用到 JavaScript 代碼,而 JavaScript 代碼可以調用到 C# 代碼拖叙。 有關詳細信息氓润,請參閱 ASP.NET Core Blazor JavaScript 互操作

代碼共享和 .NET Standard

Blazor 實現(xiàn) .NET Standard 2.0薯鳍。 .NET Standard 是正式的 .NET API 規(guī)范咖气,常見于 .NET 實現(xiàn)中。 .NET Standard 類庫可以在不同 .NET 平臺之間共享挖滤,例如 Blazor崩溪、.NET Framework、.NET Core斩松、Xamarin伶唯、Mono 和 Unity。

不適用于 Web 瀏覽器內部的 API(例如惧盹,訪問文件系統(tǒng)乳幸、打開套接字和線程處理)將引發(fā) PlatformNotSupportedException

其他資源

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末岭参,一起剝皮案震驚了整個濱河市反惕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌演侯,老刑警劉巖姿染,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異秒际,居然都是意外死亡悬赏,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門娄徊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闽颇,“玉大人,你說我怎么就攤上這事寄锐”啵” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵橄仆,是天一觀的道長剩膘。 經常有香客問我,道長盆顾,這世上最難降的妖魔是什么怠褐? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮您宪,結果婚禮上奈懒,老公的妹妹穿的比我還像新娘奠涌。我一直安慰自己,他們只是感情好磷杏,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布溜畅。 她就那樣靜靜地躺著,像睡著了一般茴丰。 火紅的嫁衣襯著肌膚如雪达皿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天贿肩,我揣著相機與錄音峦椰,去河邊找鬼。 笑死汰规,一個胖子當著我的面吹牛汤功,可吹牛的內容都是我干的。 我是一名探鬼主播溜哮,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼滔金,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了茂嗓?” 一聲冷哼從身側響起餐茵,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎述吸,沒想到半個月后忿族,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡蝌矛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年道批,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片入撒。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡隆豹,死狀恐怖,靈堂內的尸體忽然破棺而出茅逮,到底是詐尸還是另有隱情璃赡,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布献雅,位于F島的核電站碉考,受9級特大地震影響,放射性物質發(fā)生泄漏惩琉。R本人自食惡果不足惜豆励,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一夺荒、第九天 我趴在偏房一處隱蔽的房頂上張望瞒渠。 院中可真熱鬧良蒸,春花似錦、人聲如沸伍玖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窍箍。三九已至串纺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間椰棘,已是汗流浹背纺棺。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留邪狞,地道東北人祷蝌。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像帆卓,于是被迫代替她去往敵國和親巨朦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • Razor 是一種標記語法剑令,用于將基于服務器的代碼嵌入網頁中糊啡。 Razor 語法由 Razor 標記、C# 和 H...
    北極熊_yxy閱讀 2,515評論 0 1
  • Razor 頁面是 ASP.NET Core MVC 的一個新功能吁津,它可以使基于頁面的編碼方式更簡單高效棚蓄。 若要查...
    yanshouwang閱讀 7,234評論 0 5
  • 前端開發(fā)面試題 面試題目: 根據你的等級和職位的變化,入門級到專家級腺毫,廣度和深度都會有所增加癣疟。 題目類型: 理論知...
    怡寶丶閱讀 2,580評論 0 7
  • 人生最重要的事是規(guī)律的生活,健康的管理潮酒! 這本書讀后的感覺是讓眼前的迷霧一點點在散去睛挚,有的時候越是簡單的越是會讓自...
    vivi孕麻麻乖寶貝愛健康閱讀 310評論 0 0
  • 今年春晚,一身西服急黎,踩著小高跟扎狱,精神抖擻,腰身纖細的閆妮突破小鮮肉的重圍勃教,出現(xiàn)在熱搜榜火了淤击。誰曾想到這位48歲,曾...
    沉睡中的石頭閱讀 1,142評論 0 16