从控制器动作动态返回AJAX动作链接

从控制器动作动态返回AJAX动作链接,ajax,asp.net-mvc,asp.net-ajax,Ajax,Asp.net Mvc,Asp.net Ajax,我正在尝试在用户名表的每一行上创建一个按钮,用于切换针对每个用户的锁定/解锁功能。我想使用AJAX,这样我就不必在每次重新加载页面时获取所有用户。在表中有一个AJAX操作链接是很容易的,但是在锁定或解锁用户之后,我一直无法确定从控制器返回什么。作为一个小技巧,我返回一个字符串,它是新AJAX操作链接的html标记。我可以点击动态返回按钮,继续切换锁定/解锁。令我惊讶的是,这居然奏效了,直到我点击按钮。动态按钮确实返回正确的标记,但它位于空白页上。为了使事情进一步复杂化,我使用了一个自定义的助手来

我正在尝试在用户名表的每一行上创建一个按钮,用于切换针对每个用户的锁定/解锁功能。我想使用AJAX,这样我就不必在每次重新加载页面时获取所有用户。在表中有一个AJAX操作链接是很容易的,但是在锁定或解锁用户之后,我一直无法确定从控制器返回什么。作为一个小技巧,我返回一个字符串,它是新AJAX操作链接的html标记。我可以点击动态返回按钮,继续切换锁定/解锁。令我惊讶的是,这居然奏效了,直到我点击按钮。动态按钮确实返回正确的标记,但它位于空白页上。为了使事情进一步复杂化,我使用了一个自定义的助手来输出我的动作链接。我已经在下面详细介绍了所有的代码,如果有人能看到哪里出了问题,或者有更好的方法来处理这种情况,我将不胜感激

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);
   }          
}