使用Javascript将行动态添加到html表中 [英] Dynamically adding rows to an html table, using Javascript
问题描述
作为MVC初学者，我一直在网络上寻求帮助.我正在尝试使用javascript动态地将一行添加到HTML表中.下面的代码效果很好，它添加了行.问题是当我返回到控制器时，新行不存在.如果我从3行数据开始并添加1或2行，则当我单击提交"按钮时，它仅返回原始的3条记录.不知道为什么下面的内容不返回我添加的新行.下面是代码的简化部分.
As a beginner MVC programmer I am constantly searching the web for help. I am trying to dynamically add a row to a HTML table using javascript. The below code works great, it adds the rows. The problem is when I return to the controller, the new rows are not there. If I start with 3 rows of data and add 1 or 2 rows, when I click the submit button it returns with only the original 3 records. Not sure why the below is not returning the new rows I added. Below is a reduced portion of the code.
任何帮助将不胜感激.
@model List<ACES.Models.ENTITY_CONTACTS>
@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="form-horizontal">
<table id="dataTable" class="list-Contacts table-condensed table-striped table-responsive test">
<tr>
<th class="danger text-center">
<label>Last Name</label>
</th>
<th class="text-center">
<label>First Name</label>
</th>
<th class="text-center">
<label>Title</label>
</th>
<th class="text-center">
<label>EMail Address</label>
</th>
</tr>
@if (Model != null && Model.Count > 0)
{
int j = 0;
foreach (var i in Model)
{
if (j == 1)
{
<tr class="contacts-record-template" style="display:none">
<td>
@Html.TextBoxFor(a => a[j].LASTNAME)
</td>
<td>
@Html.TextBoxFor(a => a[j].FIRSTNAME)
</td>
<td>
@Html.TextBoxFor(a => a[j].TITLE)
</td>
<td>
@Html.TextBoxFor(a => a[j].EMAIL, new { @style = "width: 200px;" })
</td>
</tr>
}
<tr class="contacts-record">
<td>
@Html.TextBoxFor(a => a[j].LASTNAME)
</td>
<td>
@Html.TextBoxFor(a => a[j].FIRSTNAME)
</td>
<td>
@Html.TextBoxFor(a => a[j].TITLE)
</td>
<td>
@Html.TextBoxFor(a => a[j].EMAIL, new { @style = "width: 200px;" })
</td>
</tr>
j++;
}
}
</table>
@*Display buttons*@
<input type="button" class="add-button" name="add" value="Add" />
<div style="text-align:right"><a href="#" id="addNew">Add Contact</a></div>
<input type="submit" name="submitAction" value="Submit" class="btn btn-primary" onclick="return confirm('Please double check all information before submitting. Submit Notification?')" />
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$('.phone2').mask('999-999-9999');
$('.phone').mask('?999-999-9999');
$(document).ready(function () {
var count = 0;
$('.add-button').click(function () {
count++;
var template = $('.contacts-record-template').clone()
template.find('input[type=text]').val(null);
template.find('input[type=checkbox]').prop('checked', false);
$.each(template.find('input[type=text]'), function () {
var name = $(this).attr('name');
name = name.replace('0', count - 1);
$(this).attr('name', name);
});
$('.list-Contacts').append(template);
template.removeClass('contacts-record-template').addClass('contacts-record').show();
})
});
</script>
控制器.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(string submitAction, List<ENTITY_CONTACTS> entity_Contacts)
{
if (ModelState.IsValid)
{
foreach (var i in entity_Contacts)
{
ViewBag.temp = i.LASTNAME;
}
db.SaveChanges();
}
return View(entity_Contacts);
推荐答案
问题是，您的模板输入字段的名称类似于[1].LASTNAME.但是在您的代码中，您是在0而不是1上进行替换.
The problem is, your template input field has name like [1].LASTNAME. But in your code you are doing a replace on 0, instead of 1.
尝试为动态生成的输入字段生成名称值时，请更改代码以替换1而不是0.
Change your code to replace 1 instead of 0 when you try to generate the name value for the dynamically generated input fields.
下面的代码应该可以正常工作.
The below code should work fine.
$(document).ready(function () {
$('.add-button').click(function() {
var count = $("tr.contacts-record").length;
var template = $('.contacts-record-template').clone();
template.find('input[type=text]').val(null);
template.find('input[type=checkbox]').prop('checked', false);
$.each(template.find('input[type=text]'), function() {
var name = $(this).attr('name');
name = name.replace('1', count);
$(this).attr('name', name);
});
$('.list-Contacts').append(template);
template.removeClass('contacts-record-template')
.addClass('contacts-record').show();
});
});
这篇关于使用Javascript将行动态添加到html表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
