Jquery 文本字段在 foreach Razor 中更新

本文关键字:Razor 更新 foreach 文本 字段 Jquery | 更新日期: 2023-09-27 18:17:47

我正在处理一个简单的 asp.net 剃须刀显示页面,在那里我通过ViewBag获取数据。在数据中,有一个供应商 ID,但我想显示供应商名称。该网页:

@foreach (XXX supplier in ViewBag.UnApprovedOrders)
{
<tr >
   <td>
      <text id="supplierName">na</text>
      <script>supplierFromId("@supplier.SupplierId");</script>
   </td>
</tr>

和脚本:

function supplierFromId(supplierId)
{
var name;
for (var i = 1; i < list.length; i++) {
   if (list[i].id == supplierId) name = list[i].name;
}
   $("#supplierName").text(name);
};

该列表是从其他地方提供的供应商列表。问题是:该函数只调用一次,因此只有第一个字段获得正确的名称,其余字段保持"na"。怎么了?

Jquery 文本字段在 foreach Razor 中更新

由于

foreach 循环,您指定的id <text id="supplierName">na</text>将被复制。

我的建议是从使用id改为使用class来识别供应商名称。然后你可以使用 jquery 的 .each 来更新所有类名。

ID 专门标识单个元素。使用类应该可以完成这项工作。类旨在用于多个元素,并允许您更新所有元素

<text id="supplierName">na</text>

您在 id supplierName 中创建许多标签,但只能应用第一个标签。

要解决此问题,请尝试将id转换为class,如下所示:

<text class="supplierName">na</text>

<script>
$(".supplierName").each(function() {
   // do something...
});
</script>

这应该有效:

@foreach (XXX supplier in ViewBag.UnApprovedOrders)
{
<tr >
   <td>
      <text class="supplierName">@supplier.SupplierId</text>
   </td>
</tr>
}
<script>
$(document).ready(function() {
    $('.supplierName').each(function() {
        var supplierId = $(this).text();
        var name = '';
        for (var i = 0; i < list.length; i++) {
           if (list[i].id == supplierId) name = list[i].name;
        }
        $(this).text(name)
    });
});
</script>