Blazor 修仙之旅 – 組件與數據綁定_網頁設計

※推薦評價好的iphone維修中心

擁有專業的維修技術團隊,同時聘請資深iphone手機維修專家,現場說明手機問題,快速修理,沒修好不收錢

一.前言

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

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

二.組件

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

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

左側導航菜單組件:

在主布局組件中應用了導航菜單組件:

更多關於組件的資料請查閱官方文檔:創建和使用 ASP.NET Core Razor 組件

三.數據綁定

1.介紹

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

@bind 是區分大小寫的,例如:@BIND@Bind 都是錯誤的,下面寫了一個例子,將 CurrentValue 綁定到兩個文本框中。

<div class="row">
    <div class="col-6">
        <input class="form-control" type="text" @bind="CurrentValue" />
    </div>
    <div class="col-6">
        <input class="form-control" type="text" @bind="CurrentValue" />
    </div>
</div>

<div class="row">
    <button class="btn btn-primary" @onclick="ChangeValue">變 更</button>
</div>

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

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

需要注意的是在文本框的綁定中,僅當呈現組件時,UI才會更新文本框,而不響應於更改屬性的值。由於組件是在事件處理程序代碼執行后呈現的,因此屬性更新通常在觸發事件處理程序后立即反映在UI中。

@bind="CurrentValue" 等同於以下代碼:

<input value="@CurrentValue"
    @onchange="@((ChangeEventArgs __e) => CurrentValue = 
        __e.Value.ToString())" />
        
@code {
    public int CurrentValue { get; set; } = 0;
}

點擊按鈕,變更了值,也會應用到文本框中:

網頁設計最專業,超強功能平台可客製化

窩窩以「數位行銷」「品牌經營」「網站與應用程式」「印刷品設計」等四大主軸,為每一位客戶客製建立行銷脈絡及洞燭市場先機。

2.變更綁定事件

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

<div class="col-6">
    <input class="form-control" type="text" @bind="CurrentValue" @bind:event="oninput" />
</div>
<div class="col-6">
    <input class="form-control" type="text" @bind="CurrentValue" @bind:event="oninput" />
</div>

3.輸入錯誤的值

我們設置的 CurrentValue 的類型是 int ,如果我們輸入字母,那麼字母將不會被接受,同時值會恢復到輸入前的正確值。

4.子父組件數據傳遞

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

(1)父傳子

新建一個子組件命名為 ChildComponent

<div class="row">
    <h2>子組件</h2>
</div>

<div class="row">
    <span>Year: </span> <input class="form-control" type="text" value="@Year" />
</div>

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

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }
}

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

新建一個父組件命名為ParentComponent

<div class="row">
    <h2>父組件</h2>
</div>

<div class="row">
    <span>ParentYear: </span> <input class="form-control" type="text" @bind="ParentYear" @bind:event="oninput"/>
</div>

<ChildComponent @bind-Year="ParentYear" />

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

在頁面中引用父組件:

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

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

<ChildComponent @bind-Year="ParentYear" /> 等同於 <ChildComponent @bind-Year="ParentYear" @bind-Year:event="YearChanged" /> ,如果使用後者,那麼事件命名將不會受約定命名限制。

運行效果:

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

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

<div class="row">
    <h2>子組件</h2>
</div>

<div class="row">
    <span>Year: </span> <input class="form-control" type="text" @oninput="OnYearChanged" value="@Year" />
</div>

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

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }

    private Task OnYearChanged(ChangeEventArgs e)
    {
        Year = int.Parse(e.Value.ToString());

        return YearChanged.InvokeAsync(Year);
    }
}

運行:

四.資料

  • 本文Demo

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

台北網頁設計公司這麼多該如何選擇?

網動是一群專業、熱情、向前行的工作團隊,我們擁有靈活的組織與溝通的能力,能傾聽客戶聲音,激發創意的火花,呈現完美的作品