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（）函数来检查表单是否有效，如果有效则打开form2，依此类推，直到到达form5，我希望在我的控制器动作之一上共同提交我的所有5个表单，该动作接收VM_MyModel作为参数。这里是代码

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

请建议如何集体提交此表单。希望你理解我的问题。提前谢谢......

Answer 1

您在最后一个表单中只有一个提交按钮，它只会提交该表单中的控件。我建议使用一个表单，但将控件分成几个部分（我假设你可能隐藏了以下部分，因此Next按钮只会验证部分中的控件，然后如果有效，则显示下一部分。< / p>

用于验证部分中控件的代码可能看起来像（我假设后续控件组被隐藏，并且下一部分仅在当前部分有效时才可见）

$('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
  }
});

Answer 2

在提交之前，您应该使用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());
    }

});

合并多个子表单并在Asp.net MVC4中作为单个表单提交

2 个答案: