javascript - MVC foreach循环唯一id C#

Question

我有一个 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);
        }
    });
}

Answer 1

我认为问题在于您为 DOM 元素分配了重复的 ID。通过连接属性名称和项目 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();
}