Привязка флажка Blazor не работает - на стороне сервера

TL; DR; Это похоже на то, что привязка строки / текстового поля отлично работает с элементами управления вводом, но привязка флажка, поддерживаемая логическими свойствами, не работает. Я знаю, что привязка для значений флажков должна использовать атрибут «checked» вместо атрибута «value», но Blazor должен обрабатывать это для разных типов элементов управления.

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

  1. «Тестовое значение» для элемента управления вводом текстового поля инициализируется нормально.
  2. Начальное значение флажка - истина, но флажок не установлен.
  3. Измените текст элемента управления вводом текстового поля, а затем измените фокус элемента управления. Обратите внимание, что сообщение печатается в окне отладки на вкладке «Вывод» Visual Studio (ожидаемое поведение).
  4. Измените значение элемента управления вводом флажка (установите или снимите флажок), а затем измените фокус элемента управления. Обратите внимание, что в окне «Отладка» на вкладке «Вывод» Visual Studio сообщение не отображается (непредвиденное поведение).

При начальной загрузке страницы отображается значение тестовой строки, но флажок не установлен

@page "/"

<div class="form-group">
    <label for="last-name">Textbox Binding Test</label>
    <input @bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
</div>
<div class="form-group">
    <label for="send-email-updates">Checkbox Binding Test</label>
    <input type="checkbox" bind="@TestBool" id="send-email-updates" />
</div>

@code {
    private bool _testBool = true;
    protected bool TestBool
    {
        get { return _testBool; }
        set
        {
            _testBool = value;
            System.Diagnostics.Debug.WriteLine($"Value of {nameof(TestBool)} = {value}");
        }
    }

    private string _testString = "Test Value";
    protected string TestString
    {
        get { return _testString; }
        set
        {
            _testString = value;
            System.Diagnostics.Debug.WriteLine($"Value of {nameof(TestString)} = {value}");
        }
    }
}

Такое поведение наблюдалось независимо от того, делались ли свойства общедоступными, использовались автоматические свойства (без частных переменных) или удалялись значения атрибута имени / идентификатора элемента управления. Кажется, это происходит независимо от того, использую ли я директиву @code на странице или отделяю модель представления, наследуемую от ComponentBase.

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


asp.net-core blazor blazor-server-side
person Paul Schroeder    schedule 21.09.2019    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Если вы посмотрите на оба элемента управления:

<input @bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
<input bind="@TestBool" type="checkbox"  id="send-email-updates" />

Понятно, что вы смешиваете обозначения bind и @bind, вероятно, из более старых редакций Blazor.
Это работает в rc1:

<input type="checkbox" @bind="TestBool" id="send-email-updates" />

но в целом я бы поспорил за использование <EditForm> и связанных тегов:

<EditForm Model="this">
        <InputCheckbox @bind-Value="TestBool" />    
</EditForm>
person Henk Holterman    schedule 21.09.2019
comment
Мне действительно нужно было еще раз взглянуть на это - спасибо, Хенк! @ bind = TestBool работает нормально, и этот формат работает и в более сложной форме решения / модальной форме, которую я создаю. Также спасибо за предложение EditForm. - person Paul Schroeder; 21.09.2019