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>

如何从html按钮版本将id = user.id传递给控制器，其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代码中检索单击按钮的值：

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

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

如何将Html.ActionLink转换为链接到Ajax调用的按钮？

1 个答案: