blazor c#如何實現數據綁定

在 Blazor 中，數據綁定是通過使用組件參數（Component Parameters）和狀態管理（State Management）來實現的

1. 使用組件參數進行數據綁定：

組件參數允許您將數據從父組件傳遞到子組件。在子組件中，您可以使用參數來顯示數據。這是一個簡單的例子：

首先，創建一個名為 MyComponent 的子組件，它接受一個名為 Text 的字符串參數：

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

<h3>@Text</h3>

然后，在父組件中，將數據作為參數傳遞給 MyComponent：

@page "/parent"

@if (myText != null)
{
    <MyComponent Text="@myText" />
}
else
{
    <p>Loading...</p>
}

<button @onclick="ToggleText">Toggle Text</button>

@code {
    private string myText = "Hello, Blazor!";

    private void ToggleText()
    {
        myText = myText == "Hello, Blazor!" ? "Text has been changed." : "Hello, Blazor!";
    }
}

2. 使用狀態管理進行數據綁定：

在 Blazor 中，您可以使用 “razor state”（組件狀態）來存儲和管理組件的數據。要使用狀態管理，您需要使用 “Microsoft.AspNetCore.Components.State” 命名空間中的 “StateContainer” 類。

首先，創建一個名為 MyComponent 的子組件，它使用 StateContainer 來存儲和更新數據：

@inject StateContainer State

<h3>@State.Text</h3>

<button @onclick="ToggleText">Toggle Text</button>

@code {
    private void ToggleText()
    {
        State.Text = State.Text == "Hello, Blazor!" ? "Text has been changed." : "Hello, Blazor!";
    }
}

然后，在父組件中，將 StateContainer 作為參數傳遞給 MyComponent：

@page "/parent"

@inject StateContainer State

<MyComponent State="State" />

這就是在 Blazor 中實現數據綁定的方法。通過使用組件參數和狀態管理，您可以輕松地在 Blazor 應用程序中實現數據綁定。