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();
}

MVC foreach循环唯一ID C＃

1 个答案: