如何为多行表单实现多个提交按钮？答案

【问题标题】：How do I implement Multiple Submit Buttons for a multi-row form?如何为多行表单实现多个提交按钮？
【发布时间】：2012-05-08 07:02:31
【问题描述】：

我有一个具有这种格式的表单：

我是第一行（文本框）[提交按钮]
我是第二行（单选按钮）[提交按钮]
我是第三行（复选框）[提交按钮]
我是第四行（下拉）[提交按钮]
我是第五行（文本框）[提交按钮]
我是第六行（文本框）[提交按钮]
我是第七排（单选按钮）[提交按钮]

文本（例如：我是第四行）和控件的值将从数据库中加载。我希望提交按钮仅将其控件的值（例如：第 4 行，下拉值 == N/A）发送到服务器。并非所有控件的值。

现在我必须用 Html.BeginForm 包装每个行，还是可以用一个 Html.BeginForm 包装所有行？处理这种事情最好（甚至更好）的方法是什么。

注意：我已经搜索过 SO 并没有看到像这样讨论过的问题。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 forms button

【解决方案1】：

听起来您需要创建一个循环来构建您的表格.. 并根据您要决定放置特定元素类型（文本、单选、复选框等）的任何内容有条件地创建行。 ) 并且每一行都必须包含在表单标签中。由于您需要评估正确的元素，因此您还可以使用它来构建 BeginForm 来告诉它在哪里发布操作，每个元素类型可能有不同的操作，以便操作只接收您希望它接收的数据

【讨论】：

【解决方案2】：

我相信你可以使用 Jquery 做到这一点：首先为每一行创建单独的表格。尝试使用下面的代码.. jQuery：

function SubmitForm(btn)
{
     var form = btn.serialize();
     $.post("your  URL here",form,function() {
         alert("Saved");
     });
}

HTML：

<form id='form1' >
 ...
 Other controls on your form
 ...
<input type="button" id="form1" onclick="SubmitForm(this)" />
</form>

【讨论】：

【解决方案3】：

首先，您不能嵌套表单标签（浏览器不支持它）。

点击时的输入[type=submit] 会在其父表单上触发回发事件。例如。

<form action='/PostBackTo' onsubmit='DoSomething()'>
<input type='submit />
</form>

因此，您必须将每个控件包装在其自己的表单中，并且您想要回发的任何其他数据都需要驻留在表单内的输入或选择标签中。

假设您想在每次提交时回发一个 id，您必须添加

<input type='hidden' value='@id' />

在每个表单标签中，使其包含在回发中。

如果您这样做，我建议您使用 javascript 拦截提交操作并通过 AJAX 发布提交表单的数据（如果它类似于“保存更改”按钮）。

【讨论】：

【解决方案4】：

例如：1.我是第一排：

<input type="text" value="@textValue" id="txtFirstRow" />
<input type="button" onclick="post('txtFirstRow');" />

Javascript 代码：

function post(name)
{
    var txt = document.getElementById(name).value;
    $.getJSON("/Controller/Action",
    {
        text: txt
    },
    function (data) {
        //returned result
    });
}

【讨论】：