在提交之前将数据从一个表单传递到同一页面上的另一个表单答案

【问题标题】：Pass data from one form to another on same page before submit在提交之前将数据从一个表单传递到同一页面上的另一个表单
【发布时间】：2016-06-27 11:02:15
【问题描述】：

我在一页上有两个表格。在我的第一个表单中，我拥有所有字段数据（姓名、用户名、密码等）。在我的第二种形式中，我只有一个按钮。提交时的两种表单都在我的控制器中执行不同的操作。

问题 - 当我通过按钮点击提交表单 2 时，表单 1 中的任何字段都不会通过 ViewModel 传递给控制器。前任。动作“ExternalLogin”没有得到“Gender”字段值

如何在提交第二个表单之前将“性别”从第一个表单传递到第二个表单？查询？我尝试将 HTML.HiddenFor(m => m.Gender) 放在我的第二种形式中，但这不起作用。

这是一些示例代码。

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    <div id="formGroup1" class="form-group">
        @Html.LabelFor(m => m.Gender, new { @id = "genderLabel" })
        <div class="">
        @Html.EnumDropDownListFor(m => m.Gender, new {@id = "genderId", @class = "selectpicker form-control" })
        </div>
    </div>
    // other fields here
}
@using (Html.BeginForm("ExternalLogin", "Account", FormMethod.Post, new { ReturnUrl = Model.ReturnUrl, @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    <button type="submit" class="btn btn-default btn-lg" id="facebookButton" name="provider" value="Facebook" title="Log in using your Facebook account" style="width: 280px; color: white; background-color: #4c7bd9"><i class="fa fa-facebook" style="color: white"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Connect</button>
}

【问题讨论】：

不要使用两种形式。使用具有相同name 属性和不同value 属性的2 个按钮的表单。然后使用按钮名称中的参数发布到一种方法，并根据单击的按钮执行您的逻辑
我认为这行不通，因为我对第一个表单进行了大量验证，而第二个表单不需要验证。如果我在一个表单中有两个按钮，无论我按下哪个按钮，我仍然必须验证所有字段。在第二种形式中，我只需要第一种形式的 1 个枚举值。
嗯，这不是你的问题所表明的:)。然后您需要在第二个表单中包含一个隐藏的输入并处理第二个提交按钮以从第一个表单中获取值并更新第二个表单中的输入。
我在想我可以在第二种形式中创建一个隐藏字段，在第一种形式中的枚举 onChange() 上我可以在第二种形式中设置隐藏值？
是的，这是另一种选择

标签： jquery html asp.net-mvc forms razor

【解决方案1】：

这完美地工作并且做你想做的事

控制器代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Temp.Models;

namespace Temp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public void Register(MyModel mymodel)
        {

        }

        [HttpPost]
        public void ExternalLogin(int mygender)
        {

        }
    }
}

型号代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Temp.Models
{
    public class MyModel
    {
        public enum Gender { Male = 1, Female = 2 }

        public Gender gender { get; set; }
    }
}

查看代码

@model Temp.Models.MyModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function OnChange()
    {
        $("#mygender").val($("#genderId").val())    
    }

</script>

@using (Html.BeginForm("Register", "Home", FormMethod.Post, new { @class = "form-horizontal", @id = "registerForm", role = "form", style = "margin-left: 20px" }))
{
    <div id="formGroup1" class="form-group">
        @Html.LabelFor(m => m.gender, new { @id = "genderLabel" })
        <div class="">
            @Html.EnumDropDownListFor(m => m.gender, new { @id = "genderId", @class = "selectpicker form-control",@onchange="javascript:OnChange();" })
        </div>
    </div>
    <button type="submit" class="btn btn-default btn-lg">Connect</button>

}

@using (Html.BeginForm("ExternalLogin", "Home", FormMethod.Post, new { @id = "registerForm", role = "form", style = "margin-left: 20px" }))
{
    <input type="hidden" id="mygender" name="mygender"/>
    <button type="submit" class="btn btn-default btn-lg">Connect</button>
}

【讨论】：