将 HTML5 和 jQuery UI Datepicker Popup Calendar 与 ASP.NET MVC 配合使用 - 第 4 部分

项目
06/16/2023

本教程将介绍如何在 ASP.NET MVC Web 应用程序中使用编辑器模板、显示模板和 jQuery UI datepicker 弹出日历。

添加用于编辑日期的模板

在本部分中，你将创建一个用于编辑日期的模板，该模板将在 ASP.NET MVC 显示 UI 时应用，用于编辑使用 DataType 属性的 Date 枚举标记的模型属性。模板将仅呈现日期;不会显示时间。在模板中，你将使用 jQuery UI Datepicker 弹出日历来提供编辑日期的方法。

若要开始，请打开 Movie.cs 文件，并将带有 Date 枚举的 DataType 属性添加到 ReleaseDate 属性，如以下代码所示：

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

此代码会导致 ReleaseDate 字段在显示模板和编辑模板中不显示时间。如果应用程序在 Views\Shared\EditorTemplates 文件夹或 Views\Movies\EditorTemplates 文件夹中包含 date.cshtml 模板，则在编辑时，该模板将用于呈现任何DateTime属性。否则，内置 ASP.NET 模板化系统会将属性显示为日期。

按 Ctrl+F5 运行应用程序。选择编辑链接以验证发布日期的输入字段是否仅显示日期。

在解决方案资源管理器中，展开“视图”文件夹，展开“共享文件夹”，然后右键单击“Views\Shared\EditorTemplates”文件夹。

单击“ 添加”，然后单击“ 视图”。将显示“ 添加视图 ”对话框。

在“ 视图名称 ”框中，键入“Date”。

选中“创建为分部视图检查框。确保未选中“使用布局或母版页”和“创建强类型视图检查框。

单击“添加”。将创建 Views\Shared\EditorTemplates\Date.cshtml 模板。

将以下代码添加到 Views\Shared\EditorTemplates\Date.cshtml 模板。

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

第一行将模型声明为类型 DateTime 。尽管不需要在编辑和显示模板中声明模型类型，但最佳做法是，这样就可以对传递给视图的模型进行编译时检查。 (另一个好处是，在 Visual Studio 的视图中获取模型的 IntelliSense。) 如果未声明模型类型，ASP.NET MVC 将其视为动态类型，并且没有编译时类型检查。如果将模型声明为类型 DateTime ，它将变为强类型。

第二行只是文本 HTML 标记，在日期字段前显示“使用日期模板”。你将暂时使用此行来验证是否正在使用此日期模板。

