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

Question

我有包含Razor代码的下表，它是用户列表以及每个用户的基本详细信息以及编辑或删除每个用户的选项：

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

如上所示，还有一个用于添加新用户的按钮。 单击将弹出一个弹出表单（带有id signupform ）以输入新用户的详细信息，并在提交该表单时，调用以下javascript：

$("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);
            }
        });

    });

我的目标是实现注释后的reload the table ，而不必重新加载整个页面，这就是我现在正在做的事情：

$("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);
            }
        });

    });

重新加载整个页面会导致一些JavaScript问题，例如弹出窗口无法再次使用，因此我现在尝试重新加载表格，并希望获得帮助。

谢谢。

Answer 1

您可以创建一个操作方法，该方法返回表标记的部分视图。

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

并在GetUserTable.cshtml部分视图中，放置您当前必须呈现表的视图代码

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

您也可以在主视图中使用相同的操作方法。 只需调用此操作方法

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

这将使用户表与您当前拥有的表相同。

现在，您的ajax成功了，您可以通过异步调用此操作方法来重新加载用户表。

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

最后，对于连接到新注入的/动态dom元素的jquery事件，您需要使用on方法。

所以更换

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

与

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