從ASP.NET MVC中成功的AJAX調用重定向

Question

我有一個web應用程序，我正在構建一個測試/問題/答案應用程序，我認識一位老師。其中一個要求是測試必須在一次會議中完成......即......不保存並繼續。我選擇通過使用jQuery UI的模式彈出窗口來實現這一點。在測試開始前，我有一個測試搜索頁面和一個模態確認對話框。我遇到的問題是在用戶選擇繼續測試之後，它需要重定向到一個新頁面，其中第一個問題將顯示模式彈出窗口（之後的每個問題將通過AJAX加載到相同的模式彈出窗口中）。我有搜索工作，以及確認彈出窗口，但我無法弄清楚如何重定向到問題頁面。我的TestingController中的Question操作被調用並且參數是正確的，但是一旦返回View，ASP.NET將引發一個異常，告訴我第一個參數爲null。以下是控制此行爲的片段：

從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問題的行動（與斷點VS驗證）。 applicantId和testId都填充了正確的值。 NextQuestionViewModel被正確創建並且返回View（模型）被調用，但是這正是我所迷失的事情發生的地方。我得到了這個異常：參數字典包含一個空方法'System.Web.Mvc.ActionResult Question（Int32，Int32）'的非空類型'System.Int32'的參數'applicantId'的空項。

但是，如果我直接從URL中將這些參數添加到querystring中，頁面將加載並且問題的模式彈出窗口會正確顯示。看起來這是一個路由問題，但我是MVC的新手，我無法理解爲什麼TestingController :: TakeTest中的RedirectToAction正在拋出有關applicantId的此異常，因爲我可以在操作方法Question中看到它的值。

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一個網址「而不是停留在」 http://YourSite.com/TestPage」。

我能想到做到這一點，最好的辦法是用一個簡單的HTML表單，繞過$.ajax完全調用它看起來像你有兩個元素，你用jQuery引用了它，它是由ids'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操作，這反過來將瀏覽器重定向到/測試/問題......「並呈現新的頁面。

摘要：由於您不想簡單地替換頁面的一部分，請避免使用ajax調用並僅使用表單提交數據。