循环生成表格中TextBox取值异常问题（C#+JS）

循环生成表格行时，所有输入框使用了重复的ID（isletmeadi、veritabani、sube），而HTML规范要求ID必须唯一。当你用$("#isletmeadi")这类选择器时，jQuery只会返回页面中第一个匹配该ID的元素，所以无论修改哪一行的内容，获取到的都是第一行的值。

1. 修改HTML（Razor） #

将输入框的id替换为class，保留循环逻辑：

<table id="kullanicilistesi" class="table mb-3 table-center">
  <thead>
    <tr>
      <th class="border-bottom text-start py-3">Şirket Adı</th>
      <th class="border-bottom text-start py-3">Database (Veri Tabanı)</th>
      <th class="border-bottom text-center py-3">Şube</th>
      <th class="border-bottom text-center py-3">Diğer</th>
    </tr>
  </thead>

  <tbody>
    @foreach (var item in AdminStatic.GetIsletme()) {
    <tr>
      <td>
        <input type="text" class="form-control isletmeadi" value="@item.IsletmeAdi" />
      </td>
      <td> <input type="text" class="form-control veritabani" value="@item.VeriTabani" /></td>
      <td> <input type="text" class="form-control sube" value="@item.Sube" /></td>
      <td>
        <a style="color:limegreen;" href="javascript:void(0)" data-idd="@item.ID" onclick="IsletmeDuzenle(this)">
          <i class="uil uil-check"></i>
        </a>
        <a style="color: rgb(217, 37, 37); " href="javascript:void(0)" onclick="IsletmeSil(@item.ID)">
          <i class="uil uil-trash"></i>
        </a>
      </td>
    </tr>
    }
  </tbody>
</table>

2. 修改JavaScript #

通过点击的按钮找到所在的表格行（tr），再在该行内查找对应的输入框，获取当前行的真实值：

function IsletmeDuzenle(t) {
    var $row = $(t).closest('tr'); // 获取当前点击按钮所在的表格行
    var id = $(t).data('idd');
    var isletmeAdi = $row.find('.isletmeadi').val();
    var veritabani = $row.find('.veritabani').val();
    var sube = $row.find('.sube').val();

    getValue($baseUrl + "/B2BAdmin/IsletmeDuzenle",
        { id: id, isletmeAdi: isletmeAdi, veritabani: veritabani, sube: sube },
        function (data, err) {
            if (data=="Basarili") {
                Swal.fire({
                    title: 'Başarılı',
                    html: 'İşletme Başarıyla Güncellenmiştir',
                    icon: 'success'
                }).then(function (result) {
                    window.location.reload();
                });
            }
        })
}

用事件委托代替内联onclick，减少DOM耦合，代码更易维护：

1. 移除HTML中的onclick属性，给保存按钮加统一class：

<a style="color:limegreen;" href="javascript:void(0)" data-idd="@item.ID" class="btn-isletme-duzenle">
  <i class="uil uil-check"></i>
</a>

2. 在JS中绑定事件委托：

$(document).on('click', '.btn-isletme-duzenle', function() {
    var $row = $(this).closest('tr');
    var id = $(this).data('idd');
    var isletmeAdi = $row.find('.isletmeadi').val();
    var veritabani = $row.find('.veritabani').val();
    var sube = $row.find('.sube').val();

    getValue($baseUrl + "/B2BAdmin/IsletmeDuzenle",
        { id: id, isletmeAdi: isletmeAdi, veritabani: veritabani, sube: sube },
        function (data, err) {
            if (data=="Basarili") {
                Swal.fire({
                    title: 'Başarılı',
                    html: 'İşletme Başarıyla Güncellenmiştir',
                    icon: 'success'
                }).then(function (result) {
                    window.location.reload();
                });
            }
        })
});

内容的提问来源于stack exchange，提问作者Ahmet Enes Söylemez