学习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 编程系列五——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?}” 做为路由模板:

原文地址:https://www.cnblogs.com/chillsrc/p/8968398.html

时间: 2024-08-06 15:53:40

学习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列表模板页面 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C

学习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 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C

学习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列表模板页面 上一篇文章中我们学习了列表页面的结构,@page与@model两个关键Razor指令,以及页面布局应该修改哪里.这一篇文章我们来

学习ASP.NET Core,你必须了解无处不在的“依赖注入”

ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middleware自身的实现,以及构建在这个管道的应用,都需要相应的服务提供支持,ASP.NET Core自身提供了一个DI容器来实现针对服务的注册和消费.换句话说,不只是ASP.NET Core底层框架使用的服务是由这个DI容器来注册和提供,应用级别的服务的注册和提供也需要以来这个DI容器,所以正如本文标题所说的——学习ASP.NET Core,你必须了解无

从明面上学习ASP.NET Core

一.前言     这篇文章就是从能看到地方去学习Core,没有很深奥,也没有很难懂,现在我们开始吧. 二.构建项目,引发思考     创建项目的步骤真的很简单,你要是不会,我真也没法了,我这是创建的MVC的项目. 接下来我们开始找不同,这个小学生也会的东西,我相信也难不到大家,这里我们主要说重点的不同: 1. 少了Content和Scripts文件夹,多了wwwroot: 2.少了配置文件web.config,多了appsettings.json: 3.少了App_Start文件夹,多了Prog

asp.net core razor自定义taghelper

原文:asp.net core razor自定义taghelper 又一个新的名词(taghelper),通过taghelper是可以操作html标签.条件输出.更是自由添加内外元素.当然也内置了挺多的asp-开头的taghelper. 下面文章中也简单的带大家实现一个taghelper; 创建自定义html元素 创建一个类ButtonTagHelper tagName为标签名称,下面创建一个button标签 Copy using Microsoft.AspNetCore.Razor.TagHe

asp.net core入门教程系列 (一)

Asp.Net Core简介 ASP.NET Core 是一个全新的开源.跨平台框架,可以用它来构建基于网络连接的现代云应用程序,比如:Web 应用,IoT(Internet Of Things,物联网)应用和移动后端等.ASP.NET Core可以运行在 .NET Core 或完整的 .NET Framework 之上,其架构为发布到云端或本地运行的应用提供了一个最佳的开发框架,由开销很小的模块化组件构成,这就保持了你构造解决方案的灵活性.你可以跨平台地在Windows.Mac和Linux等设

ASP.NET 开发者 开始学习ASP.NET Core 2吧

.  NET Core 从2016年6月28日发布,过去了将近一年的时间,但是在工作中发现大家对.net core的接受程度并不高,这只是一个感觉,俗话说“没有调查就没有发言权”, 这两天通过微信小程序在微信群里做了一个调查,参与的人数大概230人,从结果看大家都在等待.NET Core 2.0, 期待.net core 2能够在7.8月间按时发布.这次调查的问题就是针对大家对.net core的使用情况的调查,分为3种情况,我直接上微信投票结果图: 使用.net core 1.0/1.1的人数

学习ASP.NET Core,怎能不了解请求处理管道[1]: 中间件究竟是个什么东西?

ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 "通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程"(上篇.中篇.下篇) 中围绕着一个经过极度简化的模拟管道讲述了真实管道构建的方式以及处理HTTP请求的流程.在本系列 中,我们会还原构建模拟管道时可以舍弃和改写的部分,向读者朋友们呈现一个真是的HTTP请求处理管道. ASP.NET Core 的请求处理管道由一个服务器与一组有序排列的中间件构成