MVC 4.x验证下拉列表并重定向到下一页

Question

入门问题：

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

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。

最后，在提交函数的末尾，您可以重定向检查所有变量是否为true，然后使用window.location.href="URL HERE或使用html助手url.actionwindow.location.href="@Url.Action("actionName");重定向

@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>
}