我在页面上有一个用户列表,当我单击选项卡(easytabs)时,它们会在 ajax 事件期间加载。然后,我将 ajax 加载到同一选项卡中的创建新用户部分视图。然后我使用此表单创建一个新用户,但我不知道如何使用新的用户列表(包括新创建的用户)重新加载第一个部分视图。
用于加载带有用户列表的选项卡面板的 HTML:
<%= Ajax.ActionLink("Manage Users", "tabsUsers", null, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "ManageUsersPartial", InsertionMode = InsertionMode.Replace }, htmlAttributes: new { data_target = "#tabs-users" })%>
控制器:
[HttpGet]
public PartialViewResult tabsUsers()
{
return PartialView("UsersPartial", userManager.GetUsers());
}
用户部分视图
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<LMS.Data.User>>" %>
<p>
<%: Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "CreateUserPartial", InsertionMode = InsertionMode.Replace })%>
</p>
<table>
<tr>
<th>
<%: Html.DisplayNameFor(model => model.UserName) %>
</th>
<th>
<%: Html.DisplayNameFor(model => model.FirstName) %>
</th>
<th>
<%: Html.DisplayNameFor(model => model.LastName) %>
</th>
<th>
<%: Html.DisplayNameFor(model => model.Email) %>
</th>
<th>Actions</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: Html.DisplayFor(modelItem => item.UserName) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.FirstName) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.LastName) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Email) %>
</td>
<td>
<%: Html.ActionLink("Edit", "Edit", new { id = item.UserID })%> |
<%: Html.ActionLink("Details", "Details", new { id=item.UserID }) %> |
<%: Html.ActionLink("Delete", "Delete", new { id=item.UserID }) %>
</td>
</tr>
<% } %>
</table>
<br />
<div id="CreateUserPartial"></div>
这很好用,每次我单击选项卡时,数据都会按预期重新加载。
现在,
在 UsersPartial 视图中,我有另一个 Ajax Actionlink 将另一个局部视图加载到此局部视图中,以创建一个新用户:
来自 UsersPartial 视图的 HTML Ajax Actionlink:
<%: Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "CreateUserPartial", InsertionMode = InsertionMode.Replace })%>
这会在 UsersPartial 视图中加载以下CreateUserView视图:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<LMS.Data.User>" %>
<script src="<%: Url.Content("~/Scripts/jquery-1.6.2.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"></script>
<script type="text/javascript">
$(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;
});
});
</script>
<div id="result"></div>
<% using (Html.BeginForm())
{ %>
<%: Html.ValidationSummary(true, "Could not create new user.") %>
<fieldset>
<legend>User</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.UserName) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.UserName) %>
<%: Html.ValidationMessageFor(model => model.UserName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.FirstName) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FirstName) %>
<%: Html.ValidationMessageFor(model => model.FirstName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.LastName) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.LastName) %>
<%: Html.ValidationMessageFor(model => model.LastName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Password) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.Password) %>
<%: Html.ValidationMessageFor(model => model.Password) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Email) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.Email) %>
<%: Html.ValidationMessageFor(model => model.Email) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
最后,在控制器 CreateUserPartial 控制器代码中调用 CreateUser 的代码:
[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");
}
这一切都有效......当创建用户时,它说用户创建!正如预期的那样。
现在我的问题是,如何使用新用户重新加载 UsersPartial 视图中的列表?我无法弄清楚这部分。我感觉它与 jQuery ajax 成功方法有关,但我不知道如何重新加载用户列表,包括这个新创建的用户列表。
有任何想法吗?
谢谢!