Question

所以，我有两个输入，我在其中输入用户的姓名和电子邮件，我将在点击按钮后从数据库中删除

<input type="text" name="DeleteName" style="visibility:hidden">
<input type="text" name="DeleteEmail" style="visibility:hidden">
<button class="btn btn-mini btn-primary" type="button" name="delete_btn" style="visibility:hidden" onclick="DbDelete()">Delete</button>

这是我的表：

<table class="table table-bordered table-hover table-striped table-condensed" id="UserTable">
<tr>
    <th>UserId</th>
    <th>Name</th>
    <th>Email</th>
</tr>
@foreach (var item in Model) {
    <tr>
        <td>@item.UserId</td>
        <td>@item.Name</td>
        <td>@item.Email</td>
    </tr>
}

我可以输入两个输入（名称和电子邮件）或单个输入。这是我的控制器从DB中删除用户的操作：

[HttpPost]
    public ActionResult Delete(User userinfo)
    {
        const string noResult = "Search Result Not Found";
        using (var uc = new UserContext())
        {
            if (userinfo.Name != null)
            {
                var itemforDelete = uc.UserList.SingleOrDefault(o => o.Name == userinfo.Name);
                CommitChanges(itemforDelete, uc, noResult);
                return new JsonResult { Data = itemforDelete };
            }
            else
            {
                if (userinfo.Email != null)
                {
                    var itemforDelete = uc.UserList.SingleOrDefault(o => o.Email == userinfo.Email);
                    CommitChanges(itemforDelete, uc, noResult);
                    return new JsonResult { Data = itemforDelete };
                }
            }
        }
        return new JsonResult();
    }

这是控制器的方法，用于加载要查看的表。这个按钮

时会调用它

<a class="btn btn-large btn-primary" type="button" href="home/list">Show all users</a>

单击

：

public ActionResult List() {
        List<User> users;
        using (var uc = new UserContext()) {
            users = uc.UserList.ToList();
        }
        return View(users);
    }

这是我的剧本：

<script type="text/javascript">
function DbDelete() {
    // Get some values from elements on the page:
    var deletedName = $("input[name='DeleteName']").val(),
        deletedEmail = $("input[name='DeleteEmail']").val();

    var user = { Name: deletedName, Email: deletedEmail };

    $.ajax(
    {
        type: "POST",
        url: "Delete",
        data: JSON.stringify({ userinfo: user }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: OnDeleteSuccess,
        error: OnDeleteError
    });
}

function OnDeleteSuccess(data)
{
    alert("success");
    //$('#UserTable').remove(data);
    $("#UserTable").fnDraw();
}
function OnDeleteError(data) { alert("error"); }

</script>

用户从DB中删除，在success-handler allert中可以正常工作，但只有在按下F5后，页面上的数据库才会更新。

我做错了什么？

Answer 1

目前您的代码中没有任何内容可以对页面进行任何可见的更改。您需要在OnDeleteSuccess中执行某些操作才能删除相关行。看起来您已经注意到尝试失败的尝试。渲染表是否包含可以与返回的数据交叉引用的ID？例如，如果您的表行如下所示：

<tr data-id="123"><td>Fred</td><td>fred@example.com</td></tr>

你可以做点什么：

$("'#UserTable').find('tr[data-id="' + data.UserId + '"]').remove();

更新

如果您的表格在第一列中包含ID，就像链接的屏幕截图一样，您可以按照以下内容过滤其text（）值：

$('#UserTable tr').filter(function() {
    return $(this).find('td:first').text() == data.UserId;
}).hide();

或者这种方法可能更容易理解：

$('#UserTable tr').each(function() {
    if($(this).find('td:first').text() == data.UserId) {
        $(this).hide();    
    }
});

进一步更新：

现在看到你的.cshtml，如果你想使用第一个jQuery，即

$("'#UserTable').find('tr[data-id="' + data.UserId + '"]').remove();

只需将<tr>更改为

即可在表格中呈现数据ID

<tr data-id="@item.UserId">

Answer 2

由于在页面刷新时更新了表，您可以推断出后端正在正确更新，这是前端的问题。由于您还没有说明您使用什么来显示您的数据，我将假设它是来自快速谷歌搜索的数据表。

stackoverflow.com/questions/20522440/fndraw-on-datatables-not-working

fnDraw（）方法有类似问题没有正确地重绘表格。我建议您通过将成功处理程序更改为

来使用他的示例

function OnDeleteSuccess(data)
{
    alert("success");
    $("#UserTable").fnUpdate( 'Example update', 0, 0 ); // Single cell. Will redraw by default
}

而不是您当前的解决方案，看看它是否有效。

无法重绘表jQuery

2 个答案: