我需要另一双眼睛：MVC 中的 jQuery 不起作用

Question

我正在尝试构建一个 MVC 表单，当页面加载时，电话号码的输入显示为“( ) ___-____”。我正在尝试为此使用Digital Bush's masked plug in。到目前为止，它没有在页面加载时显示。我究竟做错了什么？我已经看了好几个小时了，我看不到它。这是我到目前为止所做的：

首先，这是我的 MVC 模型中的内容：

    [Required]
    [Display(Name = "Home Phone Number")]
    public string Buy1HomePhone { get; set; }

    [Required]
    [Display(Name = "Cell Phone Number")]
    public string Buy1CellPhone { get; set; }

1.) 我从 Digital Bush 获取源代码并将其粘贴到标记为 maskedinput.js 的 javascript 文件中

2.) 在 maskedinput.js 中，我添加了以下代码：

$(document).ready(function () {
$('#phone').mask("(999) 999-9999");});

3.) 我在电话号码输入框中添加了以下 id 标签：

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1HomePhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1CellPhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

4.) 我将 maskedinput.js 添加到视图中的脚本中：

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/CarrieJQueryTest.js")
@Scripts.Render("~/Scripts/maskedinput.js")}

Answer 1

我认为您需要在 input 元素而不是 div 上初始化掩码。另外，既然你有 2 你应该把它变成一个类而不是一个 id（即<div class="col-md-10" class="phone">）

像这样：

$(document).ready(function () {
$('.phone input').mask("(999) 999-9999");});

Answer 2

我修好了！我不明白为什么这是修复，但它是。这是我的新代码：

在视图中...

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1HomePhone, new { id = "applicantHomePhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1CellPhone, new { id = "applicantCellPhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

我最终将 EditorFor 更改为 TextBoxFor，然后为 jQuery 添加一个 id 以识别它。我尝试了多个课程，但 Visual Studio 并不满意。我还尝试在每个 TextBoxFor 上执行相同的 id，但这不起作用。只有第一个带有 id 标签的输入框显示了 jQuery。因此，在找到更有效的方法之前，我将为页面上的每个电话号码制作唯一的 id 标签。

这是我的 jQuery 的样子：

$(document).ready(function () {
    $('#applicantHomePhone').mask("(999) 999-9999");
    $('#applicantCellPhone').mask("(999) 999-9999");
});

感谢大家带领我朝着正确的方向前进！

Answer 3

您正在为 id 为“phone”的元素制作掩码：

$('#phone').mask("(999) 999-9999");});

但是这个元素是div。

<div class="col-md-10" id="phone">

只需将掩码放在输入元素上。这是您的解决方案：

$('#phone .form-control').mask("(999) 999-9999");});

只要“form-control”是您赋予电话号码元素的类。

你应该考虑给它一个更具体的类，以确保你不会将掩码应用于其他不需要的元素。