在 Blazor 中的表中读取文本框值答案

【问题标题】：Reading textbox values in a table in Blazor在 Blazor 中的表中读取文本框值
【发布时间】：2021-07-24 18:09:53
【问题描述】：

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

Image :: Name :: Description :: Save button

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

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

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

任何帮助表示赞赏。

【问题讨论】：

标签： c# blazor-webassembly

【解决方案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;
    }
}

【讨论】：