上一個

下一個

Razor 元件

已完成

您已設定了開發環境，現在讓我們探索 Blazor 專案的結構並了解 Blazor 元件的運作方式。

首頁

應用程式的首頁是由位於 Components/Pages 目錄內的 Home.razor 檔案所定義。 Home.razor 包含下列程式碼：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

頂端的 @page 指示詞會指定此頁面的路由，讓使用者瀏覽至應用程式的根目錄時會顯示 Home 元件。 PageTitle 標籤是 Blazor 元件，可設定目前頁面的標題，使其顯示在瀏覽器索引標籤中。檔案的其餘部分是定義頁面內容的一般 HTML。

什麼是 Razor？

Razor 是以 HTML 和 C# 為基礎的標記語法。 Razor 檔案 (.razor) 包含一般 HTML，然後包含 C# 來定義任何轉譯邏輯，例如條件式、控制流程和運算式評估。 然後，Razor 檔案會編譯為 C# 類別，以封裝元件的轉譯邏輯。

什麼是 Razor 元件？

如果您探索 Blazor 專案中的檔案，則可以看到組成專案的大部分檔案都是 .razor 檔案。 在 Blazor 中，Razor 檔案會定義可重複使用的元件，構成應用程式 UI 的一部分。 元件會定義要轉譯的 HTML，以及如何處理使用者事件。

在編譯時，每個 Razor 元件都內建於 C# 類別中。 類別可能包含常見的 UI 項目，例如狀態、轉譯邏輯、生命週期方法與事件處理常式。 由於以 Razor 撰寫的 Blazor 元件只是 C# 類別，因此您可以從元件使用任意的 .NET 程式碼。

使用元件

若要從另一個元件使用元件，您可以使用符合元件名稱的名稱來新增 HTML 樣式標籤。 例如，如果您有名為 MyButton.razor 的元件，則可以藉由新增 <MyButton /> 標籤，將 MyButton 元件新增至另一個元件。

元件參數

元件也可以具有參數，可讓您在使用元件時將資料傳遞至元件。 元件參數是藉由將公用 C# 屬性新增至具有 [Parameter] 屬性的元件來定義。 然後，您可以使用符合屬性名稱的 HTML 樣式屬性來指定元件參數的值。 參數的值可以是任何 C# 運算式。

@code 區塊

Razor 檔案中的 @code 區塊可用來將 C# 類別成員 (欄位、屬性和方法) 新增至元件。 您可以使用 @code 來追蹤元件狀態、新增元件參數、實作元件生命週期事件，以及定義事件處理常式。

試用計數器

在執行中的應用程式中，按一下左側側邊欄中的 [計數器] 索引標籤，以瀏覽至 [計數器] 頁面。 應該會顯示下列頁面:

選取 [按我] 按鈕，以在不重新整理頁面的情況下讓計數遞增。 網頁中的計數器遞增通常需要撰寫 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 會遞增。
• 元件會轉譯以顯示更新的計數。

繼續