如何从表中传递价值AJAX功能Asp.net

Question

我在上市我的Asp.net MVC的所有用户身份名称

<table class="table table-condensed"> 
<thead> 
    <tr> 
     <th>User Name</th> 
     <th>Details</th> 
    </tr> 
</thead> 
<tbody> 
    @if (Model != null) 
     { 
      foreach (var item in Model) 
      { 
      <tr> 
       <td>@item.UserName</td> 
       <td> <input type="button" id="show" class="show" value="Show Roles" /></td> 
      </tr> 
     } 
    } 
</tbody> 

我想使用Ajax时显示用户信息按钮显示被点击

为此，我添加了div来显示相同​​视图中的数据;

<div id="target">Trigger</div> 

和Ajax来自行动控制得到细节

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.show').click(function() { 

     $.ajax({ 
      type: 'GET', 
      data: { UserName:'xxxxxxx'}, 
      url: '@Url.Action("DisplyRoles","Admin")', 
      success: function (result) { 
       $("#target").html(result); 

      }, 
      error: function (error) { 
       alert("Error"); 

      } 
     }); 

    }); 
    }); 

我的问题： 放什么，而不是XXXXXX，我想通过这在当前用户名同一排显示按钮？

Answer 1

在<button>中添加data-属性。还要注意的是，你应该删除id属性（重复id属性是无效的HTML）

<input type="button" data-username="@item.UserName" class="show" value="Show Roles" /> 

，然后访问它在脚本

$('.show').click(function() { 
    var name = $(this).data('username'); 
    $.ajax({ 
     type: 'GET', 
     data: { UserName: name }, 
     url: '@Url.Action("DisplyRoles","Admin")', 
     success: function (result) { 

您还可以通过从以前的阅读价值访问<td>元素

var name = $(this).closest('tr').find('td').eq(0).text();