从控制器动作动态返回AJAX动作链接
我正在尝试在用户名表的每一行上创建一个按钮,用于切换针对每个用户的锁定/解锁功能。我想使用AJAX,这样我就不必在每次重新加载页面时获取所有用户。在表中有一个AJAX操作链接是很容易的,但是在锁定或解锁用户之后,我一直无法确定从控制器返回什么。作为一个小技巧,我返回一个字符串,它是新AJAX操作链接的html标记。我可以点击动态返回按钮,继续切换锁定/解锁。令我惊讶的是,这居然奏效了,直到我点击按钮。动态按钮确实返回正确的标记,但它位于空白页上。为了使事情进一步复杂化,我使用了一个自定义的助手来输出我的动作链接。我已经在下面详细介绍了所有的代码,如果有人能看到哪里出了问题,或者有更好的方法来处理这种情况,我将不胜感激 HTML帮助程序:从控制器动作动态返回AJAX动作链接,ajax,asp.net-mvc,asp.net-ajax,Ajax,Asp.net Mvc,Asp.net Ajax,我正在尝试在用户名表的每一行上创建一个按钮,用于切换针对每个用户的锁定/解锁功能。我想使用AJAX,这样我就不必在每次重新加载页面时获取所有用户。在表中有一个AJAX操作链接是很容易的,但是在锁定或解锁用户之后,我一直无法确定从控制器返回什么。作为一个小技巧,我返回一个字符串,它是新AJAX操作链接的html标记。我可以点击动态返回按钮,继续切换锁定/解锁。令我惊讶的是,这居然奏效了,直到我点击按钮。动态按钮确实返回正确的标记,但它位于空白页上。为了使事情进一步复杂化,我使用了一个自定义的助手来
public static string ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
{
var builder = new TagBuilder("img");
builder.MergeAttribute("src", imageUrl);
builder.MergeAttribute("alt", altText);
var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);
return link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing));
}
控制器:
public string Lock(Guid id)
{
IUserMethods userMethods = new UserMethods();
ISMPUser user = userMethods.GetUser(id, CompanyId);
string ajaxButtonHTML;
//For some reason breaking the button HTML into substrings and appending them together for readability causes the anchor tag to render incorrectly.
if (user.IsEnabled)
{
userMethods.AdministratorEnableAccount(CompanyId, CurrentUser.Id, user.Username, false);
ajaxButtonHTML = "<a class=\"row_selected\" href=\"/MMWeb/Admin/Lock/" + id.ToString() + "\" onclick=\"Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, confirm: 'Lock User?', httpMethod: 'Post', updateTargetId: 'Enable-'" + user.Id + "' });\"><img src=\"/MMWeb/Content/Images/lock.png\" alt=\"Lock\"></a>";
}
else
{
userMethods.AdministratorEnableAccount(CompanyId, CurrentUser.Id, user.Username, true);
ajaxButtonHTML = "<a class=\"row_selected\" href=\"/MMWeb/Admin/Lock/" + id.ToString() + "\" onclick=\"Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, confirm: 'Lock User?', httpMethod: 'Post', updateTargetId: 'Enable-'" + user.Id + "' });\"><img src=\"/MMWeb/Content/Images/unlock.png\" alt=\"Unlock\"></a>";
}
return ajaxButtonHTML;
}
[HttpPost]
public ActionResult ResetLock(Guid id)
{
//......
//Update user locking status.
//user.IsEnabled = !user.IsEnabled;
//......
var updatedModel = new {
status = "Succeed",
IsLocked = user.IsEnabled
};
return Json(updatedModel);
}
视图:
可能有几种方法,例如: 在客户端,当用户点击锁定/解锁链接时,向服务器发出Ajax请求以更改锁定状态,并通过Ajax调用发送用户Id;在服务器中的“锁定”操作中,更新用户锁定状态,并将更改的用户状态作为JSON数据返回给客户端。根据结果,更改链接的CSS以反映当前锁定状态。以下是示例代码: 视图: javaScript:
<script type="text/javascript">
$(function () {
$('a.userLock, a.userUnlock').click(function (e) {
e.preventDefault()
var $this = $(this);
$.ajax({
url: $this.attr('href'),
type: "POST",
dataType: "json",
success: function (result, textStatus, jqXHR) {
if (result.status == "Succeed") {
if (result.IsLocked == true) {
$this.removeClass('userUnlock').addClass('userLock');
}
else {
$this.removeClass('userLock').addClass('userUnlock');
}
}
},
error: function () {
alert('Failed to reset lock.');
}
});
});
});
</script>
这种方法可以使控制器的操作保持精简和干燥。
我认为,在控制器的操作中以字符串形式生成视图不是一种好的做法
另一种办法可以是:
将锁定视图包装在局部视图中,例如。UserEnableView.ascx。
更新用户锁定状态后,“锁定”操作方法应返回部分视图。e、 g
public ActionResult Lock(Guid id)
{
//......
//Update user locking status.
//....
if (Request.IsAjaxRequest()) {
return PartialView( "UserLockView", updatedModel);
}
else{
return View(updatedModel);
}
}
<script type="text/javascript">
$(function () {
$('a.userLock, a.userUnlock').click(function (e) {
e.preventDefault()
var $this = $(this);
$.ajax({
url: $this.attr('href'),
type: "POST",
dataType: "json",
success: function (result, textStatus, jqXHR) {
if (result.status == "Succeed") {
if (result.IsLocked == true) {
$this.removeClass('userUnlock').addClass('userLock');
}
else {
$this.removeClass('userLock').addClass('userUnlock');
}
}
},
error: function () {
alert('Failed to reset lock.');
}
});
});
});
</script>
[HttpPost]
public ActionResult ResetLock(Guid id)
{
//......
//Update user locking status.
//user.IsEnabled = !user.IsEnabled;
//......
var updatedModel = new {
status = "Succeed",
IsLocked = user.IsEnabled
};
return Json(updatedModel);
}
public ActionResult Lock(Guid id)
{
//......
//Update user locking status.
//....
if (Request.IsAjaxRequest()) {
return PartialView( "UserLockView", updatedModel);
}
else{
return View(updatedModel);
}
}