无法将项目集合呈现为 Blazor 表单

Question

我想在我的 Blazor（服务器端）应用程序中通过单个属性的内联编辑来呈现 table。集合中的每个项目都应该在 table 中呈现行，并用 EditForm 标记包裹，这样我就得到了每个集合的模型绑定以及每个 "Edit" 或 [=] 的 EventCallback 37=]操作。

这是我的父组件，其中包含 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; }
}

鉴于上面的代码，table 永远不会显示由 @foreach 语句创建的每个组件实例。

我尝试删除 <EditForm> 标签并只使用常规 <input> 而不是 Blazor <InputText> 标签，并且组件使用参数渲染得很好。但是，我的回调不会从 @GroupItem.GroupName.

传回编辑后的值

所以上面的代码没有正确呈现，我尝试的另一个选项没有返回编辑后的对象。

关于如何实现对传递到 Blazor 组件的对象进行内联编辑的任何想法？或者完全换一种方式？

Answer 1

编辑组

    <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; }
    }

}

Parent

 <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 中。表单不允许是 table、tbody 或 tr 的子元素您可以用表单包裹 table 您可以将表单放在 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>

无法将项目集合呈现为 Blazor 表单

Unable to render collection of items into Blazor forms

c#

blazor

blazor-server-side

父组件：

EditGroupItem 组件：

编辑组

Parent