jQuery DatePicker 未使用 MVC3 C# 显示答案

【问题标题】：jQuery DatePicker not showing with MVC3 C#jQuery DatePicker 未使用 MVC3 C# 显示
【发布时间】：2012-07-30 07:16:24
【问题描述】：

[编辑：现在工作。刚刚把 EditorFor 改成了 TextBox]

我刚刚开始使用 C# 中的 MVC3。我偶然发现了这个问题。

我已经按照一些教程将 datepicker 功能添加到 MVC3 项目，但 datepicker 没有显示在我的 web 项目中。这是我所拥有的：

在我的 _Layout.chtml 文件中，我包含了所需的 jQuery 依赖文件：

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
    rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
    rel="stylesheet"  type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
    rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
    type="text/javascript"></script>

这就是我的观点：

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Student</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.FullName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FullName)
        @Html.ValidationMessageFor(model => model.FullName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.DOB)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.DOB, new { @class = "date" })
        @Html.ValidationMessageFor(model => model.DOB)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

在视图内的同一个文件中，我将用于将日期选择器挂钩的脚本放入顶部的编辑器中：

<script type="text/javascript">
$(document).ready(function () {
    $('.date').datepicker();
});

许多教程建议为此使用 EditorTemplate，但我认为没有必要。我错过了什么？感谢所有帮助的人。

【问题讨论】：

把它放在底部，看看会发生什么。
我没有看到对实际 jQuery 库的引用。您已经引用了 jQuery UI Core 以及 datepicker，但是 jQuery 在哪里？

标签： c# jquery datepicker

【解决方案1】：

我不相信你可以使用 EditorFor 并传入一个类。相反，请尝试：

<div class="editor-field">
    @Html.TextBoxFor(model => model.DOB, new { @class = "date" })
    @Html.ValidationMessageFor(model => model.DOB)
</div>

TextBoxFor 将接受 HTML 属性。

【讨论】：

噢！奇迹般有效。谢谢！

【解决方案2】：

这是一个简单的工作演示，阅读this

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="datepicker"></div>

</body>
</html>

【讨论】：

【解决方案3】：

@Html.TextBoxFor() 第二个参数是object htmlAttributes
@Html.EditorFor() 第二个参数是object additionalViewData

所以 new { @class= "date" } 对 @Html.TextBoxFor() 没有预期的效果

【讨论】：