Невозможно отобразить коллекцию предметов в формы Blazor - PullRequest
Новая
       3

Невозможно отобразить коллекцию предметов в формы Blazor

1 голос
/ 15 марта 2020

Я бы хотел отобразить таблицу с встроенным редактированием одного свойства в моем приложении 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? Или, может, совсем другой путь?

Ответы [ 2 ]

1 голос
/ 15 марта 2020

Проблема не в 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>
1 голос
/ 15 марта 2020

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

}

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

    }


}
...