ASP.NET Core Blazor 資料繫結

本文說明 Blazor 應用程式中 Razor 元件和 DOM 元素的資料繫結功能。

繫結功能

Razor 元件會使用 @bindRazor 指示詞屬性搭配欄位、屬性或 Razor 運算式值，提供資料繫結功能。

下列範例會繫結：

• C# inputValue 欄位的 <input> 元素值。
• C# InputValue 屬性的第二個 <input> 元素值。

當 <input> 元素失去焦點時，其繫結欄位或屬性就會更新。

Bind.razor：

@page "/bind"

<PageTitle>Bind</PageTitle>

<h1>Bind Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
</p>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" />
    </label>
</p>

<ul>
    <li><code>inputValue</code>: @inputValue</li>
    <li><code>InputValue</code>: @InputValue</li>
</ul>

@code {
    private string? inputValue;

    private string? InputValue { get; set; }
}

只有在轉譯元件時，才會在 UI 中更新文字方塊，而不會在回應中變更欄位或屬性的值。 由於元件會在事件處理常式程式碼執行之後自行轉譯，因此欄位和屬性更新通常會在觸發事件處理常式之後立即在 UI 中反映。

為了示範如何以 HTML 撰寫資料繫結，下列範例會將 InputValue 屬性繫結至第二個 <input> 元素的 value 和 onchange 屬性 (change)。 下列範例中的第二個 <input> 元素是概念示範，並不是要建議您應如何在 Razor 元件中繫結資料。

BindTheory.razor：

@page "/bind-theory"

<PageTitle>Bind Theory</PageTitle>

<h1>Bind Theory Example</h1>

<p>
    <label>
        Normal Blazor binding: 
        <input @bind="InputValue" />
    </label>
</p>

<p>
    <label>
        Demonstration of equivalent HTML binding: 
        <input value="@InputValue" @onchange="@((ChangeEventArgs __e) =>
            InputValue = __e?.Value?.ToString())" />
    </label>
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

轉譯 BindTheory 元件時，HTML 的 value 會示範來自 InputValue 屬性的 <input> 元素。 當使用者在文字方塊中輸入值並變更元素焦點時，就會引發 onchange 事件，並將 InputValue 屬性設定為已變更的值。 實際上，程式碼執行會比較複雜，因為 @bind 會處理執行型別轉換的情況。 一般而言，@bind 會將運算式的目前值與 <input> 的 value 屬性產生關聯，並使用已註冊的處理常式處理變更。

包含 @bind:event="{EVENT}" 屬性搭配 DOM 事件做為 {EVENT} 預留位置，以繫結其他 DOM 事件上的屬性或欄位。 下列範例會在觸發元素的 oninput 事件 (input) 時，將 InputValue 屬性繫結至 <input> 元素的值。 不同於 onchange 事件 (change)，其會在元素失去焦點時引發，oninput (input) 會在文字方塊的值變更時引發。

Page/BindEvent.razor：

@page "/bind-event"

<PageTitle>Bind Event</PageTitle>

<h1>Bind Event Example</h1>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" @bind:event="oninput" />
    </label>
    
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

若要在繫結之後執行非同步邏輯，請使用 @bind:after="{EVENT}" 搭配 {EVENT} 預留位置的 DOM 事件。 在同步指派繫結值之前，不會執行指派的 C# 方法。

不支援使用事件回撥參數 (EventCallback/EventCallback<T>) 搭配 @bind:after。 相反地，將會傳回 Action 或 Task 的方法傳遞至 @bind:after。

在以下範例中：

• 每個 <input> 元素的 value 都會同步繫結至 searchText 欄位。
• PerformSearch 方法以非同步方式執行：
  • 當第一個方塊在值變更後遺失焦點 (onchange 事件) 時。
  • 在第二個方塊中每個按鍵輸入 (oninput 事件) 之後。
• PerformSearch 會使用非同步方法 (FetchAsync) 呼叫服務以傳回搜尋結果。

@inject ISearchService SearchService

<input @bind="searchText" @bind:after="PerformSearch" />
<input @bind="searchText" @bind:event="oninput" @bind:after="PerformSearch" />

@code {
    private string? searchText;
    private string[]? searchResult;

    private async Task PerformSearch() => 
        searchResult = await SearchService.FetchAsync(searchText);
}

其他範例

