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

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

从我所见过的，我需要运行插入，再次获取所有角色，并在＆＃34;成功＆＃34;中更新网格。事件。这是真的？或者是否有更传统的，MVC意味着通过ASP.net这样做？显然，我可以沿着使用Knockout或者某种程度的方式走下去，但我想知道是否有办法以这种方式更新视图。

Answer 1

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

在ajax调用中添加成功函数，并在下面添加

＆＃13;

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

＆＃13;

Answer 2

您的POST方法正在尝试重定向到另一个操作方法，但是ajax调用不会重定向。更改方法以返回新角色Id值并将其作为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，根据文本框的值和返回的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");
 }
}

如果是关于更新表格，那么你可以在表格中添加一行上面的方法或者您可以重新加载页面，否则您可以返回局部视图，然后将其附加到div。最好返回一个Json，然后按上述方式添加。

使用AJAX Post，MVC 5添加记录更新网格

3 个答案: