从 ASP.NET MVC 中成功的 AJAX 调用重定向

Question

我正在构建一个 Web 应用程序，它是我认识的老师的测试/问题/答案应用程序。其中一项要求是测试必须一次完成……即……不保存并继续。我选择通过使用 jQuery UI 的模式弹出窗口来实现这一点。在开始测试之前，我有一个用于测试的搜索页面和一个模态确认对话框。我遇到的问题是在用户选择继续测试后，它需要重定向到一个新页面，其中将显示第一个问题的模式弹出窗口（之后的每个问题都将通过 AJAX 加载到相同的模式弹出窗口中）。我可以进行搜索以及确认弹出窗口，但我无法弄清楚如何重定向到问题页面。我的 TestingController 中的 Question 操作被调用并且参数正确，但是一旦返回 View，ASP.NET 就会抛出一个异常，告诉我第一个参数为空。以下是控制此行为的 sn-ps：

来自 Search.cshtml（这个 div 是模态确认弹窗）：

 <div id="dialog" title="Confirm Test">

        <p>
            <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to take the selected test?
        </p> 

    </div>

@section scripts
{
    <script type="text/javascript">

        $(document).ready(function () {

            $(".takeTest").click(function (e) {

                e.preventDefault();

                var testId = $(this).data("test-id");
                $("#selectedTestId").val(testId);

                $("#dialog").dialog("open");

            });

            $("#dialog").dialog({
                dialogClass: "no-close",
                autoOpen: false,
                modal: true,
                resizable: false,
                height: 180,
                buttons: {
                    'Confirm': function () {

                        var appId = $("#applicantId").val();
                        var id = $("#selectedTestId").val();

                        $.ajax({
                            url: "/Testing/TakeTest/",
                            data: { applicantId: appId, testId: id },
                            type: "POST",
                            success: function (results) {
                                window.location.href = "/Testing/Question/";
                            }
                        });
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
        });

    </script>
}

来自 TestingController：

        [HttpPost]
        public ActionResult TakeTest(int applicantId, int testId)
        {
            try
            {
                ApplicantTest test = TestingRepository.GetInstance().TakeTest(applicantId, testId);
                return RedirectToAction("Question", "Testing", new { applicantId = applicantId, testId = testId });
            }
            catch
            {
                return RedirectToAction("Search", "Testing");
            }
        }


        [HttpGet]
        public ActionResult Question(int applicantId, int testId)
        {
            Question nextQuestion = TestingRepository.GetInstance().GetNextQuestion(applicantId, testId);
            NextQuestionViewModel model = AutoMapper.Mapper.Map<NextQuestionViewModel>(nextQuestion);
            model.ApplicantId = applicantId;
            model.QuestionNumber = (nextQuestion.ApplicantTestAnswers.Count + 1);
            return View(model);
        }

来自 Question.cshtml：

@Html.HiddenFor(x => x.ApplicantId, new { id = "applicantId" })
@Html.HiddenFor(x => x.TestId, new { id = "testId" })

<div id="dialog" title="Question: @Model.QuestionNumber">

    @Html.Partial("_NextQuestionPartial", Model)

</div>

@section scripts
{
    <script type="text/javascript">

        $(document).ready(function () {

            $("#dialog").dialog({
                dialogClass: "no-close",
                autoOpen: true,
                modal: true,
                resizable: false,
                height: 400,
                buttons: {
                    'Next': function () {


                    }
                }
            });


        });

    </script>
}

来自 _NextQuestionPartial.cshtml：

@Ajax.BeginForm("Question", "Testing", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "nextQuestionContainer" })
{
    <fieldset>
        <legend>Question # @Model.QuestionNumber</legend>

        <div id="nextQuestionContainer">
            <p>Q:  @Model.QuestionText</p>
            <ul>
                @foreach (var answer in Model.QuestionAnswers)
                {
                    <li>
                        @answer.Answer
                    </li>
                }
            </ul>
        </div>
    </fieldset>
}

Search.cshtml 中的模态确认弹出良好，确认按钮调用 TestingController 中的 Question 操作（在 VS 中使用断点验证）。 applicationId 和 testId 都填充了正确的值。正确创建了 NextQuestionViewModel 并调用了返回 View(model)，但这是我对正在发生的事情迷失的地方。我得到了异常：参数字典包含方法“System.Web.Mvc.ActionResult Question(Int32, Int32)”的不可空类型“System.Int32”的参数“applicantId”的空条目。

但是，如果我直接从 URL 将这些参数添加到查询字符串，页面将加载并且问题的模式弹出窗口会正确显示。这似乎是一个路由问题，但我是 MVC 的新手，我无法理解为什么 TestingController::TakeTest 中的 RedirectToAction 在我可以在 action 方法 Question. /p>

Answer 1

最快的解决方法是改变你的线路：

window.location.href = "/Testing/Question/";

到以下：

window.location.href = "/Testing/Question?applicantId=" + appId + "&testId=" + id;

编辑：

用户用户确认他/她想参加考试后，您可以：

1. 重定向页面并替换其全部内容。
2. 用测试的第一个问题替换页面的一部分。

根据您的问题，我假设您选择#1。这样，在用户确认后，浏览器将被重定向到类似于http://YourSite.com/Testing/Question?applicantId=123&testId=456"的URL，而不是停留在"http://YourSite.com/TestPage"。

我能想到的最好方法是使用一个简单的 HTML 表单，完全绕过 $.ajax 调用。看起来您使用 jQuery 引用了两个元素，它们的 ID 为“applicantId”和“selectedTestId”。我不确定您如何为这些元素分配值，但您可以将它们包装成如下形式：

<form id="testForm" action="/Testing/TakeTest" method="post">
    <!-- Put your two elements here -->
    <!-- For example: -->
    <input id="applicantId" name="applicantId" type="hidden" />
    <input id="selectedTestId" name="testId" type="hidden" />
</form>

注意：注意上述输入的name 属性如何对应于Question 操作方法中的参数名称。 然后，您可以将整个 $.ajax 调用替换为以下内容：

$('#testForm').submit();

默认情况下，这会将您的数据提交给您的TestPage POST 操作，这反过来会将您的浏览器重定向到“/Testing/Question...”并呈现新页面。

总结：由于您不想简单地替换页面的一部分，因此请避免使用 ajax 调用，只需使用表单提交数据。