如何从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从html按钮版本传递到控制器，该按钮的click事件与Ajax有关？ 我的目标是使用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-*属性中。 像这样：

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

然后在jQuery代码中检索clicked按钮的值：

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

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