BindAfter.razor：

@page "/bind-after"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind After Examples</h1>

<h2>Elements</h2>

<input type="text" @bind="text" @bind:after="() => { }" />

<input type="text" @bind="text" @bind:after="After" />

<input type="text" @bind="text" @bind:after="AfterAsync" />

<h2>Components</h2>

<InputText @bind-Value="text" @bind-Value:after="() => { }" />

<InputText @bind-Value="text" @bind-Value:after="After" />

<InputText @bind-Value="text" @bind-Value:after="AfterAsync" />

@code {
    private string text = "";

    private void After() {}
    private Task AfterAsync() { return Task.CompletedTask; }
}

如需 InputText 元件的詳細資訊，請參閱 ASP.NET Core Blazor 輸入元件。

元件會藉由定義一組參數來支援雙向資料繫結：

• @bind:get：指定要繫結的值。
• @bind:set：指定發生值變更時的回呼。

@bind:get 和 @bind:set 修飾元一律會一起使用。

範例

BindGetSet.razor：

@page "/bind-get-set"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind Get Set Examples</h1>

<h2>Elements</h2>

<input type="text" @bind:get="text" @bind:set="(value) => { text = value; }" />
<input type="text" @bind:get="text" @bind:set="Set" />
<input type="text" @bind:get="text" @bind:set="SetAsync" />

<h2>Components</h2>

<InputText @bind-Value:get="text" @bind-Value:set="(value) => { text = value; }" />
<InputText @bind-Value:get="text" @bind-Value:set="Set" />
<InputText @bind-Value:get="text" @bind-Value:set="SetAsync" />

@code {
    private string text = "";

    private void Set(string value)
    {
        text = value;
    }

    private Task SetAsync(string value)
    {
        text = value;
        return Task.CompletedTask;
    }
}

如需 InputText 元件的詳細資訊，請參閱 ASP.NET Core Blazor 輸入元件。

如需 @bind:get 和 @bind:set 的另一個範例用法，請參閱本文稍後的跨兩個以上元件繫結一節。

Razor 屬性繫結區分大小寫：

• @bind、@bind:event 和 @bind:after 有效。
• @Bind/@bind:Event/@bind:aftEr (大寫字母) 或 @BIND/@BIND:EVENT/@BIND:AFTER (全大寫字母) 無效。

使用 @bind:get/@bind:set 修飾元並針對雙向資料繫結避免事件處理常式

無法使用事件處理常式實作雙向資料繫結。 針對雙向資料繫結使用 @bind:get/@bind:set 修飾元。

❌ 針對使用事件處理常式的雙向資料繫結，考慮下列 功能缺失方法：

<p>
    <input value="@inputValue" @oninput="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(ChangeEventArgs args)
    {
        var newValue = args.Value?.ToString() ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

OnInput 事件處理常式會在提供第四個字元之後，將 inputValue 的值更新為 Long!。 不過，使用者可以繼續將字元新增至 UI 中的元素值。 inputValue 的值不會使用每個按鍵輸入繫結回元素的值。 上述範例只具備單向資料繫結功能。

此行為的原因是，Blazor 不知道您的程式碼想要修改事件處理常式中 inputValue 的值。 除非使用 @bind 語法繫結，否則 Blazor 不會嘗試強制 DOM 元素值和 .NET 變數值相符。 在舊版的 Blazor 中，雙向資料繫結是藉由將元素繫結至屬性，並使用其 setter 控制屬性的值來實作。 在 .NET 7 或更新版本的 ASP.NET Core 中，@bind:get/@bind:set 修飾元語法是用來實作雙向資料繫結，如下一個範例所示。

✔️ 針對雙向資料繫結，考慮使用 @bind:get/@bind:set 的下列正確方法：

<p>
    <input @bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(string value)
    {
        var newValue = value ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

使用 @bind:get/@bind:set 修飾元可透過 @bind:set 控制 inputValue 的基礎值，並透過 @bind:get 將 inputValue 的值繫結至元素的值。 上述範例示範實作雙向資料繫結的正確方法。

使用 C# get 和 set 存取子繫結至屬性

C# get 和 set 存取子可用來建立自訂繫結格式行為，如下列 DecimalBinding 元件所示範。 元件會透過 string 屬性 (DecimalValue) 將最多三個小數位數的正數或負數繫結至 <input> 元素。

DecimalBinding.razor：

@page "/decimal-binding"
@using System.Globalization

<PageTitle>Decimal Binding</PageTitle>

<h1>Decimal Binding Example</h1>

<p>
    <label>
        Decimal value (±0.000 format):
        <input @bind="DecimalValue" />
    </label>
</p>

<p>
    <code>decimalValue</code>: @decimalValue
</p>

@code {
    private decimal decimalValue = 1.1M;
    private NumberStyles style = 
        NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");

    private string DecimalValue
    {
        get => decimalValue.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                decimalValue = Math.Round(number, 3);
            }
        }
    }
}

