MVC 4.x 验证下拉菜单并重定向到下一页

Question

初学者问题：

我有一个 MVC 应用程序，其中一个页面上有三个下拉菜单。目前，我正在使用 AJAX 评估表单提交的下拉菜单，并修改 CSS class 以在问题答案错误时显示反馈。

HTML:

<form method="post" id="formQuestion">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <p>This is a question:</p>
            </div>
            <div class="col-md-4">
                <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 class="col-md-4 answerResult1">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <button class="btn btn-success" type="submit" id="btnsubmit">Submit Answer</button>
        </div>
    </div>
</form>

AJAX:


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

控制器：

        public string DSQ1(string selectedAnswer1)
        {
            var message = (selectedAnswer1 == "3") ? "Correct" : "Feed back";
            return message;
        }

我有三个这样的下拉菜单，AJAX 都以相同的方式对其进行了评估。我的问题是，如果这三个都正确，我将如何评估所有三个然后返回一个特定的视图。

我想避免使用硬类型的 http:// 地址。

Answer 1

您可以在文档就绪函数之前声明一个全局脚本变量，这将确定字段是否有效。参见 var dropdown1Valid = false, ...。

然后在 ajax 成功函数中，您可以修改那里的值。在下面的 ajax 中说，你对第一个下拉菜单的回答，如果你的控制器返回正确，请将 dropdown1Valid 设置为 true。

最后，在提交函数的末尾，您可以重定向检查所有变量是否为真，然后使用 window.location.href="URL HERE 或使用 html 助手 url.action [=15] 重定向=]

@section scripts {
    <script>
        var dropdown1Valid = false;
        var dropdown2Valid = false;
        var dropdown3Valid = false;

        $(document).ready(function () {
            $("#formQuestion").submit(function (e) {
                e.preventDefault();
                console.log($('#Question1').val())
                $.ajax({
                    url: "/Home/DSQ1",
                    type: "POST",
                    data: { "selectedAnswer1": $('#Question1').val() },
                    success: function (data) {
                       $(".answerResult1").html(data);

                       if(data == "Correct"){
                          // if correct, set dropdown1 valid to true
                          dropdown1Valid = true;
                       }

                       // option 1, put redirect validation here
                       if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
                          // if all three are valid, redirect
                 window.location.href="@Url.Action("actionName","controllerName", new { })";
                       } 
                    }
                });

                // option 2, put redirect validation here
                if(dropdown1Valid && dropdown2Valid && dropdown3Valid){
                   // if all three are valid, redirect
                   window.location.href="@Url.Action("actionName", "controllerName", new { })";
                } 
            })
        });
    </script>
}

MVC 4.x 验证下拉菜单并重定向到下一页

MVC 4.x Validate dropdown and redirect to next page

ajax

asp.net-mvc

asp.net-mvc-4