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

我希望在Blazor（服务器端）应用程序中，通过对单个属性的内联编辑来呈现一个表。集合中的每个项都应该在一个表中呈现行，该表用

EditForm

标记包装，这样我就可以为每个集合获得模型绑定，并为每个“编辑”或“删除”操作获得

EventCallback

这是我的父组件，它包括一个

IEnumerable

：

父组件：

@{
如果（_allGroups.Any（））
{
修改
组名
关联（#）
添加日期
@foreach（所有组中的变量项）
{
}
}
}

EditGroupItem组件： 使用MyProject.Common.Models @GroupItem.PasswordsAssociatedTo @GroupItem.DateAdded.ToString（“d”） @代码{ [参数]公共GroupModel GroupItem{get；set；} [参数]公共事件回调DeleteItem{get；set；} [参数]公共事件回调保存项{get；set；} } 给定上述代码，该表从不显示由

@foreach

语句创建的每个组件实例

我尝试删除

标记，只使用常规的

而不是Blazor

标记，组件的参数呈现得很好。但是，我的回调不会从

@GroupItem.GroupName

传回已编辑的值

因此，上面的代码无法正确渲染，我尝试的另一个选项无法返回已编辑的对象

关于如何实现传入Blazor组件的对象的内联编辑，有什么想法吗？或者干脆换一种方式？

EditGrp

@GroupItem.PasswordsAssociatedTo
@GroupItem.DateAdded.ToString（“d”）
@代码{
[参数]公共GroupModel GroupItem{get；set；}
[参数]公共事件回调DeleteItem{get；set；}
[参数]公共事件回调保存项{get；set；}
公共类组模型
{
公共字符串组名{get；set；}
公共字符串密码关联到{get；set；}
public DateTime DateAdded{get；set；}
}
}

父母亲

修改
组名
关联（#）
添加日期
@foreach（所有组中的变量项）
{
}
@代码
{
公共列表_allGroups=新列表（）
{
新的EditGroupItem.GroupModel{GroupName=“one”，PasswordsAssociatedTo=“test”，DateAdded=DateTime.UtcNow}，
新建EditGroupItem.GroupModel{GroupName=“two”，passwordsasociatedto=“test 2”，DateAdded=DateTime.UtcNow.AddHours（10）}
};
public void SaveItemAsync（EditGroupItem.GroupModel模型）
{
}
public void DeleteItemAsync（EditGroupItem.GroupModel模型）
{
}
}

问题不在Blazor中。表单不允许是表的子元素，tbody或tr您可以用表单包装一个表，o您可以将表单放在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>

@GroupItem.PasswordsAssociatedTo
@GroupItem.DateAdded.ToString（“d”）

是否可以在不使用编辑表单的情况下显示更改。我尝试在没有表单的情况下复制，但它正在工作。当您说它正在工作时，您是否能够获取回调以将模型发送回父对象？是的，我在父对象中获取回调。我在回答中补充了我所做的。是的，你的例子很有效。为了其他人的利益，也许您可以完全省略代码并明确指出修复。我所能看到的唯一变化（也是我自己所做的）是使用

@bind=

而不是

@bind Value

，它现在可以在没有

EditForm

标记的情况下工作。

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

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

    }


}

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