jQuery使用ajax从可变数量的输入框中发布

我正试图使用带有ajax的jQuery post将两个不同字段的可变数量输入的用户输入传递回控制器。除了第一次输入，我在获取更多信息方面遇到了困难。例如，如果一名员工被分配了多台设备，那么只有第一台设备被传递给控制器。

在视图中，我将每个员工显示在一个表中，每个员工都有一个按钮来打开一个模式，在该模式中可以分配他们的个人设备。在每个模式中都有两个文本框（车辆和工具），用户可以选择使用jQuery添加更多的文本框。

我是JS的新手，不知道如何确定有多少输入，也不知道如何将这些输入放入数组中传递给控制器。非常感谢您的帮助！

视图：

@int count = 0;
@foreach (var item in Model)
{
    <tr>
        <td>
            <button class="btn btn-default" data-toggle="modal" data-target="#modal-@count">
                Assign Resources
            </button>
            <div class="modal fade" id="modal-@count" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title" id="myModalLabel">@item.Rank @item.FirstName @item.LastName</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" value="@item.assignedRosterID" id="assignedRosterID-@count" />
                            <div class="table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="text-center">
                                                Vehicles
                                            </th>
                                            <th class="text-center">
                                                Equipment
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td valign="middle">
                                                <div class=”addV” id=”addV-@count”>
                                                    <p>
                                                        <input type="text" size="20" class="text-center" value="" id="vehicleNumber-@count" name=”vehicle” placeholder="Vehicle Number" /> &nbsp;
                                                    </p>
                                                </div>
                                            </td>
                                            <td valign="middle">
                                                <div class="addEquip" id="addEquip-@count">
                                                    <p>
                                                        <input type="text" id="equipmentLabel-@count" size="20" class="text-center" name="equipment" value="" placeholder="Equipment Label" />&nbsp;
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <a href="#" class="addVehicle" id="addVehicle-@count"> Add Additional Vehicle</a>
                                            </td>
                                            <td>
                                                <a href="#" class="addEquipment" id="addEquipment-@count"> Add Additional Equipment</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <span style="color: red"></span>
                            </div>
                            <div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModal-@count">Close</button>
                            <button type="button" class="btn btn-primary" id="saveModal-@count">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </td>

        <td style="font-weight:bold">
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td style="font-weight:bold">
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
    </tr>
    count++;
}

JS-

for (var i = 0; i < $('#count').val() ; i++) {
(function (i) {
    i
    $('#saveModal-' + i).click(function () {

        var DetailsVM = {
            arID: $('#assignedRosterID-' + i).val(),
            vehicleNumber: $('#vehicleNumber-' + i).val(),
            equipmentLabel: $('#equipmentLabel-' + i).val()
        }
        $.ajax({
            type: 'POST',
            url: '/Rosters/SaveResources',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(DetailsVM),
            traditional: true,
            success: function (response) {
                alert("Data Inserted Successfully!");
            },
            error: function (xhr, err) { alert(xhr.responseText) }

        });
    });
})(i);
};

for (var i = 0; i < $('#count').val() ; i++) {
    (function (i) {
        $(function () {
            var addDiv = $('#addV-' + i);
            var j = $('#addV-' + i + 'p').size() + 1;

            $(document).on('click', '#addVehicle + i, function () {
                $('<p><input type="text" id="vehicle + i + '-' + j + '" size="20" name="vehicle + j + '" value="" placeholder=" Vehicle Number" /><a href="#" id="remNew"> Remove</a> </p>').appendTo(addDiv);
                j++;
                return false;
            });
            $(document).on('click', '#remNew', function () {
                if (j > 1) {
                    $(this).parents('p').remove();
                    j--;
                    //$("span").text("There are " + j + " equipment input boxes. ");
                }
                return false;
            });
        });
    })(i);
};

for (var i = 0; i < $('#count').val() ; i++) {
    (function (i) {
        $(function () {
            var addDiv = $('#addEquip-' + i);
            var j = $('#addEquip-' + i + 'p').size() + 1;

            $(document).on('click', '#addEquipment-' + i, function () {
                $('<p><input type="text" id="equipment-' + i + '-' + j + '" size="20" name="equipment_' + j + '" value="" placeholder=" Equipment Label " /><a href="#" id="remNew"> Remove</a> </p>').appendTo(addDiv);
                j++;
                return false;
            });
            $(document).on('click', '#remNew', function () {
                if (j > 1) {
                    $(this).parents('p').remove();
                    j--;
                    //$("span").text("There are " + j + " equipment input boxes. ");
                }
                return false;
            });
        });
    })(i);

  };

型号：

 public class DetailsVM
    {
        public string arID { get; set; }
        public string vehicleNumber { get; set; }
        public string equipmentLabel { get; set; }
}

这样做的逻辑只是设置为保存每种类型中的一种，因为多个不起作用。当我把一个断点放在上面并检查VM时，它只包含第一个值。

控制器：

public ActionResult SaveResources(DetailsVM VM)
        {
            int assignedRosterID = Int32.Parse(VM.arID);
            int equipmentID = db.Equipments.Where(x => x.EquipmentLabel == VM.equipmentLabel).Select(x => x.EquipmentID).FirstOrDefault();
            int vehicleID = db.Vehicles.Where(x => x.VehicleNumber == VM.vehicleNumber).Select(x => x.VehicleID).FirstOrDefault();

        var tempEquipments = new TempEquipment();
        tempEquipments.AssignedRosterID = assignedRosterID;
        tempEquipments.EquipmentID = equipmentID;
        db.TempEquipments.Add(tempEquipments);
        var tempVehicles = new TempVehicle();
        tempVehicles.AssignedRosterID = assignedRosterID;
        tempVehicles.VehicleID = vehicleID;
        db.TempVehicles.Add(tempVehicles);

db.SaveChanges();

        return Json(1, JsonRequestBehavior.AllowGet);
    }