MVC＆JS：在視圖中使用一種表單，並使其看起來像是2個視圖

Question

在開始之前，我使用了MVC 3，實體框架模型首先，我開發的Web應用程序假設讓用戶創建一個評估卡的創作設想在兩個步驟上。

• 第一步是用戶鍵入並選擇作爲信息的字段。
• 第二步是用戶選擇/選擇他/她想要的評估卡片的問題。

我想要做的是做的第一步和第二步所有在視圖中的一種形式，並使用div標籤來隱藏與jQuery的EM。這使得它更容易，因爲我不需要使用每個流程步驟的1視圖。我可以在一個視圖中完成這些。

現在來解決問題！ :)

在這個視圖中，我有一個提交按鈕，這似乎觸發我的整個表單，甚至我的驗證，即使用MVC中的標準jQuery驗證完成我想它也提交我的後操作。

這是我想要的功能：

當提交按鈕我想要驗證得到批准用戶點擊，然後隱藏步驟之一，顯示了第二步。當用戶在第二步選擇問題後點擊提交按鈕時，我希望提交按鈕觸發發佈操作。我也有一個額外的按鈕，在第二階段，可以帶你回到第一步，隱藏第二步，並顯示第一步:)

第一步有div id「hiddenstep1」和第二步有div id「Hiddenstep2」

，即時通訊試圖利用這個jQuery腳本是工作如下：

$("#hiddenstep1").hide(); 
$("#hiddenstep2).show(); 

如果有任何額外的信息，讓我知道，我將編輯我的問題。

在此先感謝！

Answer 1

如果你想創建自己的嚮導，看看這個鏈接：http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

Answer 2

所以你想要像嚮導一樣的東西？

有幾個jQuery插件奇才隊支持validaton。

Stepy是一個很好的一個：

http://www.wbotelhos.com/stepy/

它不使用一個提交按鈕，直到表格的最後一步。有一些小的黑客，你可以支持服務器端驗證和踢人回一步，像這樣的東西有一個錯誤：

  var firstError = $('.input-validation-error:first,span.field-validation-error'); 
      if (firstError.length != 0) { 
       $('#dealWizard').stepy('step', $(firstError).closest('fieldset').index() + 1); 
      } 

隨着Stepy，你的步驟，每一個都包含在一個字段和所有字段設置包含在相同的表格中。

例子：

@using (Html.BeginForm()) 
{ 

     <fieldset title="Step 1"> 
      <legend>Choose Something</legend> 
      <div class="editor-label"> 
       @Html.LabelFor(m => m.Field1) 
      </div> 
      <div class="editor-field"> 
       @Html.TextBoxFor(m => m.Field1) 
       @Html.ValidationMessageFor(m => m.Field1) 
      </div> 
     </fieldset> 
     <fieldset title="Step 2"> 
      <legend>Choose Something Else</legend> 
      <div class="editor-label"> 
       @Html.LabelFor(m => m.Field2) 
      </div> 
      <div class="editor-field"> 
       @Html.TextBoxFor(m => m.Field2) 
       @Html.ValidationMessageFor(m => m.Field2) 
      </div> 
     </fieldset> 
     <input type="submit" class="finish"/> 

}