如何通过Ajax ActionLink在表中添加行 [英] How To add a row to table by ajax actionlink

问题描述

我是MVC4的新手，我遇到了问题.当我想在ajax的表中添加一行时，它看起来不像我想要的.这是我的代码

I 'm a newbie of MVC4, i got a problem. When I want to add a row into a table in ajax, it doesn't seem like what i want. Here my code

<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.

Then i call ajax to load more row if need here is AddDetails file which will be 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>

但是我单击添加详细信息"后的结果只是将其添加在表标题上方，而不是在右列中.

But the result after i click Add Details it just add above the header of table and not in the right column.

http://i808.photobucket.com/albums/zz1/nquangkhaiDST/Capture_zpsabd9817f.png

我不明白为什么.知道如何解决吗?非常感谢.

I don't understand why. Any idea how to fix it? Thanks a lot.

推荐答案

尝试一下，

@Ajax.ActionLink(
    "Thêm Chi Tiết", 
    "AddDetails", 
    new AjaxOptions { 
        HttpMethod = "GET", 
        OnSuccess = "successCall" 
    }
)

功能

<script type="text/javascript">
     function successCall(result) {
             $("#tableId").append(result.Data);
     }
</script>

成功后，您可以使用 append(result.Data)绑定表中的数据.

On success you can bind data in your table using append(result.Data).

这篇关于如何通过Ajax ActionLink在表中添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！