无法将物品收集呈现为Blazor表单

Question

我想通过在Blazor（服务器端）应用程序中对单个属性进行内联编辑来呈现表。集合中的每个项目都应在用EditForm标签包裹的表中呈现行，以便为每个“编辑”或“删除”操作获得每个集合的模型绑定以及EventCallback。

这是我的父组件，其中包括一个IEnumerable<GroupModel>：

父项：

@{
    if (_allGroups.Any())
    {
        <div>
            <table class="table" id="allGroups">
            <thead>
            <tr>
                <th scope="col">Modify</th>
                <th scope="col">Group Name</th>
                <th scope="col">Associated (#)</th>
                <th scope="col">Date Added</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var item in _allGroups)
            {
                <EditGroupItem SaveItem="@SaveItemAsync" DeleteItem="@DeleteItemAsync" GroupItem="@item"/>
            }
            </tbody>
            </table>
        </div>
    }
}

EditGroupItem组件：

@using MyProject.Common.Models
<EditForm Model="GroupItem">
    <tr>
        <td>
            <button type="button" class="btn btn-sm btn-info" @onclick="(() => SaveItem.InvokeAsync(GroupItem))"><i class="fas fa-save"></i></button>
            <button type="button" class="btn btn-sm btn-danger" @onclick="(() => DeleteItem.InvokeAsync(GroupItem))"><i class="fa fa-trash"></i></button>
        </td>
        <td>
            <InputText type="text" class="form-control" @bind-Value="@GroupItem.GroupName"></InputText>
        </td>
        <td>@GroupItem.PasswordsAssociatedTo</td>
        <td>@GroupItem.DateAdded.ToString("d")</td>
    </tr>
</EditForm>

@code {
    [Parameter] public GroupModel GroupItem { get; set; }
    [Parameter] public EventCallback<GroupModel> DeleteItem { get; set; }
    [Parameter] public EventCallback<GroupModel> SaveItem { get; set; }
}

鉴于上面的代码，该表从不显示@foreach语句创建的每个组件实例。

我尝试删除<EditForm>标签，而只是使用常规的<input>而不是Blazor <InputText>标签，并且使用正确的参数呈现了组件。但是，我的回调不会从@GroupItem.GroupName传回编辑后的值。

因此，以上代码无法正确呈现，而我尝试过的其他选项也不会退还已编辑的对象。

关于如何实现传递给Blazor组件的对象的内联编辑的任何想法？还是完全相反？

Answer 1

EditGrp

    <tr>
    <td>
        <button type="button" class="btn btn-sm btn-info" @onclick="(() => SaveItem.InvokeAsync(GroupItem))"><i class="fas fa-save"></i></button>
        <button type="button" class="btn btn-sm btn-danger" @onclick="(() => DeleteItem.InvokeAsync(GroupItem))"><i class="fa fa-trash"></i></button>
    </td>
    <td>
        <input type="text" class="form-control" @bind="@GroupItem.GroupName" />
    </td>
    <td>@GroupItem.PasswordsAssociatedTo</td>
    <td>@GroupItem.DateAdded.ToString("d")</td>
</tr>

@code {
    [Parameter] public GroupModel GroupItem { get; set; }
    [Parameter] public EventCallback<GroupModel> DeleteItem { get; set; }
    [Parameter] public EventCallback<GroupModel> SaveItem { get; set; }


    public class GroupModel
    {
        public string GroupName { get; set; }
        public string PasswordsAssociatedTo { get; set; }
        public DateTime DateAdded { get; set; }
    }

}

父母

 <div>
    <table class="table" id="allGroups">
        <thead>
        <tr>
            <th scope="col">Modify</th>
            <th scope="col">Group Name</th>
            <th scope="col">Associated (#)</th>
            <th scope="col">Date Added</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var item in _allGroups)
        {
             <EditGroupItem SaveItem="@SaveItemAsync" DeleteItem="@DeleteItemAsync" GroupItem="@item">
             </EditGroupItem>
        }
        </tbody>
        <tfoot></tfoot>
    </table>
</div>

@code
{

    public List<EditGroupItem.GroupModel> _allGroups = new List<EditGroupItem.GroupModel>()
    {
        new EditGroupItem.GroupModel{GroupName = "one", PasswordsAssociatedTo = "test", DateAdded = DateTime.UtcNow},
        new EditGroupItem.GroupModel{GroupName = "two", PasswordsAssociatedTo = "test 2", DateAdded = DateTime.UtcNow.AddHours(10)}

    };

    public void SaveItemAsync(EditGroupItem.GroupModel model)
    {

    }

    public void DeleteItemAsync(EditGroupItem.GroupModel model)
    {

    }


}

Answer 2

问题不在Blazor中。不允许将表单作为表格，tbody或tr的子元素，您可以将表格包装成表格，也可以将表格放在td中。

<tr>

    <td>
        <button type="button" class="btn btn-sm btn-info" @onclick="(() => SaveItem.InvokeAsync(GroupItem))"><i class="fas fa-save"></i></button>
        <button type="button" class="btn btn-sm btn-danger" @onclick="(() => DeleteItem.InvokeAsync(GroupItem))"><i class="fa fa-trash"></i></button>
    </td>
    <td>
        <EditForm Model="GroupItem">
            <InputText type="text" class="form-control" @bind-Value="@GroupItem.GroupName"></InputText>
        </EditForm>
    </td>
    <td>@GroupItem.PasswordsAssociatedTo</td>
    <td>@GroupItem.DateAdded.ToString("d")</td>

</tr>