使用来自 AJAX Post、MVC 5 的添加记录更新网格

Question

我已经看过很多关于此的帖子，但我想在沿着我认为我可能需要走的路线走下去之前尝试获得最佳实践。在我向数据库中插入一条新记录后，我正在尝试更新我的视图：

相当基本的设置：

<table id="grid-basic" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="role_id">ID</th>
            <th data-column-id="description">Description</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td style="padding-right: 20px;">
                <div id="add-role-text-group" class="form-group">
                    <input id="add-role-text" type="text" class="form-control input-md" placeholder="Add Role" data-container="body" title="A role description must be entered."/>
                    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                </div>
            </td>
            <td style="vertical-align: middle;"><button type="button" class="btn btn-xs btn-default command-add"><span class="fa fa-plus"></span></button></td>
        </tr>
    </tfoot>
</table>

我的 C# 代码

// GET: Application Role Management
        [Route("role")]
        public ActionResult Role()
        {
            return View(RoleManager.Roles.ToList<IdentityRole>());
        }

        [HttpPost]
        [Route("addrole")]
        public async Task<ActionResult> AddRole(string description)
        {
            IdentityRole role = new IdentityRole();
            role.Name = description;

            var result = await RoleManager.CreateAsync(role);
            if (result.Succeeded)
            {
                return RedirectToAction("role");
            } else {
                return RedirectToAction("Error");
            }
        }

AJAX POST

$.ajax({
     type: "POST",
     url: "@Url.Action("AddRole")", // the method we are calling
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ description: $element.val() }),
     dataType: "json"
});

我加载视图，抓取系统中的所有角色并显示到网格中。我有一个用于插入新角色的内联行。我输入新角色，单击加号按钮。它 POSTs 到 AddRole 路由。我现在如何更新模型和更新网格？

据我所知，我需要运行插入，再次获取所有角色，并在 "success" 事件中更新网格。这是真的？或者是否有更传统的 MVC 方法通过 ASP.net 执行此操作？显然，我可以沿着使用 Knockout 之类的路径走下去，但我想知道是否有办法以这种方式更新视图。

Answer 1

如果你想在添加角色后重新加载当前页面你可以做一件事，

在 ajax 调用中添加成功函数，如下所示

success:function(){
     window.location.href ="your current page url"
}

Answer 2

您的 POST 方法正试图重定向到另一个操作方法，但 ajax 调用不会重定向。将您的方法更改为 return 新角色 Id 值并将其 return 更改为视图 json

[HttpPost]
[Route("addrole")]
public async Task<ActionResult> AddRole(string description)
{
  IdentityRole role = new IdentityRole();
  role.Name = description;
  var result = await RoleManager.CreateAsync(role);
  if (result.Succeeded)
  {
    return Json(role.Id);
  } else {
    return Json(null);
  }
}

然后修改您的 ajax 以根据文本框的值和 returned Id 值

在成功回调中添加新角色

var description = $('#add-role-text').val();
var url = '@Url.Action("AddRole")';
var table = $('#grid-basic');
$.post(url, { description: description }, function(id) {
  if (!id) { 
    // oops 
    return;
  }
  var newRow = [{ role_id: id, description: description }];
  table.bootgrid("append", newRow);
}).fail(function() {
  // oops - display error message?
});

Answer 3

您只需使用

return Json(role.Id,JsonRequestBehavior.AllowGet);

然后在你的 ajax 电话中说...

success:function(data){
 if(data.Id>0){
  $("#grid-basic").append('<tr><td>data.Id</td><td>//description comes here</td></tr>');
 }
 else{
  alert("error");
 }
}

如果它是关于更新 table 那么您可以将一行附加到 table
上述方式或者您可以重新加载页面，或者您可以 return 局部视图，然后将其附加到 div。首选return一个Json然后append上面的方式

使用来自 AJAX Post、MVC 5 的添加记录更新网格

Update grid with added record from AJAX Post, MVC 5

c#

ajax

asp.net-mvc

asp.net-mvc-5

jquery-bootgrid