我是 MVC4 的新手,我遇到了一个问题。 当我想在 ajax 中向表中添加一行时,它似乎不是我想要的。 这是我的代码
<table>
<thead>
<tr>
<th>Tên học sinh </th>
<th>Giáo lý viên </th>
<th>Năm Học</th>
<th>Điểm TB Học Kỳ 1 </th>
<th>Điểm TB Học Kỳ 2 </th>
<th>Điểm Tổng Kết Năm Học </th>
<th>Lớp </th>
</tr>
</thead>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset class="form-horizontal">
<legend></legend>
<tbody>
<tr>
<td>
@Html.DropDownList("HocSinhId", String.Empty)
@Html.ValidationMessageFor(model => model.HocSinhId, null, new { @class = "help-inline" })
</td>
<td>
@Html.DropDownList("GiaoLyVienId", String.Empty)
@Html.ValidationMessageFor(model => model.GiaoLyVienId, null, new { @class = "help-inline" })
</td>
<td>
@Html.TextBoxFor(model => model.NamHoc)
@Html.ValidationMessageFor(model => model.NamHoc, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTBHK1)
@Html.ValidationMessageFor(model => model.DiemTBHK1, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTBHK2)
@Html.ValidationMessageFor(model => model.DiemTBHK2, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTongKetNamHoc)
@Html.ValidationMessageFor(model => model.DiemTongKetNamHoc, null, new { @class = "help-inline" })
</td>
<td>
@Html.DropDownList("LopId", String.Empty)
@Html.ValidationMessageFor(model => model.LopId, null, new { @class = "help-inline" })
</td>
</tr>
<div id="addDetails"></div>
</tbody>
<tfoot>
<tr>
<td>
@Ajax.ActionLink("Thêm Chi Tiết", "AddDetails", new AjaxOptions
{
UpdateTargetId = "addDetails",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET",
})
</td>
</tr>
<tr>
<td colspan="6">
@*<a href="#"> </a>*@
<input type="submit" value="Lưu thông tin" class="button" />
</td>
</tr>
</tfoot>
<div class="form-actions no-color">
</div>
</fieldset>
}
</table>
然后,如果需要,我调用 ajax 来加载更多行,这里是 AddDetails 文件,该文件将是 InsertAfter addDetails id。
<tr>
<td>
@Html.DropDownList("HocSinhId", String.Empty)
@Html.ValidationMessageFor(model => model.HocSinhId, null, new { @class = "help-inline" })
</td>
<td>
@Html.DropDownList("GiaoLyVienId", String.Empty)
@Html.ValidationMessageFor(model => model.GiaoLyVienId, null, new { @class = "help-inline" })
</td>
<td>
@Html.TextBoxFor(model => model.NamHoc)
@Html.ValidationMessageFor(model => model.NamHoc, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTBHK1)
@Html.ValidationMessageFor(model => model.DiemTBHK1, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTBHK2)
@Html.ValidationMessageFor(model => model.DiemTBHK2, null, new { @class = "help-inline" })
</td>
<td>
@Html.EditorFor(model => model.DiemTongKetNamHoc)
@Html.ValidationMessageFor(model => model.DiemTongKetNamHoc, null, new { @class = "help-inline" })
</td>
<td>
@Html.DropDownList("LopId", String.Empty)
@Html.ValidationMessageFor(model => model.LopId, null, new { @class = "help-inline" })
</td></tr>
但是我单击“添加详细信息”后的结果只是添加到表标题上方,而不是添加到右列中。
http://i808.photobucket.com/albums/zz1/nquangkhaiDST/Capture_zpsabd9817f.png
我不明白为什么。知道如何修复它吗?非常感谢。
最佳答案
问题出在表格内的 div 上。
尝试执行以下操作
@Ajax.ActionLink(
"Thêm Chi Tiết",
"AddDetails",
new AjaxOptions {
HttpMethod = "GET",
OnSuccess = "successCall"
}
)
然后是 successCall 函数,您可以在表中添加新行
<script type="text/javascript">
function successCall(result) {
$("#tableId").append(result);
}
</script>
关于ajax - 如何通过 ajax 操作向表添加行link,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18579333/