通過前面的學習,我們的書籍應用程式已經能正常運行了,但現在的呈現效果不是很理想,主要標題顯示的是英文。我們不想看到的時間(如下圖所示0:00:00),並且希望把“ReleaseDate”修改成“出版日期”。現在的程式運行效果如下圖。 ...
學習ASP.NET Core Razor 編程系列目錄
學習ASP.NET Core Razor 編程系列二——添加一個實體
學習ASP.NET Core Razor 編程系列三——創建數據表及創建項目基本頁面
學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面
學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面
學習ASP.NET Core Razor 編程系列六——資料庫初始化
通過前面的學習,我們的書籍應用程式已經能正常運行了,但現在的呈現效果不是很理想,主要標題顯示的是英文。我們不想看到的時間(如下圖所示0:00:00),並且希望把“ReleaseDate”修改成“出版日期”。現在的程式運行效果如下圖。
更新實體類代碼
我們在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 會在你剛纔添加的代碼下麵顯示波浪線,我們使用滑鼠右鍵單擊紅色波浪線,然後在彈出菜單中選擇“快速操作和重構”。如下圖。
選擇 using System.ComponentModel.DataAnnotations;
Visual studio 將會把 “using System.ComponentModel.DataAnnotations;”這一行代碼添加到文件頭.
Display 特性指定一個欄位的要在界面中顯示的名稱(在本示例中,“ReleaseDate”將修改成“出版日期”做為顯示值)。DataType特性指定欄位顯示的數據類型(日期),使欄位所存儲的數據顯示時不在顯示時間信息。如下圖所示。
在瀏覽器打開書籍信息管理列表頁面,並懸停在“Edit”鏈接上以查看,鏈接背後的URL值。如下圖。
書籍信息管理列表頁面中的“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 屬性值。
在瀏覽器中打開書籍信息列表頁面,然後在頁面中使用滑鼠右鍵,在彈出菜單中使用“查看源”或類似的菜單來查看生成的標記。 如下圖。
在頁面源代碼頁面,你會看到由系統生成的 HTML 代碼,如下圖所示:
動態生成的鏈接通過URL把書籍ID傳遞給“Edit”、“Details”和“Delete”頁面(例如,http://localhost:53416/Books/Details?id=6)。
修改Edit.cshtml、Details.cshtml和Delete.cshtml文件,讓這些頁面使用“{id:int?}”做為路由模板。將這些頁面中第一行頁面指令從@page改為@page "{id:int}"。如下圖。
然後在visual studio 2017中按F5運行應用程式,然後瀏覽器中瀏覽書籍信息列表頁面,使用右鍵菜單查看頁面的源代碼。你將會看到新生成的相關的HTML url 鏈接將id的值做為URL的一部分,添加到url最後,如下圖。
當頁面中使用了“{id: int}” 路由模板,在瀏覽器中進行頁面請求時,如果請求中不包含整數,則將返回 HTTP 404錯誤或是空白頁面,如下圖。 例如,http://localhost:53416/Books/Details 將返回空白頁面。如下圖。。 若要使 ID 可選,請使用“{id: int?}” 做為路由模板: