无法将项目集合呈现到 Blazor 表单中答案

【问题标题】：Unable to render collection of items into Blazor forms无法将项目集合呈现到 Blazor 表单中
【发布时间】：2020-06-26 12:45:23
【问题描述】：

我想在我的 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 组件的对象的内联编辑有什么想法吗？或者完全是另一种方式？

【问题讨论】：

您能否在没有 EditForm 的情况下显示更改。我尝试在没有形式的情况下进行复制，它正在工作。
当你说它正在工作时，你是否能够获得回调以将模型发送回父对象？
是的，我收到了父母的回调。我在答案中添加了我所做的。
是的，您的示例有效。为了他人的利益，也许您可以完全省略代码并专门指出修复。我能看到（并且自己做的）唯一的改变是使用@bind= 而不是@bind-Value，它现在可以在没有EditForm 标签的情况下工作。

标签： c# blazor blazor-server-side

【解决方案1】：

问题不在于 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>

【讨论】：

【解决方案2】：

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)
    {

    }


}

【讨论】：