使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式
入門
目的
使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式。
必要條件
無。
macOS 12.0 或更新版本。
完成時間
10 至 15 分鐘 + 下載/安裝時間
情節
建立、使用及修改簡單計數器元件。
下載並安裝
如果您想要的話,也可以使用教學課程的命令列介面版本來開始使用 Blazor。
在安裝期間,應該選取 [ASP.NET 和 Web 開發] 工作負載 (上方的安裝連結已預先選取該選項)。
已經有 Visual Studio 2022 了嗎?
如果您已經有 Visual Studio 2022,請確認它是最新的,並已安裝必要的工作負載:
- 選取 Windows 鍵,輸入 Visual Studio 安裝程式,然後按 Enter 鍵。
- 如有提示,請允許安裝程式自行更新。
- 如果有 Visual Studio 2022 的更新,則會顯示 [更新] 按鈕。選取它以在修改安裝之前更新。此教學課程僅適用於 Visual Studio 2022 17.8 及更新版本。
- 尋找您的 Visual Studio 2022 安裝,然後選取 [修改] 按鈕。
- 如果尚未選取,請選取 [ASP.NET 和 Web 開發] 工作負載,然後選取 [修改] 按鈕。否則,只要關閉對話方塊視窗即可。
若要開始組建 .NET 應用程式,請下載並安裝 .NET SDK。
下載 .NET 8 SDK x64 (Intel)
下載 .NET 8 SDK Arm64 (Apple Silicon)
如果您使用的 Mac 上有 Apple M1 或 M2 晶片,則必須安裝 Arm64 版本的 SDK。
檢查是否已正確安裝所有項目
安裝完成後,請開啟 [新增] 終端,然後執行下列命令:
dotnet --version
如果安裝成功,您應該會看到輸出的版本 8.0.100 或更新版本:
8.0.100
如果一切順利,請選取下方的 [繼續] 按鈕以移至下一個步驟。
發生錯誤嗎?
如果您收到 [zsh: 找不到命令: dotnet] 錯誤,請確定您已開啟新的終端機視窗。如果您無法解決問題,請使用 [我遇到了問題] 按鈕以取得解決問題的說明。
如果您收到 [dotnet: 找不到命令] 錯誤,請確定您已開啟新的終端機視窗。如果您無法解決問題,請使用 [我遇到了問題] 按鈕以取得解決問題的說明。
建立您自己的應用程式
-
啟動 Visual Studio 並選取 [建立新專案]。
- 在 [建立新專案] 視窗中,在搜尋方塊上輸入 [Blazor],然後按 Enter。
-
選取 [Blazor Web 應用程式] 範本,然後選取 [下一步]。
- 在 [設定新專案] 視窗中,輸入 BlazorApp 為專案名稱,然後按一下 [下一步] 按鈕。
-
如果尚未選取,請在 [其他資訊] 視窗中,在 [Framework] 下拉式清單中選取 [.NET 8.0 (長期支援)],然後按一下 [建立] 按鈕。
建立 Blazor Web 應用程式時,您可以從各種選項中選取,例如是否啟用驗證、要啟用的互動式轉譯模式,以及您要互動的應用程式數量。對於此應用程式,請確定已選取預設值,如下所示:
- 驗證類型: 無
- 互動式轉譯模式: 伺服器
- 互動功能位置: 每一頁面/元件
您的專案已建立並載入 Visual Studio。使用 [方案總管] 查看專案的內容。
已建立數個檔案,為您提供一個已準備執行的簡單 Blazor 應用程式。
Program.cs
是啟動伺服器以及您在其中設定應用程式服務與中介軟體之應用程式的進入點。-
在
Components
目錄中:App.razor
是應用程式的根元件。Routes.razor
設定 Blazor 路由器。Pages
目錄會包含應用程式的一些範例網頁。
BlazorApp.csproj
會定義應用程式專案及其相依性,在方案總管中按兩下 BlazorApp 專案節點即可檢視。Properties
目錄內的launchSettings.json
檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號,並儲存在此檔案。
如果一切順利,請選取下方的 [繼續] 按鈕以移至下一個步驟。
在終端機中,執行下列命令以建立您的應用程式:
dotnet new blazor -o BlazorApp
此命令會建立新的 Blazor 應用程式專案,並將其放置在目前位置中稱之為 BlazorApp
的新目錄中。
瀏覽至上一個命令所建立的新 BlazorApp
目錄:
cd BlazorApp
快速查看 BlazorApp
目錄的內容。
ls
已在 BlazorApp
目錄中建立幾個檔案,為您提供已準備好執行的簡單 Blazor 應用程式。
Program.cs
是啟動伺服器以及您在其中設定應用程式服務與中介軟體之應用程式的進入點。-
在
Components
目錄中:App.razor
是應用程式的根元件。Routes.razor
設定 Blazor 路由器。Pages
目錄會包含應用程式的一些範例網頁。
BlazorApp.csproj
定義應用程式專案及其相依性。Properties
目錄內的launchSettings.json
檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號,並儲存在此檔案。
請記下 BlazorApp
目錄路徑,因為您稍後在教學課程中會用到它。
如果一切順利,請選取下方的 [繼續] 按鈕以移至下一個步驟。
執行您的應用程式
在 Visual Studio 中,按一下偵錯工具列中的 [開始偵錯] 按鈕 (綠色箭頭),以執行應用程式。
應用程式執行後,您即可按一下 [熱重新載入] 按鈕,將程式碼變更套用至執行中的應用程式。
您可以隨時按一下上方工具列中的 [停止]] 按鈕,以停止應用程式。
第一次在 Visual Studio 中執行 Web 應用程式時,它會設定開發憑證以透過 HTTPS 裝載應用程式,然後提示您信任該憑證。建議您同意信任憑證。該憑證只會用於本機開發,而且若沒有憑證,大部分的瀏覽器都會抱怨網站的安全性。
等候應用程式在瀏覽器中啟動。一旦您移至下列頁面,就已成功執行您的第一個 Blazor 應用程式!
在終端中,執行下列命令:
dotnet watch
dotnet watch
命令會建置並啟動應用程式,然後每當您變更程式碼時即會更新應用程式。您可以隨時選取 Ctrl+C 以停止該應用程式。
等待應用程式在 http://localhost:<port number> 上顯示正在聆聽,以及讓瀏覽器在該位址啟動。
等待應用程式在 http://localhost:<port number> 上顯示正在聆聽,然後開啟瀏覽器並瀏覽到該位址。
一旦進入下一頁,即表示您已成功執行您的第一個 Blazor 應用程式!
顯示的頁面會由位於 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
元件會設定目前頁面的標題,以便顯示在瀏覽器的分頁中。
發生錯誤嗎?
如果您收到錯誤訊息指出「您的連線不是私人的」,並出現錯誤碼 NET::ERR_CERT_INVALID,請嘗試重新啟動所有瀏覽器視窗,讓瀏覽器可以挑選新憑證,然後再次執行應用程式。
如果您無法解決目前發生的問題,請選取下方的 [我遇到問題] 按鈕,以取得解決問題的協助。
嘗試計數器
在執行中的應用程式中,按一下左側提要欄位中的 [計數器] 索引標籤,瀏覽至 [計數器] 頁面。接著應該會顯示下列頁面:
選取 [按一下我] 按鈕以在不進行頁面重新整理的情況下遞增計數。在網頁中遞增計數器通常需要寫入 JavaScript,但若使用 Blazor,即可使用 C#。
您可以在 Components/Pages
目錄內的 Counter.razor
檔案中找到 Counter
元件的實作。
@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
元件轉譯其內容。@rendermode
指示詞會啟用元件的互動式伺服器轉譯,以便它可以處理瀏覽器中的使用者介面事件。
每次選取 [按我一下] 按鈕:
onclick
事件已引發。- 已呼叫
IncrementCount
方法。 currentCount
為遞增。- 呈現元件以顯示更新的計數。
新增元件
每個 .razor 檔案都會定義可重複使用的 UI 元件。
在 Visual Studio 中開啟 Home.razor
檔案。Home.razor
檔案已經存在,而且它是您建立專案時建立的。它位於先前建立之 BlazorApp
目錄中的 Components/Pages
資料夾中。
在文字編輯器中開啟 Home.razor
檔案。Home.razor
檔案已經存在,而且是在您執行 dotnet new
命令時所建立。它位於先前建立之 BlazorApp
目錄中的 Components/Pages
資料夾中。
在 Home.razor
檔案的結尾新增<Counter />
,以將 Counter
元件新增至應用程式的首頁。
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
按一下 [熱重新載入] 按鈕,將變更套用至執行中的應用程式。Counter
元件隨即顯示在首頁上。
儲存此變更後,dotnet watch
命令即會將變更套用至執行中的應用程式,以便 Counter
元件可在首頁上顯示。
修改元件
元件參數會使用屬性或子內容指定,這讓您可設定子元件的內容。在Counter
元件上定義參數,以指定每次按下按鈕的遞增量:
- 為具有
[Parameter]
屬性的IncrementAmount
新增公用屬性。 - 遞增
currentCount
的值時,請將IncrementCount
方法變更為使用IncrementAmount
。
下列程式碼會顯示如何實現。醒目提示的線條會顯示變更。
@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,如以下程式碼中醒目提示的行所示:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
按一下 [熱重新載入] 按鈕,將變更套用至應用程式。Home
元件現在有自己的計數器,每當選取 [按我] 按鈕時,計數器就會以 10 遞增,如下列影像所示。/counter
的 Counter
元件 (Counter.razor
) 會繼續以 1 遞增。
Home
元件現在有自己的計數器,每當選取 [按我] 按鈕時,計數器就會以 10 遞增,如下列影像所示。/counter
的 Counter
元件 (Counter.razor
) 會繼續以 1 遞增。
後續步驟
恭喜,您已建置並執行您的第一個 Blazor 應用程式!
繼續學習
由於您已具備基本知識,請繼續在 Microsoft Learn (您將在其中建置待辦事項清單應用程式) 上使用 Blazor 自我引導式學習模組建置您第一個 Blazor 應用程式。
Microsoft Learn: 建置 Blazor 待辦事項清單應用程式
適用於初學者的 Blazor
了解如何從頭到尾建置完整的 Blazor 應用程式:
您可能也會想了解...