注意

使用 get/set 存取子對屬性的雙向繫結需要捨棄 EventCallback.InvokeAsync 傳回的 Task。 針對雙向資料繫結，我們建議使用 @bind:get/@bind:set 修飾元。 如需詳細資訊，請參閱本文稍早的 @bind:get/@bind:set 指導。

使用 <select> 元素的多個選項選取範圍

繫結支援使用 <select> 元素的 multiple 選項選取範圍。 @onchange 事件會透過 事件引數ChangeEventArgs () 提供所選元素的陣列。 值必須繫結至陣列型別。

BindMultipleInput.razor：

@page "/bind-multiple-input"

<h1>Bind Multiple <code>input</code>Example</h1>

<p>
    <label>
        Select one or more cars: 
        <select @onchange="SelectedCarsChanged" multiple>
            <option value="audi">Audi</option>
            <option value="jeep">Jeep</option>
            <option value="opel">Opel</option>
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
        </select>
    </label>
</p>

<p>
    Selected Cars: @string.Join(", ", SelectedCars)
</p>

<p>
    <label>
        Select one or more cities: 
        <select @bind="SelectedCities" multiple>
            <option value="bal">Baltimore</option>
            <option value="la">Los Angeles</option>
            <option value="pdx">Portland</option>
            <option value="sf">San Francisco</option>
            <option value="sea">Seattle</option>
        </select>
    </label>
</p>

<span>
    Selected Cities: @string.Join(", ", SelectedCities)
</span>

@code {
    public string[] SelectedCars { get; set; } = new string[] { };
    public string[] SelectedCities { get; set; } = new[] { "bal", "sea" };

    private void SelectedCarsChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            SelectedCars = (string[])e.Value;
        }
    }
}

如需資料繫結中如何處理空白字串和 null 值的相關資訊，請參閱將 <select> 元素選項繫結至 C# 物件 null 值一節。

將 <select> 元素選項繫結至 C# 物件 null 值

沒有合理的方法可將 <select> 元素選項值表示為 C# 物件 null 值，因為：

• HTML 屬性不能有 null 值。 在 HTML 中，null 的最接近對等項目，其 <option> 元素中缺少 HTML value 屬性。
• 選取 <option> 但沒有 value 屬性時，瀏覽器會將值視為該 <option> 元素的文字內容。

Blazor 架構不會嘗試隱藏預設行為，因為它會涉及：

• 在架構中建立特殊案例因應措施的鏈結。
• 目前架構行為的重大變更。

HTML 中最合理的 null 對等項目是空字串 value。 Blazor 架構會處理 null 到空字串的轉換，以便將雙向繫結至 <select> 的值。

無法剖析的值

當使用者為資料繫結元素提供無法剖析的值時，觸發繫結事件時，該無法剖析的值會自動還原為其先前的值。

考慮下列元件，其中的 <input> 元素會繫結至具有初始值 123 的 int 型別。

UnparsableValues.razor：

@page "/unparsable-values"

<PageTitle>Unparsable Values</PageTitle>

<h1>Unparsable Values Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
    
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private int inputValue = 123;
}

繫結會套用至元素的 onchange 事件。 如果使用者更新文字方塊項目的值為 123.45，並變更焦點，則元素的值會在 onchange 引發時還原為 123。 當值 123.45 遭到拒絕，而支援 123 的原始值時，使用者會了解其值未被接受。

針對 oninput 事件 (@bind:event="oninput")，在引入無法剖析值的任何按鍵輸入之後，就會發生值重新轉換。 以 int 繫結型別為目標的 oninput 事件時，使用者無法輸入點 (.) 字元。 點 (.) 字元會立即移除，因此使用者會收到只允許整數的立即意見反應。 在某些情況下，還原 oninput 事件上的值並不理想，例如應該允許使用者清除無法剖析的 <input> 值。 替代方案包括：

