Question

我使用以下代码渲染行。每行都是一种形式：

foreach (var j in m.List)
{
   using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @class = "myForm" }))
   {
      <input type="hidden" name="userId" value="@j.UserId.ToString()" />
      <input type="hidden" name="jobId" value="@j.JobId.ToString()" />
      <select name="statusId" class="selectField">
         <option value="-1">...
   }
}

当我更改status时，我进行了一次AJAX调用：

$('select[name="statusId"]').on('change', function () {
                $('.myForm').triggerHandler('submit');
            });
            $(".myForm").on("submit", function (event) {
                event.preventDefault();

                var url = $(this).attr("action");
                var formData = $(this).serialize();

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    }
                });

            });

问题是我的功能中没有选择表格值：

public ActionResult Action(int userId, int statusId, int jobid)

但总是在页面上获取第一个渲染表单的值。为什么呢？

    <tbody>
<form action="/Controller/Action" class="myForm" method="post">                                        <tr>
                                            <td><a href="#">...</a></td>
                                            <td><a href="#">...</a></td>
                                            <td><a href="#">...</a></td>
                                            <td>
                                                <input type="hidden" name="userId" value="2" />
                                                <input type="hidden" name="jobId" value="31" />
                                                <select name="statusId" class="selectField">
                                                    <option value="-1">A</option>
                                                    <option value="1">B</option>
                                                    <option value="2">C</option>
                                                </select>    
                                            </td>
                                        </tr>
</form><form ...

Answer 1

有两个问题。

您总是提交第一张表格（可能是所有表格）。
您的HTML无效。 <forms> cannot be inside of a <table>，所以jQuery不会像你想的那样遍历它。

解决方案

您需要获取正确的表单才能提交，这是已更改的<select>字段的父级。

使用以下JavaScript：

$('select[name="statusId"]').on('change', function () {
    $(this).parents('.myForm').triggerHandler('submit');
});

将表单完全移至表格外部，或切换为使用<div>和<ul><li> s。不幸的是，这可能需要您修复一些工作，但无效的HTML将是您尝试的所有内容中的持续问题。 You can validate you HTML here。

<强> jsFiddle using ul/li

<强> jsFiddle using table inside form

Answer 2

脚本的第一部分将触发提交类myForm的所有表单。为避免这种情况，请将处理程序添加到最接近的myForm，以便只提交该处理程序。

$('select[name="statusId"]').on('change', function () {
    $(this).closest('.myForm').triggerHandler('submit');
});

一个页面上的多个表单如何知道提交的表单

2 个答案:

解决方案