Learn ASP. NET Core Razor Programming series seven--Modify List page

Learn the ASP. NET Core Razor Programming Series Catalog

Learn ASP. NET Core Razor programming series One

Learn ASP. NET Core Razor Programming series two--Add an entity

Learn ASP. NET Core Razor Programming series three--Create a data table and create a project basic page

Learn ASP. Razor Programming Series four--asp.net core Razor list template page

Learn ASP. Razor Programming series five--asp.net core Razor new Template page

Learn ASP. NET Core Razor Programming series six--database initialization

Through the previous study, our book application has been able to run normally, but now the rendering effect is not very good, the main title is shown in English. We do not want to see the time (as shown in 0:00:00) and want to change "ReleaseDate" to "Publication date". Now the program works as well.

Update entity Class Code

We open the Models/book.cs file in Visual Studio 2017 and add the following code, noting that the lines in the code are shown in red:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;namespacerazormvcbooks.models{ Public classBook { Public intID {Get;Set; }  Public stringName {Get;Set; } [Display (Name = "Publication date")] [DataType (datatype.date)] PublicDateTime ReleaseDate {Get;Set; }  Public stringAuthor {Get;Set; }  Public decimalPrice {Get;Set; } }} 

At this point, visual Studio displays the wavy lines below the code you just added, and we right-click the red wavy line and choose quick actions and refactoring from the pop-up menu. Such as.

Select Using System.ComponentModel.DataAnnotations;

Visual Studio will put "using System.ComponentModel.DataAnnotations;" This line of code is added to the file header.

The display attribute specifies the name of a field to be displayed in the interface (in this example, "ReleaseDate" is modified to "publication date" as the display value). The datatype attribute specifies the data type (date) in which the field is displayed so that the data stored by the field is not displayed when the time information appears. As shown in.

Open the Book Information management list page in the browser and hover over the "Edit" link to view the URL value behind the link. Such as.

The code for the "Edit", "Details", and "Delete" links in the Book Information Management list page is in the pages/books/index.cshtml file, and these specific URLs are generated by the Anchor Helper Helper.

<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>                <aAsp-page= "./edit"Asp-route-id= "@item. ID">Edit</a> | <aAsp-page= "./details"Asp-route-id= "@item. ID">Details</a> | <aAsp-page= "./delete"Asp-route-id= "@item. ID">Delete</a>            </TD>        </TR>}</tbody>

The tag helper enables server-side code to participate in creating and rendering HTML elements in the Razor file. In the above code, the Location Label Helper Helper dynamically generates the HTML href attribute value on the Razor page (the route is relative) via Asp-page and Route ID (Asp-route-id) two tags.

Open the Book Information list page in your browser, and then use the right mouse button in the page to view the generated markup using the view source or similar menu in the pop-up menu. Such as.

In the page source code page, you will see the HTML code generated by the system, as shown in:

Dynamically generated links pass the book ID to the "Edit", "Details", and "Delete" pages via a URL (for example, http://localhost:53416/Books/Details?id=6).

Modify the edit.cshtml, details.cshtml, and delete.cshtml files to use "{Id:int?}" for these pages As a routing template. Change the first line of the page directive from @page to @page "{Id:int}" on these pages. Such as.

Then run the application in Visual Studio 2017 by pressing F5, then browse the book Information list page in the browser and use the right-click menu to view the source code of the page. You will see the newly generated associated HTML URL link to the value of the ID as part of the URL, added to the URL at the end, such as.

When the "{id:int}" routing template is used in the page, when a page request is made in the browser, an HTTP 404 error or Blank page is returned if the request does not contain an integer. For example, Http://localhost:53416/Books/Details will return a blank page. Such as.. To make the ID optional, use "{Id:int}" as the routing template:

Learn ASP. NET Core Razor Programming series seven--Modify List page