學習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，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506459.html
標籤：ASP.NET
上一篇：C二進制檔案處理