title: mvc4 ajax updating same page
body: <p>I have a list of users on a page, they are loaded during an ajax event when I click on a tab (easytabs).  I then ajax load a create new user partial view to the same tab.  I then create a new user using this form, but I do not know how to re-load the first partial view with a new list of users (including the newly created user).</p>
  
  <p><strong>HTML to load tab panel with list of users:</strong></p>
  
  <pre><code>&lt;%= Ajax.ActionLink("Manage Users", "tabsUsers", null, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "ManageUsersPartial", InsertionMode = InsertionMode.Replace }, htmlAttributes: new { data_target = "#tabs-users" })%&gt;
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>[HttpGet]
  public PartialViewResult tabsUsers()
  {
      return PartialView("UsersPartial", userManager.GetUsers());
  }
  </code></pre>
  
  <p><strong>UsersPartial View</strong></p>
  
  <pre><code>    &lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;IEnumerable&lt;LMS.Data.User&gt;&gt;" %&gt;
  
  &lt;p&gt;
      &lt;%: Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "CreateUserPartial", InsertionMode = InsertionMode.Replace })%&gt;
  &lt;/p&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;
              &lt;%: Html.DisplayNameFor(model =&gt; model.UserName) %&gt;
          &lt;/th&gt;
          &lt;th&gt;
              &lt;%: Html.DisplayNameFor(model =&gt; model.FirstName) %&gt;
          &lt;/th&gt;
          &lt;th&gt;
              &lt;%: Html.DisplayNameFor(model =&gt; model.LastName) %&gt;
          &lt;/th&gt;
          &lt;th&gt;
              &lt;%: Html.DisplayNameFor(model =&gt; model.Email) %&gt;
          &lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
  
  &lt;% foreach (var item in Model) { %&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;%: Html.DisplayFor(modelItem =&gt; item.UserName) %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: Html.DisplayFor(modelItem =&gt; item.FirstName) %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: Html.DisplayFor(modelItem =&gt; item.LastName) %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: Html.DisplayFor(modelItem =&gt; item.Email) %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: Html.ActionLink("Edit", "Edit", new { id = item.UserID })%&gt; |
              &lt;%: Html.ActionLink("Details", "Details", new { id=item.UserID }) %&gt; |
              &lt;%: Html.ActionLink("Delete", "Delete", new { id=item.UserID }) %&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;% } %&gt;
  
  &lt;/table&gt;
  
  &lt;br /&gt;
  
  &lt;div id="CreateUserPartial"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This works great, every time I click the tab, the data is re-loaded as expected.</p>
  
  <p>Now, </p>
  
  <p>In the UsersPartial view, I have another Ajax Actionlink that loads another partial view into this partial view, to create a new user:</p>
  
  <p><strong>HTML Ajax Actionlink from UsersPartial View:</strong></p>
  
  <pre><code>&lt;%: Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "CreateUserPartial", InsertionMode = InsertionMode.Replace })%&gt;
  </code></pre>
  
  <p>This loads the following <strong>CreateUserView view</strong> inside of the UsersPartial view:</p>
  
  <pre><code>    &lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;LMS.Data.User&gt;" %&gt;
  
  &lt;script src="&lt;%: Url.Content("~/Scripts/jquery-1.6.2.min.js") %&gt;"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.min.js") %&gt;"&gt;&lt;/script&gt;
  &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %&gt;"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('form').submit(function () {
              if ($(this).valid()) {
                  $.ajax({
                      url: this.action,
                      type: this.method,
                      data: $(this).serialize(),
                      success: function (result) {
                          $('#result').html(result);
                      }
                  });
              }
              return false;
          });
      });
  &lt;/script&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  
  &lt;% using (Html.BeginForm())
     { %&gt;
  &lt;%: Html.ValidationSummary(true, "Could not create new user.") %&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;User&lt;/legend&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.UserName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.UserName) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.UserName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.FirstName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.FirstName) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.FirstName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.LastName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.LastName) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.LastName) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.Password) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.Password) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.Password) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;%: Html.LabelFor(model =&gt; model.Email) %&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;%: Html.EditorFor(model =&gt; model.Email) %&gt;
          &lt;%: Html.ValidationMessageFor(model =&gt; model.Email) %&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Create" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;% } %&gt;
  &lt;div&gt;
      &lt;%: Html.ActionLink("Back to List", "Index") %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally, the code for CreateUser is called in the controller
  <strong>CreateUserPartial Controller code:</strong></p>
  
  <pre><code>[HttpPost]
      public ActionResult Create(AccountUser user)
      {
          if (ModelState.IsValid)
          {
              try
              {
                  user.Password = user.Password.Encrypt();
                  userManager.AddUser(user);
              }
              catch (DbEntityValidationException dbex)
              {
                  foreach (var validationErrors in dbex.EntityValidationErrors)
                  {
                      foreach (var validationError in validationErrors.ValidationErrors)
                      {
                          ModelState.AddModelError(validationError.PropertyName, validationError.ErrorMessage);
                      }
                  }
              }
              catch (DbUpdateException dbuex)
              {
                  if (dbuex.InnerException != null)
                      if (dbuex.InnerException.InnerException != null)
                          if (dbuex.InnerException.InnerException.Message.Contains("Cannot insert duplicate key row in object"))
                              return Content("User already exists!", "text/html");
                  else
                      ModelState.AddModelError("", "An unknown error occured when creating the user.");
              }
              catch (Exception)
              {
                  ModelState.AddModelError("", "An unknown error occured when creating the user.");
              }
          }
  
          return Content("User created!", "text/html");
      }
  </code></pre>
  
  <p>This all works...when a user is created, it says User created! as expected.  </p>
  
  <p>Now on to my question, how do I re-load the list within the UsersPartial view with the new user?  I cannot figure this part out.  I have a feeling it has to do with the jQuery ajax success method, but I do not know how to re-load the list of users, including this newly created one.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks!</p>