學習ASP.NET Core Blazor程式設計系列二——第一個Blazor應用程式(下)

語言: CN / TW / HK

五、啟動第一個Blazor應用程式

8.按F5在調撥模式下執行這個應用程式或者按Ctrl+F5在不除錯模式下執行這個應用程式。

第一次在Visual Studio 2022 中執行Web應用程式時,它將為HTTPS託管該應用程式設定開發證書,會彈出兩個提示您信任證書的對話方塊,分別是“信任ASP.NET Core SSL證書”和“信任IIS Express 證書”。如下三個圖。我們建議您同意信任該證書,使用滑鼠點選“是”按鈕。證書將僅用於本地開發。

圖2-11

圖2-12

圖2-13

9.在兩個證書安裝完成之後,等待應用程式在瀏覽器中啟動。如果見到如下圖,證明第一個Blazor應用程式成功執行!

圖2-14

  • Visual Studio 2022 將啟動BlazorAppDemo.exe執行Blazor應用程式。注意,位址列顯示“localhost:埠”而不是域名(如www.cnblogs.com)。這是因為localhost是本地計算機的標準主機名。當Visual Studio 2022建立Web專案時,Web伺服器使用隨機埠。在上面的圖片中,埠號是7110。瀏覽器中的URL顯示“http://localhost: 7110/”。你執行應用程式時,可能會看到一個不同的埠號。

10.在Visual Studio 2022的解決方案資源管理器中,Pages\Index.razor檔案,開啟。程式碼如下。

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
 

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

11.在上面程式碼的最後一行後面,新增“測試熱過載功能 。”這一句話,儲存檔案之後,我們回到瀏覽器中,不停的按F5重新整理瀏覽器,無法檢視程式碼更改之後的結果。

12.在Visual Studio 2022的工具欄上,點選“熱載入”按鈕。如下圖中的紅框所示。

“熱過載”,可以編輯應用程式的程式碼檔案並將程式碼更改立即應用於正在執行的應用程式。 應用更改後,通過在應用中執行操作(或通過某種計時器等)再次重新執行程式碼並立即檢視更改;不需要通過斷點暫停應用!

圖2-15

13.不需要重新啟動應用程式,不需要重新整理瀏覽器,就可以檢視程式碼更改之後的結果。如下圖中。 

圖2-16