title: Update grid with added record from AJAX Post, MVC 5
body: <p>I've seen quite a few posts on this, but I wanted to try to get a best practice down before going down the route I think I will likely need to go. I'm attempting to update my view after I've inserted a new record into the database:</p>
  
  <p>Pretty basic set-up:</p>
  
  <pre><code>&lt;table id="grid-basic" class="table table-condensed table-hover table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-column-id="role_id"&gt;ID&lt;/th&gt;
              &lt;th data-column-id="description"&gt;Description&lt;/th&gt;
              &lt;th data-column-id="commands" data-formatter="commands" data-sortable="false"&gt;Commands&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;@item.Id&lt;/td&gt;
                  &lt;td&gt;@item.Name&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td style="padding-right: 20px;"&gt;
                  &lt;div id="add-role-text-group" class="form-group"&gt;
                      &lt;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."/&gt;
                      &lt;span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td style="vertical-align: middle;"&gt;&lt;button type="button" class="btn btn-xs btn-default command-add"&gt;&lt;span class="fa fa-plus"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My C# code</p>
  
  <pre><code>// GET: Application Role Management
          [Route("role")]
          public ActionResult Role()
          {
              return View(RoleManager.Roles.ToList&lt;IdentityRole&gt;());
          }
  
          [HttpPost]
          [Route("addrole")]
          public async Task&lt;ActionResult&gt; 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");
              }
          }
  </code></pre>
  
  <p>AJAX POST</p>
  
  <pre><code>$.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"
  });
  </code></pre>
  
  <p>I load the View, grab all the roles in the system and display into a grid. I have an inline row for insertion of a new role. I type in the new role, click a plus button. It POSTs to the AddRole route. How can I now update the model and update the grid?</p>
  
  <p>From what I've seen, I need to run the insert, grab all the roles again, and update the grid in the "success" event. Is this true? Or is there a more conventional, MVC means to doing this via ASP.net? Obviously, I could go down the path of using Knockout or something to that extent, but I'm wondering if there is a means to updating the view this way.</p>