MVC select 下拉菜单然后更新并显示字符串

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>

用户从下拉列表中选择一个选项。

然后他们单击名为 "Check answer."

的按钮

如果答案正确，我想显示一条消息，如果答案错误，则显示另一条消息。

我能够在 Blazor 中的 @code{} 部分中非常轻松地实现这一点，只需从 html 中调用该方法，但我不知道如何在 MVC 中复制它。我真的需要一个模型才能工作吗？我不能只将值从视图传递到控制器，让控制器求值，然后 return 一个字符串到视图吗？

这是一个静态更新，所以我确定我需要一个 HttpPost 方法来 returning 字符串我只是不确定从哪里开始。

实现这个最简单的方法是什么？

Answer 1

首先你需要一个简单的控制器。我正在使用默认的 HomeController 和 index.cshtml 视图。

将以下方法添加到您的控制器

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.cshtml) 中添加以下内容。我也用了一些 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>
}

脚本将 post 控制器 CheckAnswer 方法选择的答案，返回的任何内容都将显示在 answerResult 容器中 DIV。这是非常基本的，当然你可以改进它。

MVC select 下拉菜单然后更新并显示字符串

MVC select dropdown then update and display string

html

c#

model-view-controller

dropdown