javascript - 如何从 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 按钮版本传递到 Controller ，其点击事件与 Ajax 绑定(bind)？我的目标是使用 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。

Controller 中编辑方法的签名分别为 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 代码中检索单击的按钮的值:

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

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