Html.ActionLinkをAjaxコールにリンクされているボタンに変換する方法はありますか？

Question

私は次のコードを持っている：

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

を、次のようにボタンに変換するために私の部分的試みがある：

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

はどのようにしてから、コントローラにID = user.idを渡すことができますクリックイベントがAjaxに関連付けられているhtmlボタンのバージョン？私の目標は、別のページの編集ページに移動する代わりに、Ajaxを使用して現在のページに編集画面を表示することです（これはActionLink編集で行われます）。

$("#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私はに編集ページをロードするjqueryUIのタブのdiv要素です。それぞれGETとPOSTのために、次のようにコントローラ内の編集方法について

署名は以下のとおりです。

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 
} 

ありがとうございました。

Answer 1

idの値をdata-*属性に格納できます。このような何か：

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

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