MVC3 Razor视图错误：Microsoft JScript运行时错误：对象不支持属性或方法'datepicker'`。

Question

我正在尝试为我的Html.EditorFor显示一个日期选择器。

为此，我在Views\Shared\EditorTemplate文件夹中创建了一个名为DateTime.cshtml的EditorTemplate。

但它不起作用，相反，我得到错误---Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'。

请帮助我解决这个错误。

这是我的Razor视图页面。

@model MyWebRole.ViewModels.ViewModelEvents
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset style="width:50%">
        <legend>Event Details:</legend>
        <div>
            <table>

                <tr>
                 <td>

                        @Html.EditorFor(model => model.vmStartDate)
                        @Html.ValidationMessageFor(model => model.vmStartDate)
                    </td>


                </tr>
            </table>
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

以下是我的DateTime.cshtml文件的内容：

@model System.DateTime?

<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yy',
            gotoCurrent: true
        });
    });
</script>

我可以在另一个视图上让日期选择器正常工作。

  @model MyWebRole.Models.Events
    @{
        ViewBag.Title = "Edit";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <fieldset style="width:50%">
            <legend>Event Details:</legend>
            <div>
                <table>

                    <tr>
                     <td>

                            @Html.EditorFor(model => model.StartDate)
                            @Html.ValidationMessageFor(model => model.StartDate)
                        </td>


                    </tr>
                </table>
            </div>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    }

两个 Razor 视图的区别在于： --> 第一个视图（日期选择器不工作）使用 ViewModel 作为模型，即 mywebrole.ViewModels.EventViewModel； --> 而第二个视图使用 myWebrole.models.Events（日期选择器正常工作）。 这是否是一个问题？

- Millar

Answer 1

从这个错误来看，我认为问题出在选择器上。不要使用$("#@ViewData.ModelMetadata.PropertyName")，改用这一个：

$("input.text").datepicker({   ...

（或者，您可以使用@Html.TextBoxFor(model => model)而不是@Html.TextBox，这样input将获得id=PropertyName，因此选择器应该可以工作）。

另外，您确定datepicker JQuery插件的脚本已经成功加载到页面上了吗？

- McGarnagle

---

是的，日期选择器 JQuery 插件的脚本已成功加载到页面上。 - Millar

我注意到如果我使用mywebrole.models.mymodel，日期选择器运行正常，但如果我使用mywebrole.ViewModels.myViewModel，则会抛出错误。 - Millar

@Millar 酷啊... 自从你发了那个其他的视图之后，我确定选择器就是问题所在。只需将 "#@ViewData.ModelMetadata.PropertyName" 改为 "input.text"，我敢打赌它会起作用的。 - McGarnagle

我将“#@ViewData.ModelMetadata.PropertyName”更改为“input.text”，但是仍然出现相同的错误。"Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'" - Millar

@Millar 唉，我真的不知道了。这里有另一个与此问题基本相同的SO线程，结果是脚本冲突。也许这就是问题所在：http://stackoverflow.com/questions/2714494/jquery-datepicker-in-asp-net - McGarnagle