Eine AJAX-Aktionsverbindung von einer Controlleraktion dynamisch zurückgeben

Question

Ich versuche, eine Schaltfläche in jeder Zeile einer Tabelle mit Benutzernamen zu erstellen, die eine Sperr-/Entsperrungsfunktion für jeden Benutzer aktiviert. Ich möchte AJAX verwenden, damit ich nicht jedes Mal die Benutzer abrufen muss, wenn die Seite neu geladen wird. Es ist einfach, einen AJAX-Aktionslink in der Tabelle zu haben, aber dann war ich fest, was ich von meinem Controller zurückgeben soll, nachdem ich den Benutzer gesperrt oder entsperrt habe. Als ein bisschen Hack gebe ich einen String zurück, der der HTML-Markup für einen neuen AJAX-Aktionslink ist. Ich Theorie kann ich auf die dynamisch zurückgegebene Schaltfläche klicken und weiterhin das Sperren/Entsperren umschalten. Zu meinem Erstaunen funktionierte das, bis ich auf den Knopf geklickt habe. Die dynamische Schaltfläche gibt die korrekte Markierung zurück, aber sie befindet sich auf einer leeren Seite. Um die Angelegenheit weiter zu komplizieren benutze ich einen benutzerdefinierten Helfer, um meinen Aktionslink auszugeben. Ich habe den gesamten untenstehenden Code beschrieben. Wenn jemand sehen könnte, was schief gehen könnte oder einen besseren Weg, um mit dieser Situation fertig zu werden, wäre ich dankbar.

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

Controller:

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

Ausblick:

<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

Es könnte mehrere Ansätze, wie:

In der Client-Seite, wenn der Benutzer auf ein L klickt ock/Unlock-Link, senden Sie eine Ajax-Anfrage an den Server, um den Sperrstatus zu ändern, senden Sie die Benutzer-ID mit dem Ajax-Aufruf; Bei der Aktion 'Sperren' auf dem Server wird der Benutzersperrstatus aktualisiert und der geänderte Benutzerstatus wird als JSON-Daten an den Client zurückgegeben. Ändern Sie basierend auf dem Ergebnis das CSS der Verknüpfung, um den aktuellen Sperrstatus zu berücksichtigen. Hier ist der Beispielcode:

Ausblick:

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

Beispiel 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> 

Controller:

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

Dieser Ansatz hält Ihre Controller-Aktion dünn und trocken. Ich denke, das Generieren der Ansicht als String innerhalb der Controller-Aktion ist keine gute Übung.

konnte Ein anderer Ansatz sein:

Wickeln Sie die Sperr Ansicht in einer Teilansicht (z UserEnableView.ascx.). Die Aktion 'Sperren' sollte die Teilansicht zurückgeben, nachdem der Sperrstatus des Benutzers aktualisiert wurde. z.B.

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