Question

我正在尝试在用户名表的每一行上创建一个按钮，以便针对每个用户切换锁定/解锁功能。我想使用AJAX，所以每次页面重新加载时我都不必获取所有用户。很容易在表格中有一个AJAX动作链接，但是当我锁定或解锁用户后，我被困在控制器返回的内容中。作为一个黑客，我返回一个字符串，这是一个新的AJAX动作链接的html标记。我理论上我可以点击动态返回的按钮，然后继续切换锁定/解锁。令我惊讶的是，这实际上是有效的，直到我点击按钮。动态按钮确实返回正确的标记，但它在空白页面上。更复杂的是，我正在使用自定义助手来输出我的操作链接。我已经详细介绍了下面的所有代码，如果有人能够看到可能出现的问题或更好的方法来处理这种情况，我将不胜感激。

HTML Helper：

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

查看：

<td id="<%= Html.Encode("Enable-" + user.Id) %>" class="icon-column">
                    <% if(user.IsEnabled)
                       { %>
                           <%--<img class="LockImg" alt="User Unlocked" src="<%= Url.Content("~/Content/Images/unlock.png") %>" />--%>
                           <%= Ajax.ImageActionLink(Url.Content("~/Content/Images/unlock.png"), "Lock", "Lock", new { id = user.Id.ToString() }, new AjaxOptions { Confirm = "Lock User?", HttpMethod = "Post", UpdateTargetId = "Enable-" + user.Id })%>
                    <% }
                       else
                       {%>
                           <%= Ajax.ImageActionLink(Url.Content("~/Content/Images/lock.png"), "Lock", "Lock", new { id = user.Id.ToString() }, new AjaxOptions { Confirm = "Unlock User?", HttpMethod = "Post", UpdateTargetId = "Enable-" + user.Id })%>
                    <% }%>
                </td>

Answer 1

可能有多种方法，例如：

在客户端，当用户点击锁定/解锁链接时，向服务器发布Ajax请求以更改锁定状态，发送带有Ajax调用的user-Id;在服务器中的“锁定”操作内，更新用户锁定状态，并将更改的用户状态作为JSON数据返回给客户端。根据结果，更改链接的CSS以反映当前的锁定状态。以下是示例代码：

查看：

<td>
 <a class='<%= (item.IsLocked ? "userLock" : "userUnlock") %>' 
    href='<%= Url.Action("ResetLock", new {id = item.Name, isLocked = item.IsLocked}) %>'>
 </a> 
</td>

示例CSS：

.userLock,
.userUnlock
{
    background-image: url('/MMWeb/Content/Images/lock.png');
    display: block;
    height: 16px;
    width: 16px;                        
}
.userUnlock
{
    background-image: url('/MMWeb/Content/Images/unlock.png');
}

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>

控制器：

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

此方法可使您的控制器操作变薄并且干燥。我认为，在控制器的动作中生成视图作为字符串不是一个好习惯。

另一种方法可能是：

在部分视图中包裹锁定视图（例如UserEnableView.ascx）。更新用户的锁定状态后，“锁定”操作方法应返回局部视图。 e.g。

public ActionResult Lock(Guid id)
{
    //......
    //Update user locking status.
    //....
   if (Request.IsAjaxRequest()) {
      return PartialView( "UserLockView", updatedModel);
   }
   else{
      return View(updatedModel);
   }          
}

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

1 个答案: