1
Я пытаюсь передать пользовательский ввод для переменного количества входов для двух разных полей обратно в контроллер, используя пост jQuery с ajax. У меня возникают проблемы с получением не только первых входов. Например, если работнику назначено несколько единиц оборудования, только первый передается контроллеру.jQuery post с ajax из переменного числа полей ввода
В представлении я показываю каждого сотрудника в таблице с кнопкой для каждого, чтобы открыть модальный, где может быть назначено их индивидуальное оборудование. В каждом модальном коде есть два текстовых поля (транспортные средства &) с возможностью для пользователя добавлять больше каждого из них, используя jQuery.
Я новичок в JS и не могу понять, как определить, сколько входов есть, и я не знаю, как передать их в массив, чтобы перейти к контроллеру. Любая помощь очень ценится!
Вид:
@int count = 0;
@foreach (var item in Model)
{
<tr>
<td>
<button class="btn btn-default" data-toggle="modal" data-target="#[email protected]">
Assign Resources
</button>
<div class="modal fade" id="[email protected]" 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="[email protected]" />
<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=”[email protected]”>
<p>
<input type="text" size="20" class="text-center" value="" id="[email protected]" name=”vehicle” placeholder="Vehicle Number" />
</p>
</div>
</td>
<td valign="middle">
<div class="addEquip" id="[email protected]">
<p>
<input type="text" id="[email protected]" size="20" class="text-center" name="equipment" value="" placeholder="Equipment Label" />
</p>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#" class="addVehicle" id="[email protected]"> Add Additional Vehicle</a>
</td>
<td>
<a href="#" class="addEquipment" id="[email protected]"> 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="[email protected]">Close</button>
<button type="button" class="btn btn-primary" id="[email protected]">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);
}
показывают нам действие контроллера 'Реестры/SaveResources' –
являются ваши поля добавлены динамически? то вы должны называть свое первое funtion ... и это должна быть глобальная функция ... и всякий раз, когда вы добавляете новое поле (!! с новой кнопкой сохранения, которую вы хотите вызвать событие!), вы должны повторно запустить свою функцию – Mephiztopheles
@ VenkataPanga Отредактированное сообщение, чтобы включить действие contoller. Как уже отмечалось, эта логика настраивается только для одного типа. Благодаря! – user2325484