MVC выберите выпадающий список, затем обновите и отобразите строку

Question

Так что я хотел бы сделать это иметь выпадающий список:

<div class="form-control">
    <div class="row">
        <p>This is a question:</p>
        <select id="Question1">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</div>
<div>
// Check answer button
</div>
<div>
// Display results
</div>

Пользователь выбирает опцию из выпадающего списка.

Затем они нажимают кнопку под названием " Проверьте ответ. "

Если ответ правильный, я хочу отобразить одно сообщение, а если оно неправильное, отобразить другое.

Мне удалось очень легко добиться этого в Blazor с помощью @code {} раздел и просто вызвать метод из html, но я не знаю, как повторить это в MVC. Мне действительно нужна модель, чтобы это работало? Разве я не могу просто передать значение из представления в контроллер, заставить контроллер оценить и вернуть строку в представление?

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

Какой самый простой способ добиться этого?

Answer 1

Для начала вам нужен простой контроллер. Я использую стандартный HomeController и index.cs html view.

Добавьте следующий метод к вашему контроллеру

public string CheckAnswer(string selectedAnswer)
{
    //Here you can check the answer and set a message.
    var message = (selectedAnswer == "1") ? "Correct Answer" : "Wrong Answer"
    return message
}

Внутри вашего представления (index.cs html) добавьте следующее. Я также использовал некоторые bootstrap css, но вы можете их игнорировать

<form method="post" id="formQuestion" action="@Url.Action("CheckAnswer","Home")">
    <div class="row">
        <div class="form-control">
            <div class="row">
                <p>This is a question:</p>
                <select id="Question1">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
        </div>
    </div>

    <hr />
    <div class="row">
        <div class="col-md-6">
            <button class="btn btn-success" type="submit" id="btnsubmit">Submit Answer</button>
        </div>
        <div class="col-md-6 answerResult">

        </div>
    </div>
</form>

@section scripts {
    <script>
        $(document).ready(function () {
            $("#formQuestion").submit(function (e) {
                e.preventDefault();
                console.log($('#Question1').val())
                $.ajax({
                    url: "/Home/CheckAnswer",
                    type: "POST",
                    data: { "selectedAnswer": $('#Question1').val() },
                    success: function (data) {
                        $(".answerResult").html(data);
                    }
                });
            })
        });
    </script>
}

Сценарий отправит ответ, выбранный в метод ControlAnswer контроллера, и все, что будет возвращено, будет отображаться в контейнере answerResult DIV. Это очень просто c и конечно вы можете улучшить его.