閱讀須知：本文為入門介紹、指引文章，所示代碼皆為最簡易（或僅為實現功能）的演示示例版本，不一定切實符合個人（企業）實際開發需求。 一、DbContext生存期 DbContext 的生存期從創建實例時開始，併在釋放實例時結束。 DbContext 實例旨在用於單個工作單元。這意味著 DbContex ...
學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（上） 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（中） 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（下）
六 計數器頁面
14. 在瀏覽器中，通過滑鼠左鍵單擊左邊菜單欄中的“Counter”菜單，頁面進入到計數器頁面。如下圖。 
圖2-17
15.在瀏覽器的計數器頁面中，使用滑鼠左鍵單擊“Click me”按鈕，頁面中的“Current count:”從0，變為了1，在沒有刷新頁面的情況下增加了1。在以往的Web應用程式中，我們要實現不刷新頁面實現計數器功能，通常是通過編寫JavaScript來實現，但是在Blazor中可以使用C#來編寫這個功能。 
圖2-18
16. 在Visual Studio 2022的解決方案資源管理器中，找到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++;
}
}
上面的代碼中第一行是@page指令，這個指令在Blazor中是指定Razor組件直接處理請求的路由。瀏覽器的請求會通過這個@page指令設置的路由來處理請求。
<PageTitle> 設置頁面的標題。
@code指令是在Razor組件中添加C#(欄位、屬性和方法)代碼，實現相應功能。例如上面的Razor組件中用@currentCount表示當前計數的數量，@code代碼塊中定義了currentCount 這個整數數量作為計數用。“Click me”按鈕的onclick事件觸發之後調用IncrementCount方法，該方法也可在@code代碼塊中找到。
17. 實際上每一個.razor文件都是一個可以重用的Razor UI組件。在Visual Studio 2022的解決方案資源管理器中，Pages\Index.razor文件，使用滑鼠雙擊此文件，在文本編輯器中打開。
18.在Index.razor文件的末尾添加＜Counter/＞元素，此元素表示將計數器組件添加到Index.razor頁面。代碼如下，註意紅色粗體部分。
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
測試熱重載功能 。
<Counter></Counter>
19.保存文件之後，我們回到瀏覽器中，使用滑鼠左鍵單擊左邊菜單欄中的“Home”菜單，頁面進入首頁，頁面上並沒有顯示“計數器”組件。我們不停的按F5刷新瀏覽器，同樣無法看到“計數器”組件。如下圖。
圖2-19
20.在Visual Studio 2022的工具欄上，點擊“熱載入”按鈕。然後回到瀏覽器中，我們發現“計數器”組件已經顯示在頁面中了。如下圖中的紅框所示。
圖2-20
21.在瀏覽器的首頁中，使用滑鼠左鍵單擊“Click me”按鈕，頁面中的“Current count:”從0，變為了1；再次點擊“Click me”按鈕，頁面中的“Current count:”從1，變為了2。這個計數變化的過程中沒有刷新頁面。 
圖2-21
22. Razor組件參數可以使用屬性或子內容來設定，方便設置Razor組件的參數。例如，我們要在“計數器”組件上定義一個參數，用於設置每次單擊按鈕時計數器組件增加值。通過以下二步來實現
第一，在@code代碼塊中添加一個公共屬性IncrementAmount，併在這個屬性上方添加[Parameter]特性。
第二，更改計數器的遞增方法currentCount，在每次遞增currentCount值時使用IncrementAmount。
具體代碼如下所示：
@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;
[Parameter]
publicint IncrementAmount { get; set; } = 1;
privatevoid IncrementCount()
{
currentCount += IncrementAmount;
}
}
23. 在Visual Studio 2022的解決方案資源管理器中，找到Pages\Index.razor文件，使用滑鼠雙擊此文件，在文本編輯器中打開。在Index.razor文件的＜Counter/＞元素處，添加IncrementAmount屬性，並將該屬性值更改5。代碼如下，註意粗體部分。
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
測試熱重載功能 。
<CounterIncrementAmount="5"></Counter>
24.在Visual Studio 2022的工具欄上，點擊“熱載入”按鈕。然後回到瀏覽器中，此時瀏覽器中正呈現的是剛纔我們瀏覽的首頁，使用滑鼠左鍵單擊“Click me”按鈕，頁面中的“Current count:”從2，變為了7，如下圖所示；再次點擊“Click me”按鈕，頁面中的“Current count:”從7，變為了12。 
圖2-22
25.在瀏覽器中，通過滑鼠左鍵單擊左邊菜單欄中的“Counter”菜單，頁面進入到計數器頁面。在瀏覽器的計數器頁面中，使用滑鼠左鍵單擊“Click me”按鈕，頁面中的“Current count:”從0，變為了1，而不是5。
