MVC 选择下拉菜单然后更新并显示字符串答案

【问题标题】：MVC select dropdown then update and display stringMVC 选择下拉菜单然后更新并显示字符串
【发布时间】：2020-04-29 21:17:48
【问题描述】：

所以我想做的是有一个下拉列表：

<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 中复制它。我真的需要一个模型才能工作吗？我不能将视图中的值传递给控制器，让控制器进行评估，然后将字符串返回给视图吗？

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

实现这一目标的最简单方法是什么？

【问题讨论】：

这个问题需要在服务器上检查还是在客户端可以发生？
@timothyclifford 这将是一个仅限服务器端的应用程序，这就是我最初考虑使用 Blazor 但发现我们当前的服务器目前不支持 Blazor 并不得不切换到 MVC 的原因。
您可以使用 Jquery（或简单的 javascript）将选定的答案发布到 mvc 控制器（服务器端）检查答案并使用 viewbag 在您的视图（cshtml 页面）中显示结果。如果你愿意，我可以给你一个完整的例子
简短的回答是在初始渲染时将一些 Javascript / JQuery 嵌入到您的页面中，在您的服务器上公开一些 API 端点，并使用 AJAX 调用来获取您需要的内容。不确定您对 AJAX 的熟悉程度，但这可能是要走的路。
@NikP 看起来 Dkar 有一个使用简单 Javascript 的解决方案，页面不需要是动态的，而且我对 AJAX 基本上一无所知，所以我会尽可能避免它暂时。

标签： c# html model-view-controller dropdown

【解决方案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) 中添加以下内容。我也使用了一些引导 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>
}

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

【讨论】：