初探Blazor

by vivid 11. 七月 2018 12:16

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:
N180719701
出刊日期: 2018/7/11

目前若使用微軟開發技術來寫網站,你至少需要學會兩種程式語言,後端開發利用C#,前端則需撰寫JavaScript。Blazor是一個新的.NET網站框架(.NET web framework),以WebAssembly標準為基礎,可以取代以往使用JavaScript語言,而改用C# / Razor語法、HTML標籤以建立執行在瀏覽器上的用戶端應用程式,有了Blazor就可以讓程式設計師專注在一種程式語言,使用C# 語言進行全端開發(full stack web development)。Blazor是從這句話衍生出來的:

Browser + Razor = Blazor

WebAssembly(簡寫為Wasm)是二進位格式的指令,適用於stack-based 虛擬機器,應用於瀏覽器中,提供比JavaScript更快的編譯與執行速度,能讓開發者使用熟悉的程式語言來設計程式。目前Firefox、Chrome、Microsoft Edge、Safari瀏覽器都支援Wasm。詳細資訊可參考官網「https://webassembly.org/」的說明。

在撰寫此篇文章的時間點,Blazor目前尚屬於實驗階段的專案,在正式版發佈之前規格可能異動頻煩,因此尚不建議在正式專案中使用,本文的內容藉時也可能過期。

在這篇文章中,將要介紹如何在Visual Studio 2017開發工具中建立第一個Blazor網站。

安裝軟體

在本文撰寫的時間,Blazor內建在.NET Core 2.1版。需要更新開發工具與軟體版本如下:

l Visual Studio 2017 需更新到15.7以上版本。

l 下載並安裝 .NET Core 2.1 SDK或以上版本,本文範例使用NET Core 2.1.3 RC1版本(https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-rc1)。

l 下載 ASP.NET Core Blazor Language Services(https://marketplace.visualstudio.com/items?itemName=aspnet.blazor)。

Blazor原始程式碼亦開放置於Github,可參閱:「https://github.com/aspnet/Blazor」。

 

建立網站

開發環境安裝完成後便可以利用Visual Studio 2017開發工具來建立一個ASP.NET Core Web Applicaion。點選Visual Studio 2017開發工具的「File」-「New」-「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單 - 「Visual C#」程式語言,從「Web」分類中,選取「ASP.NET Core Web Application」,請參考下圖所示,設定專案名稱,如「MyBlazorDemo」,以及專案存放路徑後按下「OK」鍵:

clip_image002

圖 1:建立「ASP.NET Core Web Application」專案。

在「New ASP.NET Core Web Application」對話盒中,確認左上方的清單選取「.NET Core」,右上方的清單ASP.NET Core版本為「ASP.NET Core 2.0」或以上版本,選取下方的「Blazor」樣版專案,然後按下「OK」按鈕建立專案,請參考下圖所示:

clip_image004

圖 2:選取「Blazor」樣版專案。

新建立的範本網站結構如下圖所示,「Pages」資料夾用來存放元件(Component)程式碼;「Shared」資料夾用來存放共用的元件程式碼;「App.cshtml」用來設定路由;「global.json」用來進行組態設定;「Program.cs」檔案中包含一個「Main」方法,定義程式進入點:

clip_image006

圖 3:「Blazor」範本網站檔案結構。

基本上第一個Blazor網站便已經建立完成,「Pages」資料夾下的「Index.cshtml」是網站首頁。在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),Visual Studio開發工具便會自動啟動一個網站裝載程式(Web Host),請參考下圖所示:

clip_image008

圖 4:啟動網站裝載程式。

接著會啟動瀏覽器,可看到首頁如下圖所示:

clip_image010

圖 5:網站首頁執行結果。

「Pages」資料夾下的「Index.cshtml」檔案實作了Blazor元件(Blazor Component),首頁的內容只包含靜態HTML標籤如下列表:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />


 

「Pages」資料夾下的「Counter.cshtml」與「FetchData.cshtml」元件除了包含HTML標籤之外,還包含了使用C#語言撰寫的程式邏輯。

若在檢視「Index.cshtml」在瀏覽器中執行的結果,可以看到瀏覽器接收到以下標籤與程式碼,透過JavaScript(blazor.js)與「MyBlazorDemo.dll」組件來運行:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>MyBlazorDemo</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="_framework/blazor.js" main="MyBlazorDemo.dll" entrypoint="MyBlazorDemo.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.dll,System.Net.Http.dll" linker-enabled="true"></script>
</body>
</html>


「MyBlazorDemo.dll」組件預設會放在「專案\bin\Debug\netstandard2.0」資料夾之中。「MyBlazorDemo.Program」類別中的「Main」方法將會是程式的進入點。

 

建立Hello元件

一個Razor(*.cshtml)檔案定義一個Blazor元件(Blazor Component)。一個Blazor元件是一個.NET類別,定義一個可以在網頁中重複使用的Web使用者介面(Web UI)。

讓我們開始來試寫一個「Hello」元件,首先在專案中Pages資料夾加入一個「Razor View」,從「Solution Explorer」視窗 -「Pages」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,請參考下圖所示:

clip_image012

圖 6:建立新項目。

