合并多个子表单并在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 
    } 
});