Как я могу получить данные из бланка радио / чекбокса в блоке Blazor @code? - PullRequest
Новая
       48

Как я могу получить данные из бланка радио / чекбокса в блоке Blazor @code?

2 голосов
/ 16 октября 2019

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

Я перепутал с @ bind-value, но, похоже, он вообще не относится к нажатию кнопки, и мне нужно только значениеиз одного ответа, выбранного.

Пока что использование кнопки «Отправить» не является правильным маршрутом, поскольку он выполняет запрос POST, а это не то поведение, которое я ищу. Я просто хочу, чтобы кнопка запускала обработку в компоненте.

Вот мой компонент 

<form>
    <div class="q-card">
        <h3>@Question.QuestionText</h3>
        @foreach (var option in Question.Options)
        {
            <div>
                <input type="@Question.InputType" id="@answer" name="@Question.Id" value="@answer"/>
                <label for="@answer">@answer</label>
            </div>
        }
        <div class="q-controls">
            <button type="submit"@onsubmit="@OnSubmit">Submit</button>
        </div>
    </div>
</form>

и мой блок @code 

@code {
    public string answer;

    public void OnSubmit()
    {
        System.Console.WriteLine(answer);
    }
}

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

1 Ответ

0 голосов
/ 17 октября 2019

@ Коллин Бриттен, понимаю, что в Блазоре не должно быть никаких постов. Поведение, которое вы ищете, доступно. Когда вы нажимаете кнопку, сообщение не возвращается ... Blazor - это приложение SPA, в котором общение с внешним миром возможно только через вызовы Http или через SignalR. Тем не менее, я бы предложил вам использовать Forms Components, предоставленные Blazor. Эти компоненты предоставляют множество функциональных возможностей, включая проверку.

Следующий рабочий пример может помочь вам решить вашу проблему: 

<form>
        <p>@question</p>

        @foreach (var item in Enum.GetNames(typeof(Question.Colors)))
        {
            <div>
                <input type="radio" name="question1" id="@item" value="@item" @onchange="SelectionChanged" checked=@(selectedAnswer.Equals(item,StringComparison.OrdinalIgnoreCase)) />
                <label for="@item">@item</label>
            </div>
        }
        <div>
            <label>Selected answer is @selectedAnswer</label>
        </div>

        <button type="button" @onclick="@OnSubmit">Submit</button>


    </form>




@code {
    string selectedAnswer = "";
    void SelectionChanged(ChangeEventArgs args)
    {
        selectedAnswer = args.Value.ToString();
    }


    Question question = new Question { QuestionText = "What is the color of the sky" };


    public void OnSubmit()
    { 

          Console.WriteLine(selectedAnswer);

    }

    public class Question
    {

        public string QuestionText { get; set; }
        public enum Colors { Red, Green, Blue, Yellow };

    }
}

Ответ на комментарий:

Это цитата из команды Blazor:

В настоящее время мы не вызываем по умолчанию warnDefault для событий DOM. Единственное исключение относится к событиям отправки формы: в этом случае, если у вас есть обработчик onsubmit C #, вы почти наверняка не хотите выполнять публикацию на стороне сервера, особенно если учесть, что это произойдет до асинхронного обработчика событий. 

 Later, it's likely that we'll add a syntax for controlling whether any given event handler triggers a synchronous preventDefault

до запуска обработчика событий.

В следующем фрагменте кода форма имеет обработчик onsubmit, результатом которого является то, что переход к странице about запрещен, вына странице, где находится форма, и выполняется обработчик события HandleClick для кнопки: 

<form action="about:blank" @onsubmit=@(() => { })>
    <button id="form-1-button" @onclick=HandleClick>Click me</button>
</form>

Однако этот фрагмент кода заставляет приложение перейти на страницу about. Другими словами, форма отправлена. Это означает, что использование элемента button без назначения свойства type эквивалентно использованию кнопки с type = "submit" 

<form action="about:blank">
    <button id="form-2-button" @onclick="HandleClick">Click me</button>
</form>

, чтобы предотвратить переход к странице about и выполнить обработчик события HandleClick add. атрибут type со значением «button», как показано ниже: 

<form action="about:blank">
    <button type="button" @onclick="HandleClick" id="form-2-button">Click me</button>
</form>

Этот фрагмент кода из вашего вопроса 

<button type="submit"@onsubmit="@OnSubmit">Submit</button>

делает следующее: отправляет форму вместо вызова события OnSubmitобработчик элемента кнопки.

Надеюсь, это поможет ...

...