Wie konvertiert man von Html.ActionLink zu einer Schaltfläche, die mit Ajax-Aufruf verknüpft ist?

Question

Ich habe den folgenden Code:

<button class="btn btn-primary btn-xs" id="edituserbutton"> 
     Edit 
</button> 

Wie kann ich die id = user.id von an die Steuerung übergeben:

@Html.ActionLink("Edit", "Edit", new { id = user.Id }, 
    new { @class = "btn btn-primary btn-xs", @id="edituserbutton"}) 

Und mein Teil-Versuch, es auf eine Schaltfläche zu konvertieren ist wie folgt die html button version, deren click event an einen Ajax gebunden ist? Mein Ziel ist es, den Bearbeitungsbildschirm auf der aktuellen Seite mit Ajax aufzurufen, anstatt auf einer separaten Seite zur Bearbeitungsseite zu navigieren (was beim ActionLink-Edit der Fall ist).

$("#edituserbutton").click(function (event) 
{ 


       event.preventDefault(); 
       // alert("edit clicked"); 

       $.ajax({ 
        url: "/Admin/Edit", 
        cache: false, 
        data: {} 
       }).done(function (htmlResponse) { 
        $("#tabs-1ua").html(htmlResponse); 
       }); 



}); 

tabs-1ua ist die div für die jQueryUI Registerkarte ich in die Edit-Seite geladen werden soll.

Die Unterschriften für die Bearbeitungsverfahren in der Steuerung sind jeweils für die GET und POST folgt:

public async Task<ActionResult> Edit(string id) 
{ 
       AppUser user = await UserManager.FindByIdAsync(id); 
       if (user != null) 
       { 
        return View(user); 
       } 
       else 
       { 
        return RedirectToAction("Index"); 
       } 
} 

[HttpPost] 
public async Task<ActionResult> Edit(string id, string email, string password) 
{ 
    //code 
} 

Danke.

Answer 1

Sie können den Wert id in einem data-* Attribut speichern. Etwas wie folgt aus:

<button class="btn btn-primary btn-xs" id="edituserbutton" data-id="@user.Id"> 
    Edit 
</button> 

Dann in der jQuery-Code abrufen, den Wert der angeklickten Schaltfläche:

$("#edituserbutton").click(function (event) 
{ 
    event.preventDefault(); 

    $.ajax({ 
     url: "/Admin/Edit", 
     cache: false, 
     data: { id : $(this).data('id') } 
    }).done(function (htmlResponse) { 
     $("#tabs-1ua").html(htmlResponse); 
    }); 
});