合併多個子表單並在Asp.net MVC4中作爲單一表單提交

Question

我有1個視圖模型。 而對於一些用戶的需求和要求，我把這個模型分成5種形式，這裏就是例子。

public class VM_MyModel 
{ 
public string Prop1 {get;set} 
public string Prop2 {get;set} 
public string Prop3 {get;set} 
public string Prop4 {get;set} 
public string Prop5 {get;set} 
public string Prop6 {get;set} 
public string Prop7 {get;set} 
public string Prop8 {get;set} 
public string Prop9 {get;set} 
public string Prop10 {get;set} 
} 

在視圖上有5個表單相應地包含模型屬性。

@using(Html.BeginForm("","",FormMethod.Post,new{@id="form1"})) 
{ 
@Html.TextBoxFor(m=>m.Prop1) 
@Html.TextBoxFor(m=>m.Prop2) 
<input type="button" value="Next"/> 
} 

@using(Html.BeginForm("","",FormMethod.Post,new{@id="form2"})) 
{ 
@Html.TextBoxFor(m=>m.Prop3) 
@Html.TextBoxFor(m=>m.Prop4) 
<input type="button" value="Next"/> 
} 

@using(Html.BeginForm("","",FormMethod.Post,new{@id="form3"})) 
{ 
@Html.TextBoxFor(m=>m.Prop5) 
@Html.TextBoxFor(m=>m.Prop6) 
<input type="button" value="Next"/> 
} 

@using(Html.BeginForm("","",FormMethod.Post,new{@id="form4"})) 
{ 
@Html.TextBoxFor(m=>m.Prop7) 
@Html.TextBoxFor(m=>m.Prop8) 
<input type="button" value="Next"/> 
} 

@using(Html.BeginForm("MyAction","MyController",FormMethod.Post,new{@id="form5"})) 
{ 
@Html.TextBoxFor(m=>m.Prop9) 
@Html.TextBoxFor(m=>m.Prop10) 
<input type="submit" value="Save"/> 
} 

這裏所有的前4種形式我改變默認行爲，並調用jQuery的.valid（）函數來檢查渡過形式是否有效，如果無效，則打開窗口2並以此類推，直到那個達到form5表單我想在我的控制器動作中共同提交我的所有5個表單，這些動作接收VM_MyModel作爲參數。這裏代碼

[HttpPost] 
public ActionResult MyAction(VM_MyModel model) 
{ 
if(ModelState.IsValid) 
{ 
model.Save(); 
RedirectToAction("Home"); 
} 
return View(model); 
} 

請建議如何共同提交此表格。希望你能理解我的問題。 在此先感謝...

Answer 1

你應該使用JavaScript/jQuery的並在提交之前將隱藏輸入中以前表單中的所有值複製到最終表單中。

首先，你應該在你的最後一個表單添加隱藏的輸入是這樣的：

@using(Html.BeginForm("MyAction","MyController",FormMethod.Get,new{@id="form5"})) 
{ 
    for (int i = 1; i <= 8; i++) 
    { 
     <input type="hidden" name="hProp@(i)" id="hProp@(i)" /> 
     // - or - 
     // @Html.Hidden("hProp" + @i) 
    } 

@Html.TextBoxFor(m=>m.Prop9) 
@Html.TextBoxFor(m=>m.Prop10) 
<input type="submit" value="Save"/> 
} 

那麼這個jQuery代碼添加到您的網頁：

$("input[type='submit']").on("click", function() { 
    for (var i = 1; i <= 8; i++) { 
     $("#hProp" + i).val($("#Prop" + i).val()); 
    } 

}); 

Answer 2

在最後一個表格中只有一個提交按鈕，它只會提交該表格中的控件。我建議使用一種形式，但將控件劃分爲多個部分（我假設您可能隱藏了以下部分，因此Next按鈕將驗證該部分中的控件，然後如果有效，則顯示下一部分。

對於部分中驗證控件可能看起來像代碼（我假設的控制後續組是隱藏的，如果當前部分是有效下一節纔可見）

$('button').click(function() { 
    var container = $(this).closest('fieldset'); // assumes groups of controlls and the button are wrapped in <fieldset> tag 
    var isValid = true; 
    $.each(container.find('input'), function() { // could add select, textarea if applicable 
    $('form').validate().element($(this)); 
    if (!$(this).valid()) { 
     isValid = false; 
     return false; 
    } 
    }); 
    if (isValid) { 
    container.next('fieldset').show().find('input').first().focus(); // set focus to first input of next fieldset 
    container.hide(); // hide the previous container? 
    } else { 
    // display an error message? 
    container.find('.error').text('please complete this section'); // assumes an element with class="error" to display message 
    } 
});