получить значение столбца таблицы выбранной строки в таблице asp.net в jQuery - PullRequest
Новая
       28

получить значение столбца таблицы выбранной строки в таблице asp.net в jQuery

0 голосов
/ 03 октября 2018

Я работаю над проектом 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 и вызов 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>

Ниже приведен снимок экрана просмотра,

enter image description here

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

На самом деле вы можете сохранить значение UserId с помощью html 5 атрибута данных на самой кнопке.

Ваш текущий код имеет Id значение атрибута, жестко запрограммированное внутри цикла, что создастболее одного элемента с одинаковым значением Id.Это недопустимый HTML!

Удалите Id и используйте более общий селектор, чтобы связать событие щелчка.Здесь я добавил еще один CSS-класс «управление» для кнопки. 

<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
    });

});
0 голосов
/ 03 октября 2018

У вас недействительный html из-за дубликатов атрибутов id в вашей кнопке.

Удалите 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();
    ....
...