我有一个页面,用户可以在其中动态地添加/删除输入字段及其生成的输入字段,最终用户可以单击“提交”按钮将输入字段的数据/值保存到数据库中。
但是它只能将一个输入字段值保存到数据库中,而不能保存第二个或第三个输入字段的数据/值
任何人都可以帮助我或为我指出正确的方向:)预先感谢:)
这是我的JavaScript:
<script>
$(document).ready(function () {
//Add input field
var i = 1;
$("#add").click(function (e) {
i++;
e.preventDefault();
$("#tbhold").append('<tr id="row' + i + '"><td><div class="col-md-8"><input type="text" name="Varenummer[]" id=' + i + ' class="form-control" /></div></td><td><div class="col-md-8"><input type="text" name="Serienummer[]" id=' + i + ' class="form-control" /></div></td><td><button type="button" class="btn btn-danger btn_remove" id="' + i + '" name="remove">X</button></td></tr>');
});
//Remove input field
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$("#row" + button_id + '').remove();
});
//Save to db by click
$("#submit").click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '@Url.Action("ProcessCreateRMA", "User")',
dataType: 'json',
data: $('#add_rma').serialize(),
success: function (CreateRMA) {
console.log(CreateRMA);
},
error: function () {
console.log('something went wrong - debug it!');
}
});
});
});
</script>
HTML:
<form name="add_rma" id="add_rma">
<table id='tbhold' class="table">
<thead>
<tr>
<th>Varenummer</th>
<th>Serienummer</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-md-8">
<input type="text" name="Varenummer[]" id="Varenummer" class="form-control" />
</div>
</td>
<td>
<div class="col-md-8">
<input type="text" name="Serienummer[]" id="Serienummer" class="form-control" />
</div>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
</tbody>
</table>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
控制器:
[HttpPost]
public JsonResult ProcessCreateRMA(CreateRMAVM model)
{
var RMA = new RMA_History
{
Varenummer = model.Varenummer,
Serienummer = model.Serienummer,
};
db.RMA_History.Add(RMA);
db.SaveChanges();
return Json(model, JsonRequestBehavior.AllowGet);
}
ViewModel:
public class CreateRMAVM
{
public string Varenummer { get; set; }
public string Serienummer { get; set; }
}