将 HTML5 和 jQuery UI Datepicker 弹出窗口日历与 ASP.NET MVC 配合使用 - 第 1 部分

项目
11/08/2024

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

本教程将介绍如何在 ASP.NET MVC Web 应用程序中使用编辑器模板、显示模板和 jQuery UI datepicker 弹出窗口日历。在本教程中，可以使用 Microsoft Visual Web Developer 2010 Express Service Pack 1（“Visual Web Developer”），这是 visual Studio 的免费版本Microsoft Visual Studio，或者如果已有 Visual Studio 2010 SP1，则可以使用 Visual Studio 2010 SP1。

在开始之前，请确保已安装下面列出的先决条件。可以通过单击以下链接来安装所有这些组件： Web 平台安装程序。或者，可以使用以下链接单独安装所需的软件：

如果使用 Visual Studio 2010 而不是 Visual Web 开发人员，请单击以下链接安装必备组件： Visual Studio 2010 先决条件。

本教程假定你已完成 MVC 3 入门教程或熟悉 ASP.NET MVC 开发。本教程从 MVC 3 入门教程中完成的项目开始。

所需操作

你将将模板（特别是编辑和显示模板）添加到在 MVC 3 入门教程中创建的简单电影列表应用程序。你还将添加 jQuery UI datepicker 弹出窗口日历，以简化输入日期的过程。以下屏幕截图显示了显示 jQuery UI datepicker 弹出窗口日历的修改的应用程序。

将要学到的技能

学习内容：

如何使用 DataAnnotations 命名空间中的属性来控制数据在显示时和处于编辑模式时的数据格式。
如何创建模板（编辑和显示模板），以控制数据的格式。
如何添加 jQuery UI datepicker 作为输入日期字段的方法。

入门

如果还没有初学者项目中的电影列表应用程序，请下载它：

下载。
在 Windows 资源管理器中，右键单击 MvcMovie.zip 文件，然后选择“ 属性”。
在 “MvcMovie.zip属性 ”对话框中，选择“ 取消阻止”。（取消阻止后，尝试使用从 Web 下载的 .zip 文件时，不再显示安全警告。）

右键单击MvcMovie.zip文件，然后选择“全部提取”以解压缩文件。在 Visual Web 开发人员或 Visual Studio 2010 中，打开 MvcMovieCS_TU.sln 文件。

在解决方案资源管理器中，双击 Views\Shared\_Layout.cshtml 将其打开。将 H1 标头从 MVC Movie App 更改为 Movie jQuery。按 Ctrl+F5 运行应用程序，然后单击“ 开始 ”选项卡，转到 Index 电影控制器的方法。若要试用应用程序，请选择其中一部电影的 “编辑” 链接和 “详细信息 ”链接。请注意，在“索引”、“编辑”和“详细信息”视图中，发布日期和价格的格式良好：

日期和价格的格式是对类的属性Movie使用 DisplayFormat 属性的结果。

打开Movie.cs文件并注释掉DisplayFormat属性的属性ReleaseDatePrice。生成的 Movie 类如下所示：

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    //  [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

再次按 Ctrl+F5 运行应用程序，然后选择“ 开始 ”选项卡以查看电影列表。这一次，发布日期显示日期和时间，价格字段不再显示货币符号。类中的 Movie 更改已撤消你之前看到的不错格式，但稍后会修复此问题。

使用 DataAnnotations DataType 属性指定数据类型

使用Date枚举将属性的注释掉DisplayFormat属性ReleaseDate替换为 DataType 属性。使用枚举再次将 DisplayFormat 属性的属性 Price 替换为 DataType Currency 属性。这就是已完成代码的外观：

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

运行该应用程序。现在，发布日期和价格属性的格式正确（即使用适当的日期和货币格式）。 DataType 属性为内置 ASP.NET MVC 模板提供类型元数据，以便字段以正确的格式呈现。 DataType使用特性最好是使用DisplayFormat最初在代码中的属性，因为该DataType属性使模型更简洁、更灵活，以便实现国际化等目的。

在下一部分中，你将了解如何使自定义模板显示日期字段。

通过

所需操作

将要学到的技能

入门

使用 DataAnnotations DataType 属性指定数据类型

反馈

其他资源