Razor和Ajax：成功调用Ajax后如何重新加载表？

Question

I have the following table that contains Razor code, it is a list of users along with each user's basic details, along with the option to edit or delete each user:

<table class="table table-striped">
        <tr bgcolor="#FF0000"><th>Username</th><th>User Role</th><th>User Privileges</th><th>Status</th></tr>
        @if (Model.Count() == 0)
        {
            <tr><td colspan="4" class="text-center">No User Accounts</td></tr>
        }
        else
        {
            foreach (AppUser user in Model)
            {
                if (!(user.UserName.ToLower().Equals("admin")))
                {
                    <tr>

                        <td>@user.UserName</td>
                        <td>@user.UserRole()</td>
                        <td>@user.UserPrivs()</td>
                        <td>
                            @if (@user.LockedOut)
                            {
                                @:Locked
                        }
                            else
                            {
                                @: Unlocked
                        }
                        </td>

                        <td>
                            @using (Html.BeginForm("Delete", "Admin",
                            new { id = user.Id }, FormMethod.Post, new { @id = "manageusersform", name = user.UserName }))
                            {
                                <button class="btn btn-primary btn-xs editUserBtn"
                                        data-id="@user.Id" name="@user.Id">
                                    Edit
                                </button>

                                <button class="btn btn-danger btn-xs"
                                        type="submit">
                                    Delete
                                </button>
                            }
                        </td>
                    </tr>
                }
            }
        }
</table>

<div style="text-align:center;">
  <button class="btn btn-primary btn-xs" id="addnewuser">
      Add New User
</button>

As shown above, there is also a button to add a new user. Clicking that brings up a popup form (with id signupform ) to enter the new user's details, and when that form is submitted, the following javascript gets called:

$("form#signupform").submit(function (event) {
        event.preventDefault();
        var form = $(this);
        $.post(form.attr("action"), form.serialize(), function (res) {
            if (res.status === "success") {

                alert(res.message);

                $(".form-control").val('');

                /*
                reload the table
                */

            }
            else {
                alert(res.message);
            }
        });

    });

My goal is to implement the commented reload the table , without having to reload the entire page, which is what I am doing now:

$("form#signupform").submit(function (event) {
        event.preventDefault();
        var form = $(this);
        $.post(form.attr("action"), form.serialize(), function (res) {
            if (res.status === "success") {

                alert(res.message);

                $(".form-control").val('');

                /*
                $.ajax({
                    url: "/Admin/Index",
                    cache: false,
                    data: {}
                }).done(function (htmlResponse) {
                    $("#tabs-1ua").html(htmlResponse);
                });
                */

            }
            else {
                alert(res.message);
            }
        });

    });

Reloading the whole page causes some javascript issues such as the popup not working again, so I am trying to reload just the table now, and would like help.

Thank you.

Answer 1

You may create an action method which returns the partial view for the table markup.

public ActionResult GetUserTable()
{
  var list = new List<AppUser>();
  // to do : Populate list with data from your data source( user table?)
  return PartialView(list);
}

and in the GetUserTable.cshtml partial view, put the view code you currently have to render the table

@{ Layout = null; }
@model List<AppUser>
<table id="usreList">
  <!-- to do: loop throug model and render table rows) -->
</table>

You can use the same action method in your main view as well. Just call this action method

@Html.Action("GetUserTable","Users")
<div style="text-align:center;">
<button class="btn btn-primary btn-xs" id="addnewuser">
     Add New User
</button>

This will render the user table same as what you currently have.

Now in your ajax success, you can reload your user table by calling this action method asynchronously.

if (res.status === "success") {
  $("#usreList").load('/Users/GetUserTable');
}

Finally, for the jquery events you wired up to work with the newly injected/dynamic dom elements,you need to use on method.

So replace

$(".someClass").click(function(e){
  // do something
});

with

$(document).on("click",".someClass",function(e){
  // do something
});