MVC foreach 循环唯一 ID C#答案

【问题标题】：MVC foreach loop unique id C#MVC foreach 循环唯一 ID C#
【发布时间】：2023-03-20 10:14:01
【问题描述】：

我有一个foreach 来循环并填充表格中的行。在表中，我调用了函数，并且需要唯一的 id 来为每一行执行函数。它适用于第一行，因为它识别该行的 ID，但下一行具有相同的 ID。我要做的是当其中一行的字段发生更改时，它会计算一个值并将其输入相应行中的另一个字段。

我的表如下

<table class="table">
    <tr>
        <th></th>
        <th class="col1">MFC DRV</th>
        <th class="col1">REF Flow (slpm)</th>
        <th class="col1">Calibration Flow (slpm)</th>
        <th class="col1">% Diff</th>
    </tr>
    @foreach (var item in Model.DILlist)
    {
        <tr>
            <td>
                @Html.HiddenFor(modelItem => item.MFC_PointsID, new { htmlAttributes = new { @id = item.MFC_PointsID } })
            </td>
            <td>
                @Html.DropDownListFor(modelItem => item.selectedDRV, item.DRVs, htmlAttributes: new { style = "Width:75px", @id = "mfc" })
            </td>
            <td>
                @Html.EditorFor(modelItem => item.RefFlow, new { htmlAttributes = new { @id = "refFlow", style = "Width:75px", onkeyup = "myFunction(this)" } })    
            </td>
            <td>
                @Html.EditorFor(modelItem => item.CalFlow, new { htmlAttributes = new { @id = "calFlow", @disabled = "disabled", style = "Width:75px" } })
            </td>
            <td>
                @Html.EditorFor(modelItem => item.Diff, new { htmlAttributes = new { @id = "Diff", @disabled = "disabled", @class = item.Background, style = "Width:75px" } })
            </td>
        </tr>
    }
    <tr>
</table>

还有我的javascript函数

 function myFunction(a) {
    var number = a.id;
    $.ajax({
        type: "POST",
        //Dev
        url: "/CertsHelper/FlowMeterDiffCheck",
        //Test and Production
        //url: "/RMS_SMM/CertsHelper/FlowMeterDiffCheck",
        data: { calFlow: $('#calFlow').val(), refFlow: $('#refFlow').val() },
        dataType: "json",
        success: function (index) {
            $("#Diff").val(index);
            if ($("#Diff").val() <= 2 && $("#Diff").val() >= -2) {
                $("#Diff").css('background', "lightGreen");
                $("#Diff").val(index);
            }
            else {
                $("#Diff").css('background', "indianred");
                $("#Diff").val(index);
            }
        },
        error: function (error) {
            alert("%Diff not working: " + error);
        }
    });
}

【问题讨论】：

标签： javascript c# foreach view

【解决方案1】：

我认为问题在于您将重复的 ID 分配给 DOM 元素。通过连接属性名称和项目 ID，为每个 HTML 元素提供一个唯一 ID。

@Html.EditorFor(modelItem => item.RefFlow, 
    new { htmlAttributes = 
        new { 
              @id = $"refFlow_{item.MFC_PointsID}", 
              style = "Width:75px", 
              onkeyup = "myFunction(this)" 
            } 
        })
@Html.EditorFor(modelItem => item.RefFlow, 
    new { htmlAttributes = 
        new { 
              @id = $"Diff_{item.MFC_PointsID}", 
              style = "Width:75px"
            } 
        })

在您的 JavaScript 函数中，通过拆分元素 ID 来检索项目 ID。还有其他方法可以做到这一点，但对我来说，这种方法简单易懂。

function myFunction(a) {
    var itemID = a.id.split('_')[1];
    ...other code...
    $('#Diff_' + itemID).val();
}

【讨论】：