在 Blazor 中读取 table 中的文本框值

Question

我正在使用 Blazor Webassembly，在一个页面上我有 table 个图像，每个图像都有一个用于标题和描述的文本框以及一个保存按钮。所以每一行看起来像这样：

Image :: Name :: Description :: Save button

我想要的是点击保存按钮并获取当前行的名称和描述的值。

我正在调用一个传入行 ID 的方法。但是我怎样才能获得该特定行的文本框的值？

如何在运行时的文本框值中应用绑定，但我有很多行，因此无法轻松获取文本框值。

感谢任何帮助。

Answer 1

创建一个组件来托管该行，并绑定文本字段。

行组件

<tr>
    <td><input @bind-value=@Item.Name /></td>
    <td><input @bind-value=@Item.Description /></td>
    <td><button @onclick=@HandleClick</td>
</tr>

@Code {
    [Parameter] public EventCallback<ItemInfo> OnClick { get; set; }
    [Parameter] public string Name { get; set; }
    [Parameter] public string Description { get; set; }

    public class ItemInfo
    {
        public string Name { get; set; }
        public string Description { get; set; }
    }

    ItemInfo Item = new ItemInfo();

    async Task HandleClick()
    {
        await OnClick.InvokeAsync(Item);
    }

    protected override void OnParametersSet()
    {
        Item = new ItemInfo
        {
            Name = Name,
            Description = Description
        };
    }
}

将行放在父组件中并捕获包含 ItemInfo 的事件。

父组件

<table>
    <tbody>
        @foreach (Item item in Items)
        {
            <RowComponent Name=@item.Name
                          Description=@item.Description
                          OnClick=@HandleClick />
        }
    </tbody>
</table>

@code {
    async Task HandleClick(ItemInfo itemInfo)
    {
        string enteredName = itemInfo.Name;
        string enteredDescription = itemInfo.Description;
    }
}

在 Blazor 中读取 table 中的文本框值

Reading textbox values in a table in Blazor

c#

blazor-webassembly