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

项目
07/13/2023

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

使用复杂类型

在本部分中，你将创建地址类并了解如何创建模板来显示它。

在 Models 文件夹中，创建名为 Person.cs 的新类文件，在其中放置两种类型：类 Person 和 Address 类。类 Person 将包含类型化为 Address的属性。类型 Address 是复杂类型，这意味着它不是内置类型之一，如 int、 string或 double。相反，它有多个属性。新类的代码如下所示：

public class Address {
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
}

public class Person {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public Address HomeAddress;
}

在控制器中 Movie ，添加以下 PersonDetail 操作以显示人员实例：

public ActionResult PersonDetail(int id = 0) {
     return View(GetPerson(id));
}

然后将以下代码添加到控制器， Movie 以使用一些示例数据填充 Person 模型：

Person GetPerson(int id) {
    var p = new Person
    {
        ID = 1,
        FirstName = "Joe",
        LastName = "Smith",
        Phone = "123-456",
        HomeAddress = new Address
        {
            City = "Great Falls",
            StreetAddress = "1234 N 57th St",
            PostalCode = "95045"
        }
    };
    return p;
}

打开 Views\Movies\PersonDetail.cshtml 文件并为视图添加以下标记 PersonDetail 。

@model Person
@{
    ViewBag.Title = "PersonDetail";
}
<h2>Person Detail</h2>
@Html.DisplayForModel()

按 Ctrl+F5 运行应用程序并导航到 “电影/PersonDetail”。

视图 PersonDetail 不包含 Address 复杂类型，如此屏幕截图所示。 (未显示地址。)

模型 Address 数据不显示，因为它是复杂类型。若要显示地址信息，请再次打开 Views\Movies\PersonDetail.cshtml 文件并添加以下标记。

@Html.DisplayFor( x => x.HomeAddress )

now 视图的完整标记 PersonDetail 如下所示：

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

@Html.DisplayForModel()
@Html.DisplayFor( x => x.HomeAddress )

再次运行应用程序并显示 PersonDetail 视图。现在会显示地址信息：

为复杂类型创建模板

在本部分中，你将创建一个模板，用于呈现 Address 复杂类型。为 Address 类型创建模板时，ASP.NET MVC 可以自动使用它来设置应用程序中任何位置的地址模型的格式。这为你提供了一种仅从应用程序中的 Address 一个位置控制类型的呈现的方法。

在 Views\Shared\DisplayTemplates 文件夹中，创建名为 Address 的强类型分部视图：

单击“ 添加”，然后打开新的 Views\Shared\DisplayTemplates\Address.cshtml 文件。新视图包含以下生成的标记：

@model MvcMovie.Models.Address

<fieldset>
    <legend>Address</legend>

    <div class="display-label">StreetAddress</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.StreetAddress)
    </div>

    <div class="display-label">City</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.City)
    </div>

    <div class="display-label">PostalCode</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.PostalCode)
    </div>
</fieldset>

运行应用程序并显示 PersonDetail 视图。这一次， Address 刚创建的模板用于显示 Address 复杂类型，因此显示如下所示：

摘要：指定模型显示格式和模板的方法

你已看到，可以使用以下方法指定模型属性的格式或模板：

将 DisplayFormat 特性应用于模型中的属性。例如，以下代码导致显示日期时没有时间：
```
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
```
将 DataType 属性应用于模型中的属性并指定数据类型。例如，以下代码导致显示日期时没有时间。
```
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
```
如果应用程序在 Views\Shared\DisplayTemplates 文件夹或 Views\Movies\DisplayTemplates 文件夹中包含 date.cshtml 模板，该模板将用于呈现 DateTime 属性。否则，内置 ASP.NET 模板化系统将属性显示为日期。
在 Views\Shared\DisplayTemplates 文件夹或 Views\Movies\DisplayTemplates 文件夹中创建显示模板，其名称与要设置格式的数据类型匹配。例如，你看到 Views\Shared\DisplayTemplates\DateTime.cshtml 用于呈现 DateTime 模型中的属性，没有向模型添加属性，也没有向视图添加任何标记。
使用模型上的 UIHint 属性指定用于显示模型属性的模板。
将显示模板名称显式添加到视图中的 Html.DisplayFor 调用。

使用的方法取决于需要在应用程序中执行的操作。混合这些方法以获得所需的格式设置类型并不少见。

在下一部分中，你将稍微切换一下齿轮，从自定义数据的显示方式转向自定义数据的输入方式。你将将 jQuery datepicker 挂接到应用程序中的编辑视图，以便提供一种巧妙的方式来指定日期。

通过

使用复杂类型

为复杂类型创建模板

摘要：指定模型显示格式和模板的方法

反馈

其他资源