使用 Jquery 在 Razor 中获取元素值

Posted 2023-04-13

【中文标题】使用 Jquery 在 Razor 中获取元素值

【英文标题】：Get element value in Razor with Jquery

【发布时间】：2021-07-11 13:02:08

【问题描述】：

我有一个这样的 foreach 循环。我想在按下“删除”按钮时获取项目 ID。

 <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name - Sirname</th>
                <th>Date - Time</th>
                <th>Message</th>
                <th>id</th>
            </tr>
        </thead>
        <tbody>

            @foreach (var item in Model.Items)
            
                <tr>
                    <th>@(Model.Items.IndexOf(item)+1)</th>
                    <td>@item.Name</td>
                    <td>@item.DateTime</td>
                    <td>@item.Message</td>
                    <td  id="itemId">@item.id</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            

        </tbody>
    </table>

我的Qjuery就是这样的；

        $("button").click(function () 
            var id = $("#itemId").html();
            $("#sonuc").html(id);
        );
    );

我的结果一定在里面；

<p id="sonuc"> </p>

但每次它只显示第一个项目的表 id。那么如何使用 Jquery 获取循环中每个元素的值？

【问题讨论】：

你不应该有多个具有相同 id 的元素。 ID 必须是唯一的

@Wazeed 那将是一个坏主意，因为您的解决方案仍然会导致他拥有多个具有相同 id 的元素

@CarstenLøvboAndersen，是的，为多个 HTML 元素使用相同的 ID 是个坏主意。最好使用class 或data-attribute 来正确引用元素

@Wazeed 我知道这就是我说你的建议不好的原因。

好的，感谢您的反馈。我已删除包含不良建议的评论。

【参考方案1】：

您可以使用var id = $(this).parent().prev().text();

演示

$("button").click(function() 
  var id = $(this).parent().prev().text();
  $("#sonuc").html(id);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name - Sirname</th>
      <th>Date - Time</th>
      <th>Message</th>
      <th>id</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th>@(Model.Items.IndexOf(item)+1)</th>
      <td>@item.Name</td>
      <td>@item.DateTime</td>
      <td>@item.Message</td>
      <td>@item.id1</td>
      <td><button class="btn btn-danger">Delete</button></td>
    </tr>

    <tr>
      <th>@(Model.Items.IndexOf(item)+1)</th>
      <td>@item.Name</td>
      <td>@item.DateTime</td>
      <td>@item.Message</td>
      <td>@item.id2</td>
      <td><button class="btn btn-danger">Delete</button></td>
    </tr>

  </tbody>
</table>
<p id="sonuc"> </p>

【讨论】：

@FurkanDURMUŞ 没问题，很乐意提供帮助

【参考方案2】：

每个元素的 ID 必须是唯一的，如果您想获取项目 ID 的值并在按下删除按钮后使用 razor，您可以将删除按钮上的项目 ID 的值设置为 ID 或数据属性，因此 你可以试试

<td id="[e-mail]">@item.id</td>

<button id="@item.Id" class="btn btn-danger">Delete</button>

而不是

<td id="itemId">@item.id</td>

<button class="btn btn-danger">Delete</button>

  $("button").click(function () 
        var id = this.id; // value of itemId
        
    );
);