MVC цикл foreach уникальный идентификатор C #

Question

У меня есть foreach для циклического прохождения и заполнения строк в таблице. Внутри таблицы у меня есть вызовы функций и мне нужны уникальные идентификаторы для выполнения функции для каждой строки. Он работает для первой строки, поскольку он распознает идентификаторы для этой строки, но следующая строка имеет тот же идентификатор. Я пытаюсь сделать так, чтобы при изменении поля одной из строк вычислялось значение и вводилось другое поле в соответствующей строке.

Моя таблица следующая

<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

Я думаю, проблема в том, что вы назначаете дубликаты ID для элементов DOM. Присвойте каждому элементу HTML уникальный идентификатор, объединив имя свойства и идентификатор элемента.

@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 извлеките идентификатор элемента, разделив идентификатор элемента. Есть и другие способы сделать это, но для меня этот подход прост и понятен.

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