我正在尝试使用 jQuery post 和 ajax 将两个不同字段的可变数量输入的用户输入传递回 Controller 。我无法获得更多的信息，而不仅仅是第一个输入。例如，如果为一名员工分配了多件设备，则只有第一个设备会传递给 Controller 。
在 View 中，我在表格中显示每个员工，每个员工都有一个按钮可以打开一个模式，可以在其中分配他们的个人设备。在每个模式中有两个文本框(车辆和工具)，用户可以选择使用 jQuery 添加更多文本框。
我是 JS 新手，不知道如何确定有多少个输入，而且我不知道如何将它们放入数组中以传递给 Controller 。非常感谢任何帮助!
查看:
@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">×</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" />
</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" />
</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 时，它仅包含第一个值。
Controller :
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);
}
最佳答案
您可以在保存按钮上设置一个类并通过
获取父tr
var tr = $(this).closest('tr')
所以... arID 会像
tr.find('[name="arID"]')
将您的第一个 for 包装在一个函数中，并将其设为全局。
要使其全局化，请将其拒绝在 for 上方，例如
function bindClick() {}
那么由于按钮上的类，您将不需要 for。
在你的bindClick中你可以去
$('.saveModal').each(function( ){
$(this).unbind('click').on('click, function(e){
e.preventDefault(); // do this if you dont want to do default action for this button .. like to submit a form
var tr = $(this).closest('tr') // get the parent of all inputs to search in this container
[native code] // var DetailsVM = {...
}
});
然后将 $('#assignedRosterID-' + i).val() 更改为 tr.find('.assignedRosterID').val()
不要忘记向输入添加类!或者通过属性名称查找它们: tr.find('[name="your-field-name"]').val()
对其他函数执行相同的操作，并在函数中触发 bindClick，在其中添加新字段；)
关于javascript - jQuery post 使用 ajax 来自可变数量的输入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26704563/