• 請勿使用 oninput 事件。 使用預設 onchange 事件，在元素失去焦點之前，不會還原無效的值。
• 繫結至可為 Null 的型別，例如 int? 或 string，並使用 @bind:get/@bind:set 修飾元 (本文稍早所述) 或繫結至具有自訂 get 和 set 存取子邏輯的屬性，以處理無效的項目。
• 使用輸入元件，例如 InputNumber<TValue> 或 InputDate<TValue>，內含表單驗證。 輸入元件與表單驗證元件的搭配會提供內建支援，以管理無效的輸入：
  • 允許使用者提供無效的輸入，並在相關聯的 EditContext 上接收驗證錯誤。
  • 在 UI 中顯示驗證錯誤，而不會干擾使用者輸入其他 Webform 資料。

格式字串

資料繫結使用 @bind:format="{FORMAT STRING}" 來搭配單一 DateTime 格式字串，其中的 {FORMAT STRING} 預留位置是格式字串。 目前無法使用其他格式運算式，例如貨幣或數字格式，但可能會在未來的版本中新增。

DateBinding.razor：

@page "/date-binding"

<PageTitle>Date Binding</PageTitle>

<h1>Date Binding Example</h1>

<p>
    <label>
        <code>yyyy-MM-dd</code> format:
        <input @bind="startDate" @bind:format="yyyy-MM-dd" />
    </label>
</p>

<p>
    <code>startDate</code>: @startDate
</p>

@code {
    private DateTime startDate = new(2020, 1, 1);
}

在上述程式碼中，<input> 元素的欄位型別 (type 屬性) 預設為 text。

支援可為 Null 的 System.DateTime 和 System.DateTimeOffset：

private DateTime? date;
private DateTimeOffset? dateOffset;

不建議為 date 欄位型別指定格式，因為 Blazor 具有格式日期的內建支援。 儘管有建議，但只有在提供具有 yyyy-MM-dd 欄位型別的格式時，才使用 date 日期格式進行繫結，以正確運作：

<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd">

使用元件參數繫結

常見的案例是將子元件的屬性繫結至其父元件中的屬性。 此案例稱為鏈結繫結，因為多個繫結層級會同時發生。

您無法在子元件中使用 @bind 語法來實作鏈結。 必須個別指定事件處理常式和值，以支援從子元件更新父代中的屬性。 父元件仍會利用 @bind 語法，來設定與子元件的資料繫結。

下列 ChildBind 元件具有 Year 元件參數和 EventCallback<TValue>。 依照慣例，參數的 EventCallback<TValue> 必須命名為具有 "Changed" 尾碼的元件參數名稱。 命名語法為 {PARAMETER NAME}Changed，其中的 {PARAMETER NAME} 預留位置是參數名稱。 在下列範例中，EventCallback<TValue> 名為 YearChanged。

EventCallback.InvokeAsync 會使用提供的引數叫用與繫結相關聯的委派，並分派已變更屬性的事件通知。

ChildBind.razor：

<div class="card bg-light mt-3" style="width:18rem ">
    <div class="card-body">
        <h3 class="card-title">ChildBind Component</h3>
        <p class="card-text">
            Child <code>Year</code>: @Year
        </p>
        <button @onclick="UpdateYearFromChild">Update Year from Child</button>
    </div>
</div>

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

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

    private async Task UpdateYearFromChild() => 
        await YearChanged.InvokeAsync(Random.Shared.Next(1950, 2021));
}

如需事件和 EventCallback<TValue> 的詳細資訊，請參閱 ASP.NET Core Blazor 事件處理一文的 EventCallback 小節。

在下列 Parent1 元件中，year 欄位會繫結至子元件的 Year 參數。 Year 參數可繫結，因為它具有符合 Year 參數型別的隨附 YearChanged 事件。

Parent1.razor：

@page "/parent-1"

<PageTitle>Parent 1</PageTitle>

<h1>Parent Example 1</h1>

<p>Parent <code>year</code>: @year</p>

<button @onclick="UpdateYear">Update Parent <code>year</code></button>

<ChildBind @bind-Year="year" />

@code {
    private int year = 1979;

    private void UpdateYear() => year = Random.Shared.Next(1950, 2021);
}

