開始使用 ASP.NET Core

本教學課程示範如何使用 .NET CLI 建立、執行及修改 ASP.NET Core Blazor Web App 。 Blazor 是 .NET 前端 Web 架構，支援單一程序設計模型中的伺服器端轉譯和客戶端互動。

您將瞭解如何：

• 建立 Blazor Web App。
• 執行應用程式。
• 變更應用程式。
• 關閉應用程式。

Prerequisites

在 下載 .NET 時取得並安裝最新的 .NET SDK。

建立 Blazor Web App

開啟命令提示字元到範例程式的適當位置，並使用下列命令建立 Blazor Web App。 選項 -o|--output 會建立資料夾，並將專案 BlazorSample命名為 ：

dotnet new blazor -o BlazorSample

執行應用程式

使用下列命令將目錄變更為 BlazorSample 資料夾：

cd BlazorSample

命令會 dotnet watch 執行應用程式，並將預設瀏覽器開啟至應用程式的登陸頁面：

dotnet watch

使用應用程式的側欄導覽，瀏覽 [計數器] 頁面，您可以在其中選取 Click me 按鈕來遞增計數器。

變更應用程式

讓瀏覽器保持開啟，並載入 [計數器] 頁面。 藉由使用 dotnet watch 命令執行應用程式，您可以變更應用程式的標記和程序代碼，而不需要重建應用程式以反映瀏覽器中的變更。

在專案中渲染計數器網頁的元件位於 Counter。 Razor 是結合了 HTML 標記與 C# 程式碼的語法，專為開發人員的生產力而設計。

在文本編輯器中開啟Counter.razor檔案，並記錄幾行有趣的內容，這些行呈現了內容並使元件的計數器功能正常作用。

Components/Pages/Counter.razor：

@page "/counter"

<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"

頁面的標題是由 <PageTitle> 標記所設定：

<PageTitle>Counter</PageTitle>

隨即顯示 H1 標題：

<h1>Counter</h1>

paragraph 元素 （<p>） 會顯示目前計數，其儲存在名為 的 currentCount變數中：

<p role="status">Current count: @currentCount</p>

按鈕（<button>）可讓使用者遞增計數器，這會在按一下按鈕時執行名為 IncrementCount的 C# 方法。

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

區塊 @code 包含元件執行的 C# 程式代碼：

• 計數器變數 currentCount 是以零的初始值建立的。
• 方法 IncrementCount 已定義。 方法內的程式代碼會在每次叫用 方法時，以一個遞增 currentCount 變數。

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

讓我們變更在 IncrementCount 方法中計數器的遞增。

變更這一行，讓 currentCount 在每次呼叫 IncrementCount 時遞增 10。

- currentCount++;
+ currentCount += 10;

儲存檔案。

一旦您儲存盤案，就會自動更新執行中的應用程式，因為您使用 dotnet watch 命令。 返回至瀏覽器中的應用程式，然後在計數器頁面中按下 Click me 按鈕。 見證計數器如何從其現有值 1 遞增至 11 的值。 每次選取按鈕時，值就會遞增 10。

在選取「點擊我」按鈕一次後，呈現計數器頁面，顯示計數器遞增至十一。

關閉應用程式

請遵循下列步驟：

• 關閉瀏覽器視窗。
• 若要關閉應用程式，請在命令殼層中按 Ctrl+C 。

Congratulations! 您已成功完成本教學課程。

後續步驟

在本教程中，您將學到如何：

• 建立 Blazor Web App。
• 執行應用程式。
• 變更應用程式。
• 關閉應用程式。

若要深入瞭解 ASP.NET Core 的基本概念，請參閱下列各項：

ASP.NET 核心基本概觀

額外教學

應用程式類型	Scenario	Tutorials
Web 應用程式	使用新的伺服器和用戶端 Web 開發 Blazor	Blazor 開發電影資料庫應用程式（概觀）
網路應用程式介面	使用最少 API 的伺服器型數據處理	教學課程：使用 ASP.NET Core 建立最小 API
遠端程序呼叫（RPC）應用程式	使用通訊協定緩衝區的合約優先服務	在 ASP.NET Core 中建立 .NET gRPC 用戶端和伺服器
即時應用程式	伺服器/用戶端雙向通訊	ASP.NET Core SignalR 使用者入門

其他資源

• .NET 簡介
• Visual Studio
• Visual Studio 程式碼
• .NET 開發人員社群
• .NET 直播電視