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

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

0 голосов
/ 21 сентября 2019

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

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

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

Initial page load shows test string value but checkbox is not checked

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

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

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

1 Ответ

1 голос
/ 21 сентября 2019

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

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