使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式

Windows Linux macOS

嘗試計數器

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

[計數器] 頁面會顯示 [按我] 按鈕，以遞增頁面上顯示的計數。

選取 [按一下我] 按鈕以在不進行頁面重新整理的情況下遞增計數。在網頁中遞增計數器通常需要寫入 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 元件轉譯其內容。@rendermode 指示詞會啟用元件的互動式伺服器轉譯，以便它可以處理瀏覽器中的使用者介面事件。

每次選取 [按我一下] 按鈕:

  • onclick 事件已引發。
  • 已呼叫 IncrementCount 方法。
  • currentCount 為遞增。
  • 呈現元件以顯示更新的計數。
繼續