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

项目
06/16/2023

本教程介绍如何在 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”) （免费版本的 Microsoft Visual Studio），也可以使用 Visual Studio 2010 SP1（如果已有）。

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

Visual Studio Web Developer Express SP1 先决条件
ASP.NET MVC 3 工具更新
SQL Server Compact 4.0 (运行时 + 工具支持)

如果使用 Visual Studio 2010 而不是 Visual Web Developer，请单击以下链接安装必备组件：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 Developer 或 Visual Studio 2010 中，打开 MvcMovieCS_TU.sln 文件。

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

日期和价格的格式设置是在类的属性Movie上使用 DisplayFormat 属性的结果。

打开 Movie.cs 文件，并注释掉 DisplayFormat 和 Price 属性上的 ReleaseDate 属性。生成的 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 枚举将属性的ReleaseDate注释掉DisplayFormat属性替换为 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 属性使模型更简洁、更灵活，以实现国际化等目的。

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

Share via

所需操作

将要学到的技能

入门

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

反馈

反馈

其他资源