通過Blazor使用C#開發SPA單頁面應用程序(1) - 簡介及特點
通過Blazor使用C#開發SPA單頁面應用程序(2) - 開發環境
通過Blazor使用C#開發SPA單頁面應用程序(3) - 基礎知識
通過Blazor使用C#開發SPA單頁面應用程序(4) - Ant Design Button
今天我們來看看Blazor開發的一些基本知識。
一、Blazor組件結構
Blazor中組件的基本結構可以分為3個部分，如下所示：
//Counter.razor
//Directives section 指令部分 @page "/counter" //Razor HTML section Razor HTML部分 <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> //code sections 功能部分 @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
指令部分：
- 路由 - @page
- DI - @inject
- 導入庫 - @using
Razor HTML 部分：
Razor HTML語法是C＃代碼與HTML的結合。此部分最終在瀏覽器中呈現。
指令部分：
組件中的函數部分包含用戶操作函數（事件方法），局部變量和從/向父/子組件傳遞的屬性。
當然如果願意，這部分也可以單獨寫道類文件中。
二、Blazor的屬性和參數
我們看看屬性和參數，
<button id="btnClickMe" class="btn btn-primary" onclick="@IncrementCount">Click me</button>
在這里，在按鈕元素的id，class和onclick被稱為HTML屬性。
類似地，組件的定義方式與HTML元素相同，
@page "/myDome" <h3>MyDemo</h3> <ChildComponent Title="來自MyDemo"></ChildComponent>
在Child Component中，該屬性Title與裝飾的子組件函數部分中的屬性匹配 [Parameter] 關鍵字。
//ChildComponent.razor
//Child Component <div> <p>標題 : @Title</p> </div> @code { [Parameter] private string Title { get; set; } }
運行效果如下:
三、Blazor的數據綁定
Blazor的數據綁定同時提供了單向綁定和雙向綁定兩種機制。
（一）單向綁定：
單向綁定在Blazor中簡單直接，無需任何UI刷新。還記得Counter示例嗎，他顯示了單向數據綁定，
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button> @code { int currentCount = 0; void IncrementCount() { currentCount++; } }
此處 @currentCount 值根據點擊按鈕的數量遞增Click me。<p>標記元素中的值會自動刷新，無需任何組件刷新。
（二）雙向綁定：
在Blazor中可以實現雙向綁定，與一些流行的JS語言框架相比，Blazor為雙向綁定提供了多種實現方式，Blazor可以優雅地進行編寫。
(1) @bind屬性在Blazor中提供雙向數據綁定。下面的示例復選框演示在同一組件中的bind屬性，
@page "/myDome" <span>請選擇:</span> <input type="checkbox" @bind="myChecked" /> <p>我選擇了 : @myChecked.ToString()</p> @code { bool myChecked { get; set; } = true; }
運行效果如下，是不是很簡單，很優雅。
再來一個控制樣式表的例子看看,
@page "/myDome" <p> <span>顯示/隱藏:</span> <input type="checkbox" @bind="myChecked" /> </p> <p style="display:@(myChecked ? "inline":"none")">看到我了</p> @code { bool myChecked { get; set; } = true; }
(2) @bind屬性在Blazor中提供雙向數據綁定，但是只提供了默認的綁定事件，如果們想在不同的時機觸發雙向綁定該怎么辦呢，別急同樣很簡單的，我們看看下面的代碼，展示了幾種綁定實例，
@page "/myDome" <p> <span>onchange 方式一</span> <input @bind="changeString" /> </p> <p> <span>onchange 方式二</span> <input type="text" value="@changeString" @onchange="@((UIChangeEventArgs _e) => changeString = _e.Value.ToString())" /> </p> <p> <span>onchange 方式三</span> <input @bind-value="changeString" @bind-value:event="onchange" /> </p> <p> <span>oninput</span> <input @bind-value="changeString" @bind-value:event="oninput" /> </p> <p>這是我輸入的內容: @changeString</p> @code { string changeString = ""; }
運行效果如下，
呈現組件時, input元素value的值來自changeString。 當用戶在文本框中鍵入內容並離開時, 將觸發事件onchange更改changeString的值。原則上, @bind將表達式的當前值value與changeString相關聯, 並使用注冊的處理程序來處理更改。
除了使用@bind語法處理onchange事件之外, 還可以通過使用event參數 (@bind-value:event) 指定@bind-value屬性, 使用其他事件來綁定屬性或字段。例如第四個文本框就是綁定changeString采用oninput事件的屬性，以到達在文本框的值更改時激發。
（三）組件之間綁定：
(1)綁定可識別組件參數, @bind-{property}可在其中跨組件綁定屬性值。
//MyDemo.razor @page "/myDome" <h1>Parent Component</h1> <p>當前時間: @ParentNow</p> <hr /> <ChildComponent @bind-Now="ParentNow" /> <hr /> <button class="btn btn-primary" @onclick="@ChangeTheYear"> 更新當前時間 </button> @code { [Parameter] public DateTime ParentNow { get; set; } = DateTime.Now; private void ChangeTheYear() { ParentNow = DateTime.Now; } }
//ChildComponent.razor <h2>Child Component</h2> <p>當前時間: @Now</p> @code { [Parameter] public DateTime Now { get; set; } [Parameter] public EventCallback<DateTime> NowChanged { get; set; } }
以上代碼中，子組件 (ChildComponent) 具有一個Now組件參數和NowChanged回調參數，父組件MyDemo使用ChildComponent並將ParentNow參數從父級綁定到子組件上Now的參數上，如果通過點擊MyDemo中的"更新當前時間"按鈕來更改屬性的值, Now則將更新ChildComponent屬性，將新值呈現在 UI中。其中，參數Now是可綁定的, 因為它具有NowChanged與參數類型匹配的伴隨事件。按照約定，其等效於
<ChildComponent @bind-Now="ParentNow" @bind-Now:event="NowChanged" />
運行效果：
(2)組件之間傳遞的數據通過組件屬性及其屬性映射發生，此方法使用委托Action<T>類型。
//MyDemo.razor @page "/myDome" <h3>Parent Component</h3> <p>來自Child組件: @childString</p> <p> <input @bind="inputText" /> </p> <hr /> <ChildComponent ToChild="@inputText" FromChild="@ReceivedFromChild"> </ChildComponent> @code{ private string inputText = ""; private string childString = ""; private void ReceivedFromChild(string str) { childString = str; StateHasChanged(); } }
//ChildComponent.razor <h4>Child Component</h4> <p> <input @bind="inputText" /> <button @onclick="@PassToParent">顯示到Parent組件</button> </p> <p>來自Parent組件 : @ToChild</p> @code{ [Parameter] private string ToChild { get; set; } [Parameter] Action<string> FromChild { get; set; } private string inputText = ""; private void PassToParent() { FromChild(inputText); } }
這里FromChild是ChildComponent中的屬性，屬性使用Action<string>數據類型將值從Child傳遞給Parent Component。在Parent中，有相應的接收器函數ReceivedFromChild和字符串參數，這將在ChildComponent中按鈕單擊並觸發通知時觸發PassToParent，但是為了通知狀態已在父組件中更改，我們使用StateHasChanged()的內置Blazor函數通知組件其狀態已更改。
運行效果如下：
四、 生命周期方法
（1) OnInitializedAsync和OnInitialized方法，執行代碼來初始化組件。要執行異步操作，請在操作上使用OnInitializedAsync和await關鍵字。
（2）OnParametersSetAsync和OnParametersSet當組件已接收到的參數從其父和值被分配給屬性被調用。這些方法在組件初始化后以及每次呈現組件時執行。
（3）OnAfterRenderAsync並OnAfterRender在組件完成渲染后調用。此時填充元素和組件引用。使用此階段使用呈現的內容執行其他初始化步驟，例如激活對呈現的DOM元素進行操作的第三方JavaScript庫。
五、級聯值和參數
在某些情況下, 使用組件參數將數據從祖先組件流式傳輸到附屬組件是不方便的, 尤其是在有多個組件層時。 級聯值和參數通過提供一種方便的方法, 使上級組件為其所有子代組件提供值。 級聯值和參數還提供了一種方法來協調組件。
Blazor提供了一種在整個RenderTree（所有組件）中傳遞數據的方法，使用CascadingValue和CascadingParameter不需要傳遞作為組件屬性，並且可以通過裝飾屬性[CascadingParameter]而不用在RenderTree（子組件）中接收值[Parameter]。
//MyDemo.razor @page "/myDome" <p><span>姓名：</span><input @bind="@pName" /></p> <p><span>年齡：</span><input @bind="@pAge" /></p> <hr /> <CascadingValue Value="@pName" Name="ProfileName"> <CascadingValue Value="@pAge" Name="ProfileAge"> <ParentComponent /> </CascadingValue> </CascadingValue> @code { private string pName { get; set; } = "張三"; private int pAge { get; set; } = 35; }
//ParentComponent.razor <div style="background-color:darkgray"> <p>Parent Component</p> <div style="padding:10px;"> <ChildComponent /> </div> </div>
//ChildComponent.razor <div style="background-color:beige"> <p>Child Component</p> <p>輸入的 姓名： @Name , 年齡 : @Age.ToString()</p> </div> @code{ [CascadingParameter(Name = "ProfileName")] string Name { get; set; } [CascadingParameter(Name = "ProfileAge")] int Age { get; set; } }
代碼中MyDemo的姓名、年齡穿透ParentComponent直接級聯到ChildComponent中。
在這里CascadingParameter，Name參數必須與Name帶有CascadingValue組件的屬性匹配，如果我們沒有提到任何Name，則CascadingParameter中的變量類型與CascadingValue中的Value屬性匹配。
運行效果:
六、路由
我們在看一個SPA中一個基本但很重要的功能路由。客戶端路由可以通過使用@page指令裝飾組件來在Blazor中完成。
@page "/myDome" @page "/myDome/{text}"
@page在上面的示例中應用了兩個指令。
第一個允許在沒有參數的情況下導航到組件。
第二個@page指令采用{text}route參數並將值賦給Text屬性。
好了今天Blazor的組件開發就先學習到這，有意猶未盡的可以查看官方文檔深入學習。