入門
目的
使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式。
必要條件
完成時間
10-15 分鐘
情節
建立、使用及修改簡單計數器元件。
偏好使用 Visual Studio?
您可以改為嘗試我們的 Visual Studio 教學課程。
下載並安裝
若要開始組建 .NET 應用程式,請下載並安裝 .NET SDK。
檢查是否已正確安裝所有項目
安裝完成後,請開啟新命令提示字元,然後執行下列命令:
安裝完成後,請開啟 [新增] 終端,然後執行下列命令:
Command prompt
dotnet --version
如果安裝成功,您應該會看到輸出的版本 8.0.100 或更新版本:
如果一切順利,請選取下方的 [繼續] 按鈕以移至下一個步驟。
發生錯誤嗎?
如果您收到 ['dotnet' 無法辨識為內部或外部命令] 錯誤,請確定您已開啟新的命令提示字元。如果快速重新啟動您的機器無法解決問題,請使用 [我遇到問題] 按鈕以尋求解決問題的協助。
建立您自己的應用程式
在命令提示字元中,執行下列命令以建立您的應用程式:
Command prompt
dotnet new blazor -o BlazorApp
此命令會建立新的 Blazor 應用程式專案,並將其放置在目前位置中稱之為 BlazorApp
的新目錄中。
瀏覽至上一個命令所建立的新 BlazorApp
目錄:
Command prompt
cd BlazorApp
快速查看 BlazorApp
目錄的內容。
已在 BlazorApp
目錄中建立幾個檔案,為您提供已準備好執行的簡單 Blazor 應用程式。
Program.cs
是啟動伺服器以及您在其中設定應用程式服務與中介軟體之應用程式的進入點。
-
在 Components
目錄中:
App.razor
是應用程式的根元件。
Routes.razor
設定 Blazor 路由器。
Pages
目錄會包含應用程式的一些範例網頁。
BlazorApp.csproj
定義應用程式專案及其相依性。
Properties
目錄內的 launchSettings.json
檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號,並儲存在此檔案。
請記下 BlazorApp
目錄路徑,因為您稍後在教學課程中會用到它。
如果一切順利,請選取下方的 [繼續] 按鈕以移至下一個步驟。
發生錯誤嗎?
如果您收到類似的 無法建立 "Blazor Web App" 範本。拒絕存取路徑 'C:\Windows\System32\BlazorApp',請將您目前的目錄變更為您有權限建立新資料夾的目錄,然後嘗試重新執行命令。
若 Windows 在您嘗試建立專案時找不到 SDK,且您確定已安裝 SDK,您的電腦可能會發生 PATH 環境變數的問題。如需如何診斷及修正此問題的說明,請參閱這篇 Stack Overflow 文章。
如果您無法解決目前發生的問題,請選取下方的 [我遇到問題] 按鈕,以取得解決問題的協助。
執行您的應用程式
Command prompt
dotnet watch
dotnet watch
命令會建置並啟動應用程式,然後每當您變更程式碼時即會更新應用程式。您可以隨時選取 Ctrl+C 以停止該應用程式。
等待應用程式在 http://localhost:<port number> 上顯示正在聆聽,以及讓瀏覽器在該位址啟動。
一旦進入下一頁,即表示您已成功執行您的第一個 Blazor 應用程式!
顯示的頁面會由位於 Components/Pages
目錄中的 Home.razor
檔案定義。其內容看起來會像這樣:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
它已經包含將它設定為首頁的程式碼,並顯示文字 Hello, world!
和 Welcome to your new app
。PageTitle
元件會設定目前頁面的標題,以便顯示在瀏覽器的分頁中。
發生錯誤嗎?
如果您無法解決目前發生的問題,請選取下方的 [我遇到問題] 按鈕,以取得解決問題的協助。
嘗試計數器
在執行中的應用程式中,按一下左側提要欄位中的 [計數器] 索引標籤,瀏覽至 [計數器] 頁面。接著應該會顯示下列頁面:
選取 [按一下我] 按鈕以在不進行頁面重新整理的情況下遞增計數。在網頁中遞增計數器通常需要寫入 JavaScript,但若使用 Blazor,即可使用 C#。
您可以在 Components/Pages
目錄內的 Counter.razor
檔案中找到 Counter
元件的實作。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
瀏覽器中 /counter
的要求 (由頂端的 @page
指示詞指定) 會導致 Counter
元件轉譯其內容。
每次選取 [按我一下] 按鈕:
onclick
事件已引發。
- 已呼叫
IncrementCount
方法。
currentCount
為遞增。
- 呈現元件以顯示更新的計數。
新增元件
每個 .razor 檔案都會定義可重複使用的 UI 元件。
在文字編輯器中開啟 Home.razor
檔案。Home.razor
檔案已經存在,而且是在您執行 dotnet new
命令時所建立。它位於先前建立之 BlazorApp
目錄中的 Components/Pages
資料夾中。
在 Home.razor
檔案的結尾新增<Counter />
,以將 Counter
元件新增至應用程式的首頁。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
儲存此變更後,dotnet watch
命令即會將變更套用至執行中的應用程式,以便 Counter
元件可在首頁上顯示。
修改元件
元件參數會使用屬性或子內容指定,這讓您可設定子元件的內容。在Counter
元件上定義參數,以指定每次按下按鈕的遞增量:
- 為具有
[Parameter]
屬性的 IncrementAmount
新增公用屬性。
- 遞增
currentCount
的值時,請將 IncrementCount
方法變更為使用 IncrementAmount
。
下列程式碼會顯示如何實現。醒目提示的線條會顯示變更。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
在 Home.razor
中,更新 <Counter>
元素以新增IncrementAmount
屬性,該屬性會將遞增量變更為 10,如以下程式碼中醒目提示的行所示:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
Home
元件現在有自己的計數器,每當選取 [按我] 按鈕時,計數器就會以 10 遞增,如下列影像所示。/counter
的 Counter
元件 (Counter.razor
) 會繼續以 1 遞增。
後續步驟
恭喜,您已建置並執行您的第一個 Blazor 應用程式!
繼續學習
由於您已具備基本知識,請繼續在 Microsoft Learn (您將在其中建置待辦事項清單應用程式) 上使用 Blazor 自我引導式學習模組建置您第一個 Blazor 應用程式。
Microsoft Learn: 建置 Blazor 待辦事項清單應用程式
適用於初學者的 Blazor
了解如何從頭到尾建置完整的 Blazor 應用程式:
您可能也會想了解...