Blazor 内联编辑表并获取事件的所有组件值

Question

在 Blazor 组件上，我有这个表，我试图在其中实现内联编辑功能。我已经管理了视觉位，但是当涉及到在按钮单击时从更改的行中获取新值时，我不知道如何继续。

表上的每一行都基于这个对象：

public class InstanceData 
{
    public Guid Id { get; set; }
    public string DisplayName { get; set; }
    public string BaseAddress { get; set; }
    public int Port { get; set; }
    public string Version { get; set; }
    public string AdditionalInformation { get; set; }

    [JsonIgnore]
    public bool IsEditing { get; set; }
}

在我的剃刀页面上，表格填充如下：

<table>
    @*<thead tbody blah blah>*@

    @foreach (var instance in serverInstances)
    {
        if (instance.IsEditing)
        {
            <tr>
                <th scope="row">@instance.GetShortenedIdentifier()</th>
                <td>
                    <input type="text" class="form-control" placeholder="Give the instance a name" value="@instance.DisplayName" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="e.g. http://localhost (without port)" value="@instance.BaseAddress" />
                </td>
                <td>
                    <input type="number" class="form-control" placeholder="The port number server is running on" value="@instance.Port"
                            min="0" max="65535" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="For information purposes and not required" value="@instance.Version" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="Any other details to add (e.g. Feature environment mocks instance)" value="@instance.AdditionalInformation" />
                </td>
                <td>
                    <button type="button" class="btn btn-link" @onclick="() => EnableEditing(false, instance)">
                        <i class="fas fa-window-close" />
                    </button>
                    <button type="button" class="btn btn-link" @onclick="() => UpdateInstance(instance)">
                        <i class="fas fa-check-square" />
                    </button>
                </td>
            </tr>
        }
        else
        {
            <tr>
                <th scope="row">@instance.GetShortenedIdentifier()</th>
                <td>@instance.DisplayName</td>
                <td>@instance.BaseAddress</td>
                <td>@instance.Port</td>
                <td>@instance.Version</td>
                <td>@instance.AdditionalInformation</td>
                <td>
                    <button type="button" class="btn btn-link" @onclick="() => EnableEditing(true, instance)">
                        <i class="fas fa-pen" />
                    </button>
                </td>
            </tr>
        }
</table>



@code {
    private void EnableEditing(bool flag, InstanceData instanceData)
    {
        instanceData.IsEditing = flag;
    }

    private void UpdateInstance(InstanceData instanceData)
    {
        EnableEditing(false, instanceData);

        //call the repository to update the instance here.
        //show toast after done.
    }
}

所以，我想要做的是将所有这些input元素值传递到我的操作方法中@onclick="() => UpdateInstance(instance)"。我想过分配 Id 或摆弄@ref但失败了。执行此操作的正确方法是什么，还是我以错误的方式处理此问题？

为了形象化它，这里有一些我令人敬畏的 ms 绘画技巧的东西。

Answer 1

您正在使用对象值设置输入值，但不绑定它们。

<input type="text" class="form-control" placeholder="Give the instance a name" value="@instance.DisplayName" />

这将设置输入控件的值，但不会将更新传递给任何内容。

您需要@bind属性的值，例如

<input type="text" class="form-control" placeholder="Give the instance a name" @bind="@instance.DisplayName" />

这将根据任何更改更新基础对象的属性。

更多：https://learn.microsoft.com/en-us/aspnet/core/blazor/data-binding? view=aspnetcore-3.1