一.前言

在第一篇文章初嘗 Blazor WebAssembly中，有提到過組件(Component)這個概念。組件在 Blazor 中是必不可少的，UI 全靠它組裝起來，和前端的 JS 組件是一個意思，比如：vue component、react component 等等。借用官方文檔的描述：

Blazor 應(yīng)用是使用組件構(gòu)建的。組件是自包含的用戶界面 (UI) 塊，例如頁、對話框或窗體。組件包含插入數(shù)據(jù)或響應(yīng) UI 事件所需的 HTML Tag和處理邏輯。組件非常靈活且輕量。可在項目之間嵌套、重復(fù)使用和共享。

二.組件

組件一般以 .razor 為文件名后綴，且組件名必須以大寫字母開頭(猜測可能是和VUE里的命名限制一樣，表面和Html標簽名重復(fù))。

我們新建的項目，Shared 文件夾中就有三個組件：

左側(cè)導(dǎo)航菜單組件：

在主布局組件中應(yīng)用了導(dǎo)航菜單組件：

更多關(guān)于組件的資料請查閱官方文檔：創(chuàng)建和使用 ASP.NET Core Razor 組件

三.數(shù)據(jù)綁定

1.介紹

Razor 組件通過名為 @bind 的HTML元素屬性提供數(shù)據(jù)綁定功能，這個綁定是雙向的。

@bind ?是區(qū)分大小寫的，例如：@BIND、@Bind 都是錯誤的，下面寫了一個例子，將 CurrentValue 綁定到兩個文本框中。

變 更

@code
{
public int CurrentValue { get; set; } = 0;

private void ChangeValue()
{
CurrentValue ++;
}
}

需要注意的是在文本框的綁定中，僅當呈現(xiàn)組件時，UI才會更新文本框，而不響應(yīng)于更改屬性的值。由于組件是在事件處理程序代碼執(zhí)行后呈現(xiàn)的，因此屬性更新通常在觸發(fā)事件處理程序后立即反映在UI中。

@bind="CurrentValue" 等同于以下代碼：

@onchange="@((ChangeEventArgs __e) => CurrentValue =
__e.Value.ToString())" />

@code {
public int CurrentValue { get; set; } = 0;
}

點擊按鈕，變更了值，也會應(yīng)用到文本框中:

2.變更綁定事件

上面小節(jié)中，默認綁定了 onchange 事件，只有文本框失去焦點才會觸發(fā)，體驗不是很好，那么可不可以在輸入的時候就同步更新值呢，當然是可以的，解決方案就是變更綁定事件為 oninput，通過設(shè)置@bind:event屬性來變更綁定事件：

3.輸入錯誤的值

我們設(shè)置的 CurrentValue 的類型是 int ，如果我們輸入字母，那么字母將不會被接受，同時值會恢復(fù)到輸入前的正確值。

4.子父組件數(shù)據(jù)傳遞

在 vue、react 等 js 中，都有子父組件傳值概念，Blazor 也不例外。

(1)父傳子

新建一個子組件命名為 ChildComponent

子組件

Year:

@code {
[Parameter]
public int Year { get; set; }

[Parameter]
public EventCallback YearChanged { get; set; }
}

定義一個 Year 屬性和 EventCallback 類型的屬性 YearChanged

新建一個父組件命名為ParentComponent

父組件

ParentYear:



@code {
[Parameter]
public int ParentYear { get; set; } = 1978;
}

在頁面中引用父組件：

YearChanged 是一個約定命名，不能更改，更改將會報錯：

EventCallback 用于子父組件嵌套時公開事件，比如 YearChanged 就公開了子組件 Year 屬性的 changed 事件。父組件里，通過 @bind-Year 來綁定 Year 的 changed 事件，然后將父組件 ParentYear 的值傳遞過去，達成父級組件向子級組件傳遞值。

等同于 ，如果使用后者，那么事件命名將不會受約定命名限制。

運行效果：

(2)子傳父(鏈式綁定)

子傳父，無法直接通過 @bind 來實現(xiàn)，需要單獨指定事件處理程序和值，我們更改上面的子組件，定義一個 OnYearChanged 事件，并將其綁定到文本框的 oninput 事件，在事件里手動更新了 Year的值，并調(diào)用 YearChanged 來進行傳遞。

子組件

Year:

@code {
[Parameter]
public int Year { get; set; }

[Parameter]
public EventCallback YearChanged { get; set; }
private Task OnYearChanged(ChangeEventArgs e)
{
Year = int.Parse(e.Value.ToString());
return YearChanged.InvokeAsync(Year);
}
}

運行：

四.資料

• 本文Demo：https://github.com/stulzq/BlogDemos/tree/master/Blazor/Component%20and%20Data%20Binding

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的pb 更改dropdwonlistbox绑定数据_Blazor 修仙之旅 组件与数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。