元件參數繫結也可以觸發 @bind:after 事件。 在下列範例中，YearUpdated 方法會在繫結 Year 元件參數之後非同步執行。

<ChildBind @bind-Year="year" @bind-Year:after="YearUpdated" />

@code {
    ...

    private async Task YearUpdated()
    {
        ... = await ...;
    }
}

依照慣例，屬性可以繫結至對應的事件處理常式，方法是包含指派給處理常式的 @bind-{PROPERTY}:event 屬性，其中的 {PROPERTY} 預留位置是屬性。 <ChildBind @bind-Year="year" /> 相當於寫入：

<ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />

在更複雜的真實世界範例中，下列 PasswordEntry 元件：

• 將 <input> 元素的值設定為 password 欄位。
• 使用 EventCallback 將 Password 屬性的變更公開給父元件，其會傳入子系 password 欄位的目前值做為其引數。
• 使用 onclick 事件來觸發 ToggleShowPassword 方法。 如需詳細資訊，請參閱 ASP.NET Core Blazor 事件處理。

警告

請勿在用戶端程式代碼中儲存應用程式密碼、連接字串、認證、密碼、個人標識元（PIN）、私人 C#/.NET 程式代碼或私鑰/令牌，這一律不安全。 在測試/預備和生產環境中，伺服器端 Blazor 程序代碼和 Web API 應該使用安全驗證流程，以避免在專案程式代碼或組態檔內維護認證。 在本機開發測試之外，建議您避免使用環境變數來儲存敏感數據，因為環境變數不是最安全的方法。 針對本機開發測試， 建議使用秘密管理員工具 來保護敏感數據。 如需詳細資訊，請參閱 安全地維護敏感數據和認證。

PasswordEntry.razor：

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged"
                       required
                       type="@(showPassword ? "text" : "password")"
                       value="@password" />
            </label>
        </p>
        <button class="btn btn-primary" @onclick="ToggleShowPassword">
            Show password
        </button>
    </div>
</div>

@code {
    private bool showPassword;
    private string? password;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private async Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        await PasswordChanged.InvokeAsync(password);
    }

    private void ToggleShowPassword() => showPassword = !showPassword;
}

PasswordEntry 元件會用於另一個元件，例如下列 PasswordBinding 元件範例。

PasswordBinding.razor：

@page "/password-binding"

<PageTitle>Password Binding</PageTitle>

<h1>Password Binding Example</h1>

<PasswordEntry @bind-Password="password" />

<p>
    <code>password</code>: @password
</p>

@code {
    private string password = "Not set";
}

一開始轉譯 PasswordBinding 元件時，會在 UI 中顯示 Not set 的 password 值。 初始轉譯之後，password 的值會反映對 PasswordEntry 元件中 Password 元件參數值所做的變更。

注意

上述範例會將密碼從子系 PasswordEntry 元件單向繫結至父 PasswordBinding 元件。 如果應用程式的目標是要讓應用程式有共用密碼輸入元件，以在只將密碼傳遞至父系的應用程式上重複使用，則雙向繫結並非此案例中的需求。 如需允許雙向繫結而不直接寫入子元件參數的方法，請參閱本文中跨兩個以上元件繫結一節中的 NestedChild 元件範例。

在處理常式中執行檢查或設陷錯誤。 如果密碼值中使用空格，下列修訂的 PasswordEntry 元件會立即向使用者提供意見反應。

PasswordEntry.razor：

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged"
                       required
                       type="@(showPassword ? "text" : "password")"
                       value="@password" />
            </label>
            <span class="text-danger">@validationMessage</span>
        </p>
        <button class="btn btn-primary" @onclick="ToggleShowPassword">
            Show password
        </button>
    </div>
</div>

@code {
    private bool showPassword;
    private string? password;
    private string? validationMessage;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        if (password != null && password.Contains(' '))
        {
            validationMessage = "Spaces not allowed!";

            return Task.CompletedTask;
        }
        else
        {
            validationMessage = string.Empty;

            return PasswordChanged.InvokeAsync(password);
        }
    }

    private void ToggleShowPassword() => showPassword = !showPassword;
}

跨兩個以上元件繫結

您可以透過任意數目的巢狀元件繫結參數，但必須遵守單向資料流程：

