MVC Razor循环中为索引式手机号字段添加jQuery Mask问题

我明白你遇到的困扰了——在Razor的for循环里生成的手机号输入框，明明加了类名绑定掩码，可就是没生效。咱们一步步排查解决：

第一步：确认类名是否正确渲染到HTML元素 #

先右键页面查看源代码，找到循环生成的input标签，检查它的class属性里有没有thisisCp。正常应该是这样的：

<input class="form-control thisisCp text-box single-line" id="getAttendeeLists_0__CellPhone" name="getAttendeeLists[0].CellPhone" type="text" value="">

如果没看到thisisCp，可以尝试把EditorFor换成TextBoxFor（有时候EditorFor会因模板优先级忽略自定义属性）：

@Html.TextBoxFor(model => model.getAttendeeLists[i].CellPhone, new { @class = "form-control thisisCp" })

第二步：确保脚本在DOM完全就绪后执行 #

虽然你把脚本放在了@section Scripts（通常会渲染到页面底部），但偶尔还是会因为DOM未完全加载导致选择器找不到元素。把掩码代码包裹在$(document).ready()里更稳妥：

@section Scripts {
    @Scripts.Render("~/jquerymask")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            $(".thisisCp").mask("?(9999)999-9999");
        });
    </script>
}

第三步：换个更可靠的选择器（备选方案） #

如果类选择器还是不生效，可以通过输入框的name属性定位——Razor生成的name会包含CellPhone关键字（比如getAttendeeLists[0].CellPhone），用属性包含选择器更精准：

$("input[name*='CellPhone']").mask("?(9999)999-9999");

第四步：检查mask插件是否正确加载 #

打开浏览器开发者工具（F12）的Network标签，刷新页面，确认~/jquerymask对应的js文件是否成功加载（状态码为200）。如果是404，说明你的bundle配置路径有误，得先确保jquery.mask.js文件的引用路径正确。

按这几步操作，应该就能解决掩码不生效的问题啦！

内容的提问来源于stack exchange，提问作者Enrique Gil