asp.net-core - 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; }
}

在我的 Razor 页面上，表格填充如下:

<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

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

<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://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1