• 變更通知會向上流動階層。
• 新的參數值會向下流動階層。

常見和建議的方法是只將基礎資料儲存在父元件中，以避免任何有關必須更新狀態的混淆，如下列範例所示。

Parent2.razor：

@page "/parent-2"

<PageTitle>Parent 2</PageTitle>

<h1>Parent Example 2</h1>

<p>Parent Message: <b>@parentMessage</b></p>

<p>
    <button @onclick="ChangeValue">Change from Parent</button>
</p>

<NestedChild @bind-ChildMessage="parentMessage" />

@code {
    private string parentMessage = "Initial value set in Parent";

    private void ChangeValue() => parentMessage = $"Set in Parent {DateTime.Now}";
}

在下列 NestedChild 元件中，NestedGrandchild 元件：

• 使用 @bind:get 語法將 ChildMessage 的值指派給 GrandchildMessage。
• 當 ChildMessageChanged 使用 @bind:set 語法執行時更新 GrandchildMessage。

NestedChild.razor：

<div class="border rounded m-1 p-1">
    <h2>Child Component</h2>

    <p>Child Message: <b>@ChildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Child</button>
    </p>

    <NestedGrandchild @bind-GrandchildMessage:get="ChildMessage" 
        @bind-GrandchildMessage:set="ChildMessageChanged" />
</div>

@code {
    [Parameter]
    public string? ChildMessage { get; set; }

    [Parameter]
    public EventCallback<string?> ChildMessageChanged { get; set; }

    private async Task ChangeValue() => 
        await ChildMessageChanged.InvokeAsync($"Set in Child {DateTime.Now}");
}

NestedGrandchild.razor：

<div class="border rounded m-1 p-1">
    <h3>Grandchild Component</h3>

    <p>Grandchild Message: <b>@GrandchildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Grandchild</button>
    </p>
</div>

@code {
    [Parameter]
    public string? GrandchildMessage { get; set; }

    [Parameter]
    public EventCallback<string> GrandchildMessageChanged { get; set; }

    private async Task ChangeValue() => 
        await GrandchildMessageChanged.InvokeAsync(
            $"Set in Grandchild {DateTime.Now}");
}

如需適合在記憶體中和跨不一定為巢狀的元件共用資料的替代方法，請參閱 ASP.NET Core Blazor 狀態管理。

繫結欄位或屬性運算式樹狀架構

為了促進與繫結的更深入互動，Blazor 可讓您擷取繫結欄位或屬性的運算式樹狀架構。 藉由使用尾碼 Expression 的欄位或屬性名稱來定義屬性，即可達成此目的。 對於任何名為 {FIELD OR PROPERTY NAME} 的指定欄位或屬性，對應的運算式樹狀架構屬性會命名為 {FIELD OR PROPERTY NAME}Expression。

下列 ChildParameterExpression 元件會識別 Year 運算式的模型和欄位名稱。 用來取得模型和欄位名稱的 FieldIdentifier，可唯一識別可編輯的單一欄位。 這可能會對應至模型物件上的屬性，也可以是任何其他具名值。 建立自訂驗證元件時，使用參數的運算式很有用，Microsoft Blazor 文件並未涵蓋，但會由許多第三方資源處理。

ChildParameterExpression.razor：

@using System.Linq.Expressions

<ul>
    <li>Year model: @yearField.Model</li>
    <li>Year field name: @yearField.FieldName</li>
</ul>

@code {
    private FieldIdentifier yearField;

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

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

    [Parameter]
    public Expression<Func<int>> YearExpression { get; set; } = default!;

    protected override void OnInitialized() => 
        yearField = FieldIdentifier.Create(YearExpression);
}

Parent3.razor：

@page "/parent-3"

<PageTitle>Parent 3</PageTitle>

<h1>Parent Example 3</h1>

<p>Parent <code>year</code>: @year</p>

<ChildParameterExpression @bind-Year="year" />

@code {
    private int year = 1979;
}

其他資源

• 參數變更偵測和 Razor 元件轉譯的其他指導
• ASP.NET Core Blazor 表單概觀
• 繫結至表單中的選項按鈕
• 將 InputSelect 選項繫結至 C# 物件 null 值
• ASP.NET Core Blazor 事件處理：EventCallback 區段
• Blazor 範例 GitHub 存放庫 (dotnet/blazor-samples) (如何下載)