MVC foreach 循环唯一 ID C#

Posted 2023-02-26

【中文标题】MVC foreach 循环唯一 ID C#

【英文标题】：MVC foreach loop unique id C#

【发布时间】：2018-05-01 14:27:41

【问题描述】：

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

【参考方案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();