学习ASP.NET Core Razor 编程系列七——修改列表页面

灰太狼 2021-05-02 13:08 284阅读 0赞

通过前面的学习，我们的书籍应用程序已经能正常运行了，但现在的呈现效果不是很理想，主要标题显示的是英文。我们不想看到的时间（如下图所示0:00:00），并且希望把“ReleaseDate”修改成“出版日期”。现在的程序运行效果如下图。

![10343-20180428160523412-102871481.png][]

**更新实体类代码**

我们在Visual Studio 2017中打开Models/Book.cs文件并添加下面代码，注意代码中的红色显示的行：

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace RazorMvcBooks.Models { public class Book { public int ID { get; set; } public string Name { get; set; } [Display(Name = "出版日期")] [DataType(DataType.Date)] public DateTime ReleaseDate { get; set; } public string Author { get; set; } public decimal Price { get; set; } } }

此时Visual Studio 会在你刚才添加的代码下面显示波浪线，我们使用鼠标右键单击红色波浪线，然后在弹出菜单中选择“快速操作和重构”。如下图。

![10343-20180428160534430-2087128716.png][]

选择 using System.ComponentModel.DataAnnotations;

![10343-20180428160542445-570940567.png][]

Visual studio 将会把 “using System.ComponentModel.DataAnnotations;”这一行代码添加到文件头.

Display 特性指定一个字段的要在界面中显示的名称（在本示例中，“ReleaseDate”将修改成“出版日期”做为显示值）。DataType特性指定字段显示的数据类型（日期），使字段所存储的数据显示时不在显示时间信息。如下图所示。

![10343-20180428160601901-1175510616.png][]

在浏览器打开书籍信息管理列表页面，并悬停在“Edit”链接上以查看，链接背后的URL值。如下图。

![10343-20180428160652233-499162660.png][]

书籍信息管理列表页面中的“Edit”、“Details”和“Delete”链接的代码都在 Pages/Books/Index.cshtml 文件中，这些具体的URL由定位标记辅助助手生成。

<tbody> @foreach (var item in Model.Book) { <tr>
                <td> @Html.DisplayFor(modelItem => item.Name) </td>
                <td> @Html.DisplayFor(modelItem => item.ReleaseDate) </td>
                <td> @Html.DisplayFor(modelItem => item.Author) </td>
                <td> @Html.DisplayFor(modelItem => item.Price) </td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> | <a asp-page="./Details" asp-route-id="@item.ID">Details</a> | <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                </td>
            </tr> } </tbody>

标签辅助助手使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。 在上面的代码中，定位标签辅助助手在 Razor 页面（路由是相对的）通过asp-page 和路由 ID (asp-route-id) 两个标签动态生成 HTML href 属性值。

在浏览器中打开书籍信息列表页面，然后在页面中使用鼠标右键，在弹出菜单中使用“查看源”或类似的菜单来查看生成的标记。 如下图。

![10343-20180428160805667-898660922.png][]

在页面源代码页面，你会看到由系统生成的 HTML 代码，如下图所示：

![10343-20180428160941460-1894864303.png][]

动态生成的链接通过URL把书籍ID传递给“Edit”、“Details”和“Delete”页面（例如，http://localhost:53416/Books/Details?id=6）。

修改Edit.cshtml、Details.cshtml和Delete.cshtml文件，让这些页面使用“\{id:int?\}”做为路由模板。将这些页面中第一行页面指令从@page改为@page "\{id:int\}"。如下图。

![10343-20180428160820493-570284948.png][]

然后在visual studio 2017中按F5运行应用程序，然后浏览器中浏览书籍信息列表页面，使用右键菜单查看页面的源代码。你将会看到新生成的相关的HTML url 链接将id的值做为URL的一部分，添加到url最后，如下图。

![10343-20180428161049678-558960367.png][]

当页面中使用了“\{id: int\}” 路由模板，在浏览器中进行页面请求时，如果请求中不包含整数，则将返回 HTTP 404错误或是空白页面，如下图。 例如，http://localhost:53416/Books/Details 将返回空白页面。如下图。。 若要使 ID 可选，请使用“\{id: int?\}” 做为路由模板：

![10343-20180428160957453-1693442116.png][]

[10343-20180428160523412-102871481.png]: /images/20210501/0584ac5666dc4f52ad5c6a61ab864fb1.png
[10343-20180428160534430-2087128716.png]: /images/20210501/e33832fa4f364b3a82025c37f0762f03.png
[10343-20180428160542445-570940567.png]: /images/20210501/8cf77d8fe5bb4a139b192f97c8fa78ad.png
[10343-20180428160601901-1175510616.png]: /images/20210501/206db7476a024120b2d30a81a3e9cb30.png
[10343-20180428160652233-499162660.png]: /images/20210501/fb17024c21924d549ad175b8b671384b.png
[10343-20180428160805667-898660922.png]: /images/20210501/e19c4c9af31d470381fc677637d0e15c.png
[10343-20180428160941460-1894864303.png]: /images/20210501/7fb34ea4364547d18120302c82604680.png
[10343-20180428160820493-570284948.png]: /images/20210501/7cec3ecb5f5c459fbe037f16604c497b.png
[10343-20180428161049678-558960367.png]: /images/20210501/0a845ba4fce048d39051381cc05d13a7.png
[10343-20180428160957453-1693442116.png]: /images/20210501/e2efe35d52c94f4a9f1100a06ce28154.png