我有一个基本视图,其中包含一个动态表,该表允许添加和删除行。它由一个称为任务的字段和一个称为序列的字段组成。我正在使用javascript获取这些值并将其发布到计划将Ajax传递给控制器的数组。当我在Chrome中运行代码时,这些值又变回空白。我尝试了在此站点上找到的各种方法,但未能找到答案。有人可以看到我做错了什么,还是可以向我指出正确的方向。
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>IT ICNDB - Create New Forms</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
@Html.LabelFor(model => model.FormName, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FormName, new { htmlAttributes = new { @class = "form-control", style = "width: 30%", id ="FormName" } })
@Html.ValidationMessageFor(model => model.FormName, "", new { @class = "text-danger" })
</div>
</div>
<br/>
<div class="row">
@Html.LabelFor(model => model.eSignReq, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.eSignReq, new {id = "eSignReq" })
@Html.ValidationMessageFor(model => model.eSignReq, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
@Html.LabelFor(model => model.DirectorEsign, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.DirectorEsign, new {id ="dirEsign"})
@Html.ValidationMessageFor(model => model.DirectorEsign, "", new { @class = "text-danger" })
</div>
</div>
</div>
<br />
<table id="Tasks">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Task)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskSeq)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.TextBox("Task")
</td>
<td>
@Html.TextBox("Sequence")
</td>
<td>
<input type="button" class="BtnPlus" value="+"/>
</td>
<td>
<input type="button" , class="BtnMinus" value="-"/>
</td>
</tr>
</tbody>
</table>
<br/>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create Form" class="button" id="SaveButton"/>
</div>
</div>
</div>
}
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/jquery-ui-1.12.1.js")
<script type="text/javascript">
$(document).ready(function() {
function addRow() {
var html = '<tr>' +
'<td> @Html.TextBox("Task",null) </td>' +
'<td> @Html.TextBox("Sequence", null)</td>' +
'<td> <input type="button" class="BtnPlus" value="+" /> </td>' +
'<td> <input type="button" , class="BtnMinus" value="-" /> </td>' +
'</tr>';
$(html).appendTo($("tbody"));
};
function deleteRow() {
var par = $(this).closest('tr');
par.remove();
};
$("#SaveButton").click(function () {
var data = Array();
for (var i = 0; i < $('#Tasks').find("tr").length; i++) {
data[i] = Array();
var currentRow = $('#Tasks').find("tr").eq(i);
for (j = 0; j < currentRow.find('td').length; j++) {
data[i][j] = currentRow.find('td').eq(j).val();
};
};
alert(data);
});
$("tbody").on("click", ".BtnMinus", deleteRow);
$("tbody").on("click", ".BtnPlus", addRow);
});
</script>
}