Question

我有一个表，我需要动态添加/删除行。每行在最后一列中都有一个超链接以删除记录。由于您可以在页面加载后动态添加行，因此有时在数据库中找不到此记录。

当用户点击＆＃34;删除＆＃34; link，调用ajax函数从数据库中删除记录。只要功能服务器端功能没有崩溃，操作就会成功发回。

调用ajax函数的success函数后，我想从表中删除tr。

一旦页面加载，我就可以对表中存在的每一行执行此操作。 ajax函数将正确的信息发送回服务器，并从表中删除tr。但是，对于每个tr，我会在delete ajax函数无法触发后添加，并且tr会保留在页面上。

查看

        <fieldset>
            <legend>Agent Ids</legend>
            <table id="agentTable">
                <thead>
                    <tr>
                        <th>State Code</th>
                        <th>Company Code</th>
                        <th>Agent ID</th>
                        <th>Non-Res Biz NY</th>
                        <th></th>
                        <th></th>
                    </tr>
               </thead>
                <tbody>
                    @foreach (var item in Model.BankListAgentIds)
                    {
                        @Html.Partial("AgentIdPartial", item)
                    }
                </tbody>
                <a href="javascript:void(0)" class ="addCode">Add Another</a>
            </table>
        </fieldset>

Parial View

@model CollectionItemTest.Models.BankListAgentId
@{
    Layout = null;
}
@using (Html.BeginCollectionItem("BankListAgentIds"))
{
    @Html.HiddenFor(model => model.TableId)
    @Html.HiddenFor(model => model.BankID)
    <tr>
        <td>
            @Html.EditorFor(model => model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.CompanyCode)
        </td>
        <td>
            @Html.EditorFor(model => model.NonResBizNY)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
        </td> 
        <td>
            @Html.ActionLink("Delete", "", "",  new { href = "javascript:void(0)", id = Model.TableId  })
        </td>                              
    </tr>    
}

的jQuery

<script type="text/javascript">
    $(function() {
        $('#agentTable').on('click', 'tr a', function(e) {
            $.ajax({
                url: '@Url.Action("DeleteRow", "BankList")',
                data: { id: $(this).attr('id') },
                dataType: 'html',
                cache: false,
                context: this,
                success: function () {
                    $(this).parents('tr').remove();
                }
            });
        })
    });
    $(document).ready(function () {
        $('.addCode').click(function() {
            $.ajax({
                url: '@Url.Action("BlankRow", "BankList")',
                dataType: 'html',
                cache: false,
                success: function(html) {
                    $("#agentTable > tbody").append(html);
                }
            });
        });
    });
</script>

控制器功能

    public JsonResult DeleteRow(int id)
    {
        if (id == 0) return null;

        var agent = (from a in db.BankListAgentIds
                     where a.TableId == id
                     select a).FirstOrDefault();

        if (agent == null) return Json("Agent Id not found", JsonRequestBehavior.AllowGet);

        db.BankListAgentIds.Remove(agent);

        return null;
    }

    public ViewResult BlankRow()
    {
        return View("AgentIdPartial", new BankListAgentId());
    }

Answer 1

关注this帖子并使用.live命令。

    $('#agentTable').live('click', 'tr a', function (e) {
        $.ajax({
            url: '@Url.Action("DeleteRow", "BankList")',
            data: { id: $(this).attr('id') },
            dataType: 'html',
            cache: false,
            context: this,
            success: function () {
                $(this).parents('tr').remove();
            }
        });
    });

使用函数动态添加表行

1 个答案: