Blazor встроенная таблица редактирования и получение всех значений компонентов по событию - PullRequest
Новая
       26

Blazor встроенная таблица редактирования и получение всех значений компонентов по событию

0 голосов
/ 28 марта 2020

В компоненте Blazor у меня есть эта таблица, в которой я пытаюсь реализовать функцию встроенного редактирования. Я справился с визуальными битами, но когда дело доходит до получения новых значений из измененной строки при нажатии кнопки, я понятия не имею, как поступить.

Каждая строка в таблице основана на этом объекте: 

public class InstanceData 
{
    public Guid Id { get; set; }
    public string DisplayName { get; set; }
    public string BaseAddress { get; set; }
    public int Port { get; set; }
    public string Version { get; set; }
    public string AdditionalInformation { get; set; }

    [JsonIgnore]
    public bool IsEditing { get; set; }
}

На моей странице бритвы таблица заполняется следующим образом: 

<table>
    @*<thead tbody blah blah>*@

    @foreach (var instance in serverInstances)
    {
        if (instance.IsEditing)
        {
            <tr>
                <th scope="row">@instance.GetShortenedIdentifier()</th>
                <td>
                    <input type="text" class="form-control" placeholder="Give the instance a name" value="@instance.DisplayName" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="e.g. http://localhost (without port)" value="@instance.BaseAddress" />
                </td>
                <td>
                    <input type="number" class="form-control" placeholder="The port number server is running on" value="@instance.Port"
                            min="0" max="65535" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="For information purposes and not required" value="@instance.Version" />
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="Any other details to add (e.g. Feature environment mocks instance)" value="@instance.AdditionalInformation" />
                </td>
                <td>
                    <button type="button" class="btn btn-link" @onclick="() => EnableEditing(false, instance)">
                        <i class="fas fa-window-close" />
                    </button>
                    <button type="button" class="btn btn-link" @onclick="() => UpdateInstance(instance)">
                        <i class="fas fa-check-square" />
                    </button>
                </td>
            </tr>
        }
        else
        {
            <tr>
                <th scope="row">@instance.GetShortenedIdentifier()</th>
                <td>@instance.DisplayName</td>
                <td>@instance.BaseAddress</td>
                <td>@instance.Port</td>
                <td>@instance.Version</td>
                <td>@instance.AdditionalInformation</td>
                <td>
                    <button type="button" class="btn btn-link" @onclick="() => EnableEditing(true, instance)">
                        <i class="fas fa-pen" />
                    </button>
                </td>
            </tr>
        }
</table>



@code {
    private void EnableEditing(bool flag, InstanceData instanceData)
    {
        instanceData.IsEditing = flag;
    }

    private void UpdateInstance(InstanceData instanceData)
    {
        EnableEditing(false, instanceData);

        //call the repository to update the instance here.
        //show toast after done.
    }
}

Итак, я пытаюсь получить все эти значения элемента input для передачи в мой метод на @onclick="() => UpdateInstance(instance)" действие. Я думал о назначении Id или fiddle с @ref, но не удалось. Какой правильный способ сделать это, или я подхожу к этому неправильно?

Чтобы визуализировать это, вот кое-что с моими удивительными навыками рисования мс. blazor thingy

Ответы [ 2 ]

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

Вы устанавливаете входные значения, используя значения объекта, но не привязывает их. 

<input type="text" class="form-control" placeholder="Give the instance a name" value="@instance.DisplayName" />

Это установит значение элемента управления вводом, но не передаст обновления ни к чему.

Вам необходимо @bind значения для свойства, например, 

<input type="text" class="form-control" placeholder="Give the instance a name" @bind="@instance.DisplayName" />

Это обновит свойства базового объекта с любыми изменениями.

Подробнее: https://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1

0 голосов
/ 29 марта 2020

[неправильный ответ, см. Альтернативу]

Я думаю, что проблема в вашем @onclick синтаксисе, он должен выглядеть следующим образом: 

@onclick="@(() => EnableEditing(true, instance))"

@ () Обертка требуется для этой формы я считаю

...