如何将 Razor for 循环变量的 ID 传递给 javascript

Question

我尝试在每行输入社会安全号码时插入连字符 (-) (xxx-xx-xxxx)。 当 Social Security # 不在循环或数组中时，我的脚本可以正常工作。我不知道如何在 javascript 中正确实现 id。 for 循环中

我对

HTML：

for (int i = 0; i < Model.RecordList.Count; i++)
                {
                    <tr>
                        <td>
                            @Html.CheckBoxFor(m => @Model.RecordList[i].Resolve, @Model.RecordList[i].Resolve)
                            @*<input asp-for="@Model.RecordList[i].Resolve" type="checkbox" class="form-control_checkbox" value="@Model.RecordList[i].Resolve" />*@
                        </td>                    
                        <td>
                            <div>
                                <input asp-for="@Model.RecordList[i].RetirementNumber" class="form-control_text w-100" maxlength="13" disabled="disabled" />
                                <input asp-for="@Model.RecordList[i].RetirementNumber" type="hidden" id="RetirementNumber" />
                            </div>
                        </td>
                        <td><div><input asp-for="@Model.RecordList[i].FirstName" class="form-control_text w-100" /></div></td>
                        <td><div><input asp-for="@Model.RecordList[i].LastName" class="form-control_text w-100" /></div></td>
                        <td><div><select asp-for="@Model.RecordList[i].Fund" class="form-control_selectbox w-100" asp-items="@(List<SelectListItem>)@Model.FundList"></select></div></td>
                        <td>
                            <div>
                                <select asp-for="@Model.RecordList[i].Code" class="form-control_selectbox w-100" asp-items="@(List<SelectListItem>)@Model.IrsOfficesList"></select>
                            </div>
                        </td>
                        <td>
                            <div class="ssn_format">
                                <input id="maskedSSN" class="masked_ssn form-control_text w-100" maxlength="12" />
                                <input asp-for="@Model.RecordList[i].SSN" oncopy="return false" onpaste="return false" oncut="return false" class="w-100 form-control_text read-only-limited-mode" maxlength="11" style="display:none" />
                            </div>
                        </td>
                        <td><div><input asp-for="@Model.RecordList[i].MonthlyDeduction" asp-format="{0:#####.00}" type="number" step="0.01" class="form-control_text w-100" /></div></td>

                    </tr>
                }

javascript：

$(document).ready(function () {
           
            $("#maskedSSN").on("cut copy paste", function (e) {
                e.preventDefault();
            });
            $("#maskedSSN").mask('000-00-0000', { 'translation': { 0: { pattern: /[0-9*]/ } } });
            $("#maskedSSN").on("keyup", maskSSN);
            $("#maskedSSN").val($("#RecordList_SSN").val());
            $("#maskedSSN").keyup();


        });
        function maskSSN2() {
            var newMaskedValue = "";
            var currentMaskedValue = $("#maskedSSN").val();
            var tail = "";
            var front = "";
            getInputBeforeMask();
            if (currentMaskedValue.length >= 6) {
                front = currentMaskedValue.substring(0, 6);
                tail = currentMaskedValue.substring(6);
                front = front.replace(new RegExp("[0-9]", "g"), "*");
            }
            else {
                front = currentMaskedValue;
                front = front.replace(new RegExp("[0-9]", "g"), "*");
            }

            newMaskedValue = front + tail;
            $("#maskedSSN").val(newMaskedValue);
        }

        function getInputBeforeMask() { 
            var ssn = $("#RecordList_SSN").val();
            var maskedSsn = $("#maskedSSN").val();
            alert("ssn=" + ssn + " un=" +  maskedSsn) 
            if (ssn.length < maskedSsn.length) {
                ssn = ssn + maskedSsn.substring(ssn.length);
            }
            else {
                ssn = ssn.substring(0, maskedSsn.length);
            }
            $("#RecordList_SSN").val(ssn);
        }

Answer 1

谢谢@mj1313。这很有帮助。你给了我制作脚本所需的东西。我在输入每个字符时应用输入掩码（onkeyup），所以我修改了 html 和 javascript。除了应用和获取正确的 ID 之外，我还稍微修改了 html 和 javascript。下面的代码完全可以运行。

HTML：

for (int i = 0; i < Model.RecordList.Count; i++)
                {
                    var rowId = i;
                    <tr>
                        ....
                        <td>
                            <div>
                                @Html.TextBoxFor(m => @Model.RecordList[i].SSN, new { @id = "RecordList_" + rowId + "__SSN", @class = "form-control_text w-100", @onclick = "maskedSSN(" + rowId + ")" })
                            </div>
                        </td>
                        ....
                    </tr>
                }

javascript：

function maskedSSN(rowID) {
            $("#RecordList_" + rowID + "__SSN").on("cut copy paste", function (e) {
                e.preventDefault();
            });
            $("#RecordList_" + rowID + "__SSN").mask('000-00-0000', { 'translation': { 0: { pattern: /[0-9*]/ } } });
            $("#RecordList_" + rowID + "__SSN").on("keyup", maskSSN2(rowID));
            $("#RecordList_" + rowID + "__SSN").keyup();
        };

        function maskSSN2(rowID) {
            var newMaskedValue = "";
            var currentMaskedValue = $("#RecordList_" + rowID + "__SSN").val();
            var tail = "";
            var front = "";
            getInputBeforeMask2(rowID);
            if (currentMaskedValue.length >= 6) {
                front = currentMaskedValue.substring(0, 6);
                tail = currentMaskedValue.substring(6);
                front = front.replace(new RegExp("[0-9]", "g"), "*");
            }
            else {
                front = currentMaskedValue;
                front = front.replace(new RegExp("[0-9]", "g"), "*");
            }

            newMaskedValue = front + tail;
            $("#RecordList_" + rowID + "__SSN").val(newMaskedValue);
        }

        function getInputBeforeMask2(rowID) { 
            var ssn = $("#RecordList_" + rowID + "__SSN").val();
            if (ssn.length < maskedSsn.length) {
                ssn = ssn + maskedSsn.substring(ssn.length);
            }
            else {
                ssn = ssn.substring(0, maskedSsn.length);
            }
        }  

Answer 2

我对

在for循环中设置一个变量，并为其分配id，然后将此变量用作输入的ID，如下所示：

@for (int i = 0; i < Model.RecordList.Count; i++)
{
    var maskedSSNId = "maskedSSN_" + i;
    <tr>
        <td>
            <div class="ssn_format">
                <input id="@maskedSSNId" class="masked_ssn form-control_text w-100" maxlength="12" />
                <input asp-for="@Model.RecordList[i].SSN" oncopy="return false" onpaste="return false" oncut="return false" class="w-100 form-control_text read-only-limited-mode" maxlength="11" style="display:none" />
            </div>
        </td>
    </tr>
}

for 循环中

在js中可以这样获取RecordList的长度：

var lenght = @Model.RecordList.Count;

然后你可以做循环来获取具有指定id的每一行的值

<script>
    var lenght = @Model.RecordList.Count;
    var i;
    for (i = 0; i < lenght; i++) {
        console.log($("#RecordList_" + i + "__SSN").val());
    }
</script>