javascript - 将多个复选框的 Value[S] 传递给 Controller MVC

问题描述

当您看到我有一个输入并且我有两个复选框时，我将内容动态加载到表中：

    $.ajax({
        type: "GET",
        url: "/User/GetCustomerContactInfo",
        data: { ids: items },
        traditional: true,
        dataType: 'json',
        success: function (values) {

          for (var i = 0; i < values.length; i++) {
                   value = values[i]

                  if (value != null) {

                   holderHTML += '<tr id="row' + value.CustomerNo + '">';
                   holderHTML += '<td><input id="NameOfCompany"  name="[' + i + '].NameOfCompany" value="' + value.NameOfCompany + '" /></td>';
                   holderHTML += '<td><input id="checkboxCustom1" type="checkbox" name="[' + i + '].RightsCode"  value="Åbne ordrer"/>
                                      <input id="checkboxCustom1" type="checkbox" name="[' + i + '].RightsCode"  value="Lukkede ordrer"/></td>
                   holderHTML += '</tr>';
                    }
                }

                $('#output').append(holderHTML);

        },

        error: function () {
            console.log('something went wrong - debug it!');
        }
    })

HTML 输出将如下所示：

<form id="CustomerNEmployeeForm">
 <table>

    <tbody id="output">
     <tr id="row10883">
     <td>
     <input type="text" id="NameOfCompany" name="[0].NameOfCompany" value="Center">
     </td>
     <td>
        <input id="checkboxCustom1" type="checkbox" name="[0].RightsCode" value="Åbne ordrer">
        <input id="checkboxCustom1" type="checkbox" name="[0].RightsCode" value="Fakturerede ordrer">
     </td>
     </tr>
   </tbody>

   </table>
  </form>

  <button class="btncreateusers" id="createusersJS" type="button" onclick="CreateCustomerNEmployees();">Create</button>

而且我想获取复选框的值并通过序列化表单传递给控制器，但是当表单被序列化时，它只会传递第一个复选框的值：

function CreateCustomerNEmployees() {

        var formdata = $("#CustomerNEmployeeForm").serializeArray();

        console.log(formdata);

        $.ajax({
            "url": '@Url.Action("CreateCustomers", "User")',
            "method": "POST",
            "data": formdata ,
            "dataType": "json",

            complete: function () {

            }

        });
    }

输出 console.log(formdata):

0: {name: "[0].NameOfCompany", value: "Center"}
1: {name: "[0].RightsCode", value: "Åbne ordrer"}
2: {name: "[0].RightsCode", value: "Lukkede ordrer"}

模型：

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string RightsCode { get; set; }
}

控制器：

[HttpPost]

    public JsonResult CreateCustomers(List<CreateCustomers> model)
    {

   if (model == null)
        {
            model = new List<CreateCustomers>();
        }

     var resultsOne = new List<Users>();
     var resultsTwo = new List<Rettigheder>();


  foreach (var item in model)
        {

       var UsersInsert = new Users
            {
                CompanyName = item.NameOfCompany,
                //other property
            };

        var RettighederInsert = new Rettigheder
            {
                 //other property
                Rettighedskode = item.RightsCode
            };

            resultsOne.Add(UsersInsert);
            db.Users.Add(UsersInsert);

            resultsTwo.Add(RettighederInsert);
            db.Rettigheder.Add(RettighederInsert);
        }

            db.SaveChanges();
            return Json(model, JsonRequestBehavior.AllowGet);
    }

调试输出： https ://i.imgur.com/DT6TYd4.jpg

标签： javascriptc#jquery

模型已CreateCustomers指定RightsCode为单个字符串。

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string RightsCode { get; set; }
}

在这种情况下，MVC 模型绑定只绑定第一个匹配项。

如果您希望绑定所有 RightsCode 复选框，您需要将 RightsCode 更改为字符串数组。

public class CreateCustomers
{
    public string NameOfCompany { get; set; }
    public string[] RightsCode { get; set; }
}

不相关但良好的做法- html 标记id值应该是唯一的。Names可以重复，但id不唯一的值可能会导致 css/js 选择器出现问题。

javascript - 将多个复选框的 Value[S] 传递给 Controller MVC | AJAX

问题描述

解决方案

推荐阅读