Databases
StackOverflow2013
Postsdbo
POmvc4 ajax updating same page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmvc4 ajax updating same page
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload