Question

我正在研究asp.net mvc项目。

我想从所选行（单击“管理”按钮的行）中获取单元格值。在这种情况下为userID的值。

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
    <tr>
        <th width="45%">User ID</th>
        <th width="45%">User Name</th>
        <th width="5%">View</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.TypeList)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.UserId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td>
                <input id="Manage2" class="btn btn-primary" type="button" value="Manage" />
            </td>
        </tr>
    }
</tbody>

我正在调用jQuery click函数和Ajax调用，并希望将数据中的UserId值从选定行发送到控制器。

下面是jQuery ajax调用，

    <script type="text/javascript">
  $(document).ready(function () {
      $('#Manage2').click(function () {
          //alert(1);

          var url = '@Url.Action("ManageUserRole", "UserRoleCompany")';

          $.ajax({
              url: url,
              data: { Id: '1' },
              cache: false,
              type: "POST",
              success: function (data) {
                  $("#Data").html(data);
              },
              error: function (reponse) {
                  alert("error : " + reponse);
              }
          });
      });
    });

</script>

下面是查看屏幕截图，

Answer 1

您实际上可以使用按钮本身上的 html 5数据属性存储UserId值。

您当前的代码在循环中硬编码了Id属性值，这将创建多个具有相同Id值的元素。那是无效的HTML！

删除Id并使用更通用的选择器连接click事件。在这里，我向按钮添加了另一个CSS类“ manage”。

<input data-userid="@item.UserId" class="btn btn-primary manage" 
                                  type="button" value="Manage" />

现在

$(document).ready(function () {    
      $('.manage').click(function () {
         var id = $(this).data("userid");
         alert(id);
         // use id for your ajax call
      });    
});

您不必仅在以后将其用作选择器时添加额外的CSS类。由于您要添加data属性，因此您也可以将其简单地用于jQuery选择器。

$(function () {

    $('[data-userid]').click(function () {
        var id = $(this).data("userid");
        alert(id);
        // use id
    });

});

Answer 2

由于按钮中的id属性重复，您的HTML无效。

删除id="Manage2"，并用类名和data-属性替换值

<input data-id="@item.UserId" class="btn btn-primary Manage2" type="button" value="Manage" />

然后在脚本中，使用获取值

$('.Manage2').click(function () { // class selector
   var id = $(this).data('id);
   var url = '@Url.Action("ManageUserRole", "UserRoleCompany")';
   $.ajax({
      url: url,
      data: { Id: id },
      ....

或者您可以使用相对选择器

$('.Manage2').click(function () {
    var id = $(this).closest('tr').children('td:first').text();
    ....

在jQuery中获取表asp.net中选定行的表列值

2 个答案: