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

Question

我有一个表单将具有以下格式：

1. 我是第一行（文本框） [提交按钮]
2. 我是第二行（单选按钮）[提交按钮]
3. 我是第三行（复选框） [提交按钮]
4. 我是第四行（下拉菜单）[提交按钮]
5. 我是第五行（文本框）[提交按钮]
6. 我是第六行（文本框）[提交按钮]
7. 我是第七行（单选按钮）[提交按钮]

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

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

注意：我已经搜索了SO，没有看到这样的问题。

Answer 1

听起来你需要

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

Answer 2

我相信

你可以使用Jquery来做到这一点：首先，为每一行创建单独的表单。尝试使用以下代码。Jquery：

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

目录：

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

Answer 3

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

单击时的输入 [type=submit] 会触发其父窗体上的回发事件。前任。

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

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

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

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

在每个表单标记中，以将其包含在回发中。

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

Answer 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
    });
}