javascript - Razor 和 Ajax : How to reload a table upon successful Ajax call?

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

    });

我的目标是实现注释的重新加载表格，而不必重新加载整个页面，这就是我现在正在做的:

$("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

您可以创建一个操作方法来返回表标记的部分 View 。

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 部分 View 中，输入当前用于呈现表格的 View 代码

@{ 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');
}

最后，对于您连接的 jquery 事件以与新注入(inject)/动态 dom 元素一起使用，您需要使用 on 方法。

所以替换

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

与

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