无法重绘表格jQuery

Question

So, I have two inputs, where I enter Name and Email of User, that I'm going to Delete from DB after clicking a button

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

And this is my table:

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

I can enter two unputs (both Name and Email) or single one. this is my controller's action for deleting the user from 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();
    }

This is method of controller that loads the table to view. It's called when this button

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

is clicked:

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

And this is my script:

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

The user is deleted from DB, in success-handler allert works, but my DB at the page is not updating, only after pressing F5.

What am I doing wrong?

Answer 1

Since the table is being updated on page refresh you can deduce that the back-end is being updated properly and it is an issue with the front-end. Since you have not said what you are using to display your data I'm going to assume it is datatables from a quick google search.

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

Has a similar issue with the method fnDraw() not properly redrawing the table. I suggest you use his example by changing your success handler to

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

Instead of your current solution and see if that works.