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

简介: 原文:学习ASP.NET Core Razor 编程系列七——修改列表页面 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
原文: 学习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?}” 做为路由模板:

 

目录
相关文章
|
8月前
|
开发框架 .NET C#
ASP.NET Core Blazor 路由配置和导航
大家好,我是码农刚子。本文系统介绍Blazor单页应用的路由机制,涵盖基础配置、路由参数、编程式导航及高级功能。通过@page指令定义路由,支持参数约束、可选参数与通配符捕获,结合NavigationManager实现页面跳转与参数传递,并演示用户管理、产品展示等典型场景,全面掌握Blazor路由从入门到实战的完整方案。
657 6
|
8月前
|
人工智能 API 数据库
Semantic Kernel .NET 架构学习指南
本指南系统解析微软Semantic Kernel .NET架构,涵盖核心组件、设计模式与源码结构,结合实战路径与调试技巧,助你从入门到贡献开源,掌握AI编排开发全栈技能。
992 2
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入(DI)注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入(DI)注册过程的开源库,支持自动扫描和注册服务。通过简单的配置,开发者可以轻松地从指定程序集中筛选、注册服务,并设置其生命周期,同时支持服务装饰等高级功能。适用于大型项目,提高代码的可维护性和简洁性。仓库地址:&lt;https://github.com/khellang/Scrutor&gt;
755 5
|
Java 物联网 C#
C#/.NET/.NET Core学习路线集合,学习不迷路!
C#/.NET/.NET Core学习路线集合,学习不迷路!
767 0
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9,此版本与 .NET 8 的 OData 库保持一致,改进了数据编码以符合 OData 规范,并放弃了对旧版 .NET Framework 的支持,仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`,优化了内存使用和序列化速度。
381 0
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
506 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
开发框架 算法 中间件
ASP.NET Core 中的速率限制中间件
在ASP.NET Core中,速率限制中间件用于控制客户端请求速率,防止服务器过载并提高安全性。通过`AddRateLimiter`注册服务,并配置不同策略如固定窗口、滑动窗口、令牌桶和并发限制。这些策略可在全局、控制器或动作级别应用,支持自定义响应处理。使用中间件`UseRateLimiter`启用限流功能,并可通过属性禁用特定控制器或动作的限流。这有助于有效保护API免受滥用和过载。 欢迎关注我的公众号:Net分享 (239字符)
457 1
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
517 3
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码,支持 C# 和 Visual Basic。Razor 语法简洁易学,类似于 ASP 和 PHP。例如,在网页中加入 `@DateTime.Now` 可以实时显示当前时间。