下一行是 Html.TextBox 帮助程序，用于呈现 input 文本框的字段。帮助程序的第三个参数使用匿名类型将文本框 datefield 的类设置为，并将类型设置为 date。 (由于 class 是 C# 中的保留项，因此需要使用 @ 字符转义 class C# parser.)

类型 date 是 HTML5 输入类型，它使 HTML5 感知浏览器能够呈现 HTML5 日历控件。稍后，你将添加一些 JavaScript，以使用 datefield 类将 jQuery datepicker Html.TextBox 挂接到元素。

按 Ctrl+F5 运行应用程序。可以验证编辑视图中的 ReleaseDate 属性是否正在使用编辑模板，因为该模板在文本输入框前 ReleaseDate 显示“使用日期模板”，如下图所示：

在浏览器中，查看页面的源。 (例如，右键单击页面并选择“ 查看源”。) 以下示例显示了页面的一些标记，并 class 演示呈现的 HTML 中的和 type 属性。

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

返回到 Views\Shared\EditorTemplates\Date.cshtml 模板并删除“使用日期模板”标记。现在，已完成的模板如下所示：

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

在本部分中，你将将 jQuery UI datepicker 弹出日历添加到日期编辑模板。 jQuery UI 库支持动画、高级效果和可自定义的小组件。它基于 jQuery JavaScript 库构建。使用 datepicker 弹出日历，可以轻松自然地使用日历而不是输入字符串来输入日期。弹出日历还将用户限制为法定日期 - 日期的普通文本输入将允许输入类似于 2/33/1999 1999 年 2 月 33 日) (，但 jQuery UI datepicker 弹出日历不允许这样。

首先，必须安装 jQuery UI 库。为此，你将使用 NuGet，它是一个包管理器，包含在 SP1 版本的 Visual Studio 2010 和 Visual Web Developer 中。

在 Visual Web Developer 的“ 工具 ”菜单中，选择“ NuGet 包管理器 ”，然后选择“ 管理 NuGet 包”。

注意：如果 “工具” 菜单未显示 “NuGet 包管理器 ”命令，则需要按照 NuGet 网站的 “安装 NuGet ”页上的说明安装 NuGet。

如果使用 Visual Studio 而不是 Visual Web Developer，请在 “工具 ”菜单中选择“ NuGet 包管理器 ”，然后选择“ 添加库包引用”。

在 “MVCMovie - 管理 NuGet 包 ”对话框中，单击左侧的“ 联机 ”选项卡，然后在搜索框中输入“jQuery.UI”。选择“j 查询 UI 小组件：Datepicker”，然后选择“ 安装 ”按钮。

NuGet 将这些调试版本和缩小版本的 jQuery UI Core 和 jQuery UI 日期选取器添加到项目中：

jquery.ui.core.js
jquery.ui.core.min.js
jquery.ui.datepicker.js
jquery.ui.datepicker.min.js

注意： (没有 .min.js 扩展名) 的文件的调试版本对调试很有用，但在生产站点中，只包括缩小的版本。

若要实际使用 jQuery 日期选取器，需要创建将日历小组件连接到编辑模板的 jQuery 脚本。在“解决方案资源管理器”中，右键单击“脚本”文件夹，依次选择“添加”、“新建项”和“JScript 文件”。将文件 命名为DatePickerReady.js。

将以下代码添加到 DatePickerReady.js 文件：

$(function () {
    $(".datefield").datepicker(); 
});

如果你不熟悉 jQuery，下面简要说明这一功能：第一行是“jQuery 就绪”函数，该函数在加载页面中的所有 DOM 元素后调用。第二行选择所有具有类名 datefield的 DOM 元素，然后为每个 DOM 元素调用 datepicker 函数。 (请记住，在教程前面部分中，已将类添加到 datefieldViews\Shared\EditorTemplates\Date.cshtml 模板)

接下来，打开 Views\Shared\_Layout.cshtml 文件。需要添加对以下文件的引用，这些文件都是必需的，以便可以使用日期选取器：

Content/themes/base/jquery.ui.core.css
Content/themes/base/jquery.ui.datepicker.css
Content/theme/base/jquery.ui.theme.css
jquery.ui.core.min.js
jquery.ui.datepicker.min.js
DatePickerReady.js

以下示例演示应在 Views\Shared\_Layout.cshtml 文件中元素底部head添加的实际代码。

<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>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

完整 head 部分如下所示：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <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>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

URL 内容帮助程序方法将资源路径转换为绝对路径。当应用程序在 IIS 上运行时，必须使用 @URL.Content 来正确引用这些资源。

按 Ctrl+F5 运行应用程序。选择编辑链接，然后将插入点放入 ReleaseDate 字段中。此时会显示 jQuery UI 弹出日历。

与大多数 jQuery 控件一样，datepicker 允许你广泛自定义它。有关信息，请参阅可视化自定义：在 jQuery UI 网站上设计 jQuery UI 主题。

支持 HTML5 日期输入控件

随着越来越多的浏览器支持 HTML5，你需要使用本机 HTML5 输入（如 date input 元素），而不是使用 jQuery UI 日历。可以向应用程序添加逻辑，以便自动使用 HTML5 控件（如果浏览器支持这些控件）。为此，请将 DatePickerReady.js 文件的内容替换为以下内容：

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

此脚本的第一行使用 Modernizr 验证 HTML5 日期输入是否受支持。如果不支持，则改为挂接 jQuery UI 日期选取器。 (Modernizr 是一个开源 JavaScript 库，用于检测 HTML5 和 CSS3 的本机实现的可用性。Modernizr 包含在你创建的任何新 ASP.NET MVC 项目中。)

进行此更改后，可以使用支持 HTML5 的浏览器（例如 Opera 11）对其进行测试。使用与 HTML5 兼容的浏览器运行应用程序并编辑电影条目。使用 HTML5 日期控件而不是 jQuery UI 弹出日历：

由于新版本的浏览器正在以增量方式实现 HTML5，因此现在的一种好方法是将代码添加到网站，以适应各种 HTML5 支持。例如，下面显示了一个更可靠的 DatePickerReady.js 脚本，该脚本允许站点支持仅部分支持 HTML5 日期控件的浏览器。

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

此脚本选择类型不完全支持 HTML5 input 日期控件的 HTML5 元素 date 。对于这些元素，它会挂接 jQuery UI 弹出日历，然后将属性从 date 更改为 typetext。通过将属性从 date 更改为 typetext，消除了部分 HTML5 日期支持。可以在 JSFIDDLE 中找到更可靠的DatePickerReady.js脚本。

向模板添加可为空日期

如果使用现有日期模板之一并传递空日期，则会收到运行时错误。若要使日期模板更可靠，需要更改它们以处理 null 值。若要支持可为空日期，请将 Views\Shared\DisplayTemplates\DateTime.cshtml 中的代码更改为以下内容：

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

当模型为 null 时，代码将返回一个空字符串。

将 Views\Shared\EditorTemplates\Date.cshtml 文件中的代码更改为以下内容：

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

运行此代码时，如果模型不为 null，则使用模型 DateTime 的值。如果模型为 null，则改用当前日期。

总结

本教程介绍了 ASP.NET 模板化帮助程序的基本知识，并演示如何在 ASP.NET MVC 应用程序中使用 jQuery UI datepicker 弹出日历。有关详细信息，请尝试以下资源：

有关 jQuery UI 的信息，请参阅 jQuery UI。
有关如何本地化 datepicker 控件的信息，请参阅 UI/Datepicker/Localization。
有关 ASP.NET MVC 模板的详细信息，请参阅 Brad Wilson 关于 ASP.NET MVC 2 模板的博客系列。尽管该系列是为 MVC 2 ASP.NET 编写的，但材料仍适用于当前版本的 ASP.NET MVC。

通过

添加用于编辑日期的模板

支持 HTML5 日期输入控件

向模板添加可为空日期

总结

反馈

其他资源

通过

将 HTML5 和 jQuery UI Datepicker Popup Calendar 与 ASP.NET MVC 配合使用 - 第 4 部分

添加用于编辑日期的模板

使用 NuGet 添加 jQuery UI Datepicker 弹出日历

支持 HTML5 日期输入控件

向模板添加可为空日期

总结

反馈

其他资源