從「Add New Item」對話盒中,選取「Visual C#」-「ASP.NET Core」分類下的,「Razor View」項目,然後在下方將「Name」設定為「Hello.cshtml」最後按下「Add」按鈕,請參考下圖所示:

clip_image014

圖 7:在專案中加入「Razor View」項目。

在「Hello.cshtml」檔案中加入以下程式碼:

@page "/hello"
<h1> Hello </h1>
<p>
  Name :
  <input placeholder="Enter Your Name " bind="@myName" />
</p>
<br />
<p>
  Message : @msg
</p>
<button class="btn btn-primary" onclick="@SayHello"> Click me </button>
@functions {
  string myName;
  string msg;
  void SayHello()
  {
    msg = $"Hello {myName}";
  }
}

「Hello.cshtml」檔案第一行以「@page」指示詞開始。其後的字串定義了路由。也就是說「Hello」元件會負則處理瀏覽器送過來的「/hello」請求。

Hello元件使用標準的HTML標籤定義,程式處理邏輯則是使用Razor語法(使用C#語言)。HTML標籤與程式邏輯將會在編譯階段轉換成一個元件類別(Component Class),「Hello.cshtml」檔案的名稱就被拿來當做類別的名稱(不含附檔名)。以此例而言「Hello」元件的完整類別名稱為「MyBlazorDemo.Pages.Hello」,此類別將會自動繼承自「Microsoft.AspNetCore.Blazor.Components.BlazorComponent」類別。

「@functions」區塊中定義了「Hello」類別的成員與元件的邏輯,其中「myName」與「msg」將編譯成「private」欄位(Field),「SayHello」則變成方法,你也可以在其中撰寫事件處理程式碼。

你可以使用「@屬性名稱」或「@欄位名稱」語法來設定資料繫結,例如<input>欄位之中透過「bind="@myName"」attribute繫結到「myName」欄位:

<input placeholder="Enter Your Name " bind="@myName" />

或者直接使用「屬性名稱」或「欄位名稱」語法來設定資料繫結,例如以下範例程式碼:

<input placeholder="Enter Your Name " bind="myName" />

事件註冊的語法有點類似JavaScript,使用HTML attribute,例如以下範例程式碼註冊按鈕的「Click」事件觸發後,將會叫用「Hello」元件的「SayHello」方法:

<button class="btn btn-primary" onclick="@SayHello"> Click me </button>

 

元件測試

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下URL:

http://localhost:2505/hello

這個範例程式的執行結果參考如下圖所示,網頁中將會包含一個文字方塊,與一個按鈕:

clip_image016

圖 8:「Hello」元件。

只要在文字方塊中輸入名字,再按下按鈕就可以在下方看到歡迎訊息,請參考下圖所示:

clip_image018

圖 9:「Hello」元件執行結果。

使用元件

若有一個「ServerTime」元件程式如下列表:

<p>
  Server Time is : @t
</p>


@functions {
   string t = DateTime.Now.ToLongTimeString();
}


 

「ServerTime」元件不需要路由,而是提供功能讓其它元件來重複叫用,因此不需要在檔案上方加上「@page」指示詞來定義路由。同時,為了讓網站所有元件都可以使用到它,我們將「ServerTime.cshtml」檔案放在網站中「Shared」資料夾下。

接著修改「Hello.cshtml」檔案,加入「< ServerTime>」標籤,便可以使用「ServerTime」元件:

 

@page "/hello"
<h1> Hello </h1>
<p>
  Name :
  <input placeholder="Enter Your Name " bind="myName" />
</p>
<br />
<p>
  Message : @msg
</p>

<p>
  <ServerTime />
</p>
<button class="btn btn-primary" onclick="@SayHello"> Click me </button>
@functions {
string myName;
string msg;
void SayHello()
{
  msg = $"Hello {myName}";
}
}


選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。

在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下URL:

http://localhost:2505/hello

這個範例程式的執行結果參考如下圖所示:

clip_image020

圖 10:重複使用元件。

使用參數

元件可以設計參數,只要將參數定義成屬性,並在屬性前方套用「Parameter」Attribute,例如修改「ServerTime.cshtml」檔案,加入一個「format」屬性,用於設定時間顯示格式:

<p>
  Server Time is : @GetTime()
</p>


@functions {

[Parameter] string format { get; set; }


string GetTime()
{

  return DateTime.Now.ToString(format);
}

}


 

修改「Hello.cshtml」檔案,使用「ServerTime」元件時,利用HTML attribute「format="tt hh:mm:ss"」設定參數:

@page "/hello"
<h1> Hello </h1>
<p>
  Name :
  <input placeholder="Enter Your Name " bind="myName" />
</p>
<br />
<p>
  Message : @msg
</p>

<p>
  <ServerTime format="tt hh:mm:ss" />
</p>
<button class="btn btn-primary" onclick="@SayHello"> Click me </button>
@functions {
string myName;
string msg;
void SayHello()
{
  msg = $"Hello {myName}";
}
}

 

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下URL:

http://localhost:2505/hello

這個範例程式的執行結果參考如下圖所示:

clip_image022

圖 11:使用參數。

Tags:

.NET Core | C# | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List