NET Core 创建 Web UI"/>
使用 ASP.NET Core 创建 Web UI
使用 ASP.NET Core 创建 Web UI
简介
示例方案
假设你是一家名为 Contoso Pizza 的披萨公司的雇员。 经理要求你为公司内部管理网站开发一个必备组件 - 披萨库存管理页面。 生成的应用应使视图和数据模型关注点分离。
你将做些什么?
在本模块中,你将:
- 了解在 ASP.NET Core 应用中使用 Razor Pages 的时机和原因。
- 查看使用 Razor Pages 的现有 ASP.NET Core 应用。
- 创建一个支持应用的产品数据管理要求的新 Razor 页面。
- 使用标记帮助程序减少 HTML 和 C# 之间的上下文切换。
- 使用 Razor 页面处理程序处理 HTTP 请求。
本模块末尾提供了一些链接,可以通过其中的内容更深入地了解我们介绍的各个功能区域。
必需工具
本模块使用 .NET CLI 和 Visual Studio Code(Windows、Linux 和 macOS)来演示 ASP.NET Core Razor Pages 开发。 完成本模块后,可以使用 Visual Studio (Windows)、Visual Studio for Mac (macOS) 或 Visual Studio Code 等开发环境来应用其概念。
提示
可以根据 IDE 使用 GitHub Codespaces 跳过安装以下工具。 在另一个浏览器选项卡中,导航到包含此模块的初学者应用的 GitHub 存储库,选择“代码”按钮,并在 main
分支上创建新的 codespace。 有关详细信息,请参阅创建 Codespace。
了解使用 Razor Pages 的时机和原因
- 5 分钟
本单元介绍在 ASP.NET Core 应用中使用 Razor Pages 的时机和原因。
Razor Pages 的优势
Razor Pages 是一种以页面为中心的服务器端编程模型,用于使用 ASP.NET Core 构建 Web UI。 优点包括:
- 使用 HTML、CSS 和 C# 轻松设置动态 Web 应用。
- 按功能整理文件,以便于维护。
- 使用 Razor 语法将标记与服务器端 C# 代码相结合。
Razor Pages 使用 Razor 将基于服务器的代码嵌入到网页中。 Razor 语法结合了 HTML 和 C# 来定义动态呈现逻辑。 这意味着可以在 HTML 标记中使用 C# 变量和方法,以在运行时在服务器上生成动态 Web 内容。 请务必了解 Razor Pages 不能替代 HTML、CSS 或 JavaScript。 它们是结合这些技术创建动态 Web 内容的一种方式。
分离关注点
Razor Pages 强制使用 C# PageModel
类分离关注点,封装范围限定为其 Razor 页面的数据属性和逻辑运算,并为 HTTP 请求定义页面处理程序。 PageModel
类是由 ASP.NET Core 项目模板自动生成的分部类。 PageModel
类位于 Pages
文件夹中,以 Razor 页命名。 例如,Index.cshtml
Razor 页的 PageModel
类名为 IndexModel.cs
。
使用 Razor Pages 的时机
在 ASP.NET Core 应用中使用 Razor Pages 的时机:
- 想要生成动态 Web UI。
- 首选以页面为中心的方法。
- 希望减少部分视图的重复。
Razor Pages 通过将相关页面及其逻辑保存在其自己的命名空间和目录中来简化 ASP.NET Core 页面组织。
备注
ASP.NET Core 还支持使用模型视图控制器 (MVC) 模式来生成 web 应用。 如果希望在模型、视图和控制器之间实现清晰的分隔,可以使用 MVC。 Razor Pages 和 MVC 可以共存在同一应用中。 MVC 超出了本模块的范畴。
Razor Pages 在工作效率方面的优势是,它可将应用中的视图的更改集中在一起。
练习 - 自定义项目
让我们花一些时间来熟悉 ContosoPizza 文件夹中的现有代码。 该项目是使用 dotnet new webapp
命令创建的 ASP.NET Core Web 应用。 下面描述了你的团队成员所做的更改。
- 已将 Models 文件夹添加到项目中。
- 该模型文件夹包含表示披萨的
Pizza
类。
- 该模型文件夹包含表示披萨的
- 已将 Data 文件夹添加到项目中。
- 该数据文件夹包含表示数据库上下文的
PizzaContext
类。 它继承自 Entity Framework Core 中的DbContext
类。 Entity Framework Core 是一种对象关系映射器 (ORMObject Relational Mapping:是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换。从效果上说,它其实是创建了一个可在编程语言里使用的–“虚拟对象数据库”。),可便于更轻松地使用数据库。
- 该数据文件夹包含表示数据库上下文的
- 已将 Services 文件夹添加到项目中。
- 该服务文件夹包含一个
PizzaService
类,该类公开用于列出和添加披萨的方法。 PizzaService
类使用PizzaContext
类在数据库中读取和写入披萨。- 该类在 Program.cs 中针对依赖项注入进行了注册(第 10 行)。
- 该服务文件夹包含一个
Entity Framework Core 也生成了一些内容:
- 已生成 Migrations 文件夹。
- 该迁移文件夹包含用于创建数据库架构的代码。
- 已生成 SQLite 数据库文件 ContosoPizza.db。
- 如果安装了 SQLite 扩展(或者使用的是 GitHub Codespaces),则可以通过右键单击该文件并选择“打开数据库”来查看数据库。 数据库架构显示在“资源管理器”窗格的“SQLite 资源管理器”选项卡中。
查看 Razor Pages 项目结构
项目中的所有其他内容与创建项目时的内容保持一致。 下表描述了由 dotnet new webapp
命令生成的项目结构。
名称 | 说明 |
---|---|
Pages/ | 包含 Razor Pages 和支持文件。 每个 Razor 页面都有一个 .cshtml 文件和一个 .cshtml.csPageModel 类文件。 |
wwwroot/ | 包含静态资产文件,例如 HTML、JavaScript 和 CSS。 |
ContosoPizza.csproj | 包含项目配置元数据,例如依赖项。 |
Program.cs | 充当应用的入口点并配置应用行为,例如路由。 |
其他值得注意的观察内容:
-
Razor 页面文件及其配对的
PageModel
类文件Razor 页面存储在 Pages 目录中。 如上所述,每个 Razor 页面都有一个 .cshtml 文件和一个 .cshtml.cs
PageModel
类文件。PageModel
类允许分离 Razor 页面的逻辑和表示形式,定义针对请求的页面处理程序,并封装范围限定为其 Razor 页面的数据属性和逻辑。 -
Pages 目录结构和路由请求
Razor Pages 使用 Pages 目录结构作为路由请求的约定。 下表显示了 URL 如何映射到文件名:
URL 映射到 Razor 页面 www.domain
Pages/Index.cshtml www.domain/Index
Pages/Index.cshtml www.domain/Privacy
Pages/Privacy.cshtml www.domain/Error
Pages/Error.cshtml Pages 目录中的子文件夹用于组织 Razor 页面。 例如,如果有 Pages/Products 目录,则 URL 将反映该结构:
URL 映射到 Razor 页面 www.domain/Products
Pages/Products/Index.cshtml www.domain/Products/Index
Pages/Products/Index.cshtml www.domain/Products/Create
Pages/Products/Create.cshtml -
布局和其他共享文件
有多个文件可跨多个页面共享。 这些文件确定常见的布局元素和页面导入。 下表描述了每个文件的用途。
文件 说明 _ViewImports.cshtml 导入跨多个页面使用的命名空间和类。 _ViewStart.cshtml 指定所有 Razor 页面的默认布局。 Pages/Shared/_Layout.cshtml 这是 _ViewStart.cshtml
文件指定的布局。 在多个页面中实现公共布局元素。Pages/Shared/_ValidationScriptsPartial.cshtml 为所有页面提供验证功能。
首次运行项目
让我们运行该项目,这样我们可以看到它的运行情况。
- 右键单击“资源管理器”中的 ContosoPizza 文件夹,然后选择“在集成终端中打开”。 随即会在项目文件夹的上下文中打开一个终端窗口。
- 在终端窗口中,输入以下命令:
dotnet watch
此命令:
- 生成项目。
- 启动应用。
- 监视文件更改,并在检测到更改时重启应用。
-
IDE 会提示你在浏览器中打开应用。 选择“在浏览器中打开”。
-
将呈现的主页与 IDE 中的 Pages/Index.cshtml 进行比较:
-
观察文件中 HTML、Razor 语法和 C# 代码的组合。
- Razor 语法由
@
字符表示。 - C# 代码包含在
@{ }
块中。 记下文件顶部的指令: @page
指令用于指定此文件是 Razor 页面。@model
指令用于指定页面的模型类型(在此示例中为IndexModel
,这是在 Pages/Index.cshtml.cs 中定义的)。
- Razor 语法由
-
查看 C# 代码块。
- 此代码将
ViewData
字典中Title
项的值设置为“主页”。 ViewData
字典用于在 Razor 页面和IndexModel
类之间传递数据。- 在运行时,
Title
值用于设置页面的<title>
元素。
使应用在终端窗口中保持运行。 我们将在即将介绍的单元中使用它。 还需保留包含运行中的 Contoso Pizza 应用的浏览器选项卡。 你将对应用进行更改,然后浏览器将自动刷新以显示更改。
- 此代码将
-
自定义登陆页面
让我们对登陆页面进行少量更改,使其与披萨应用具有更强的相关性。
在 Pages/Index.cshtml 中,将 C# 代码块中的代码替换为以下代码:
ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);
前面的代码:
将 ViewData 字典中 Title 项的值设置为“披萨爱好者的天堂”。
计算自业务开业以来已过去的时间。
按如下所示修改 HTML:
将 <h1>
元素替换为以下代码:
<h1 class="display-4">Welcome to Contoso Pizza</h1>
将 <p>
元素替换为以下代码:
<p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>
前面的代码:
将标题更改为“欢迎光临 Contoso Pizza”。
显示自业务开业以来已过去的天数。
@ 字符用于从 HTML 切换到 Razor 语法。
Convert.ToInt32 方法用于将 timeInBusiness 变量的 TotalDays 属性转换为整数。
Convert 类是 System 命名空间的一部分,该命名空间由 ContosoPizza.csproj 文件中的 <ImplicitUsings>
元素自动导入。
保存文件。 包含应用的浏览器选项卡会自动刷新以显示更改。 如果使用的是 GitHub Codespaces,则文件会自动保存,但需要手动刷新浏览器选项卡。
练习 - 添加新的 Razor 页面
创建“披萨列表”页面
若要创建新的 Razor 页面,需使用 .NET CLI。
由于终端被 dotnet watch 命令阻止,因此请通过右键单击“资源管理器”中的 ContosoPizza 文件夹以打开另一个终端,然后选择“在集成终端中打开”。
在终端窗口中,输入以下命令:
dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
上述命令:
-
将在
ContosoPizza.Pages
命名空间中创建以下文件:-
PizzaList.cshtml - Razor 页面
-
PizzaList.cshtml.cs - 随附的
PageModel
类
-
-
将两个文件存储在项目的 Pages 子目录中。
- 在 Pages/PizzaList.cshtml 中,在
@{ }
代码块中添加以下代码:
ViewData["Title"] = "Pizza List 🍕";
- 在文件末尾添加以下代码:
<h1>Pizza List 🍕</h1><!-- New Pizza form will go here --><!-- List of pizzas will go here -->
这会向页面添加一个标题,以及两个 HTML 注释占位符,用于稍后将添加的功能。
-
保存文件。 如果使用的是 GitHub Codespaces,则文件会自动保存。
-
返回到正在运行
dotnet watch
的终端,然后按 Ctrl+R 重新加载应用并检测新文件。
将“披萨列表”页面添加到导航菜单
这是测试页面的好时机,但你还无法进行测试,因为该页面未链接到导航菜单。 你现在需要执行该操作。
-
打开 Pages/Shared/_Layout.cshtml。
-
在包含
navbar-nav
类的<ul>
元素中(从第 21 行开始),请注意包含指向“主页”和“隐私”页面的链接的<li>
元素。 将以下代码添加到列表末尾处包含“隐私”链接的<li>
元素的后面:<li class="nav-item"><a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a> </li>
这会向导航菜单添加一个指向 PizzaList 页面的链接。
-
保存文件。 包含应用的浏览器选项卡会自动刷新以显示更改。 如果使用的是 GitHub Codespaces,则文件会自动保存,但需要手动刷新浏览器选项卡。
-
在导航菜单中选择“披萨列表 🍕”链接。 随即会显示“披萨列表”页面。
向依赖项注入容器注册 PizzaService 类
“披萨列表”页依赖于 PizzaService
对象来检索披萨列表。 你将使用依赖项注入向页面提供 PizzaService
对象。 为完成此操作,必须向容器注册 PizzaService
类。
-
打开 Program.cs。
-
在将服务添加到容器的部分中,添加以下代码:
builder.Services.AddScoped<PizzaService>();
此代码向依赖项注入容器注册
PizzaService
类。AddScoped
方法指示应为每个 HTTP 请求创建新的PizzaService
对象。 现在可以将PizzaService
注入到任何 Razor 页面。 -
保存文件。 如果使用的是 GitHub Codespaces,则文件会自动保存。
显示披萨列表
让我们来修改“披萨列表”页面的 PageModel
类,以从 PizzaService
对象检索披萨列表并将其存储在属性中。
-
打开 Pages/PizzaList.cshtml.cs。
-
将下列
using
语句添加到文件顶部:using ContosoPizza.Models; using ContosoPizza.Services;
这些语句可导入你将在页面中使用的
Pizza
和PizzaService
类型。 -
在
ContosoPizza.Pages
命名空间块中,将整个PizzaListModel
类替换为以下代码:public class PizzaListModel : PageModel {private readonly PizzaService _service;public IList<Pizza> PizzaList { get;set; } = default!;public PizzaListModel(PizzaService service){_service = service;}public void OnGet(){PizzaList = _service.GetPizzas();} }
在上述代码中:
- 已创建名为
_service
的专用只读PizzaService
。 此变量将保存对PizzaService
对象的引用。readonly
关键字指示在构造函数中设置_service
变量的值之后无法对其进行更改。
- 定义
PizzaList
属性以保存披萨列表。IList<Pizza>
类型指示PizzaList
属性将保存Pizza
对象列表。PizzaList
被初始化为default!
,以向编译器表明它稍后将被初始化,因此不需要进行 null 安全性检查。
- 构造函数接受
PizzaService
对象。- 对象
PizzaService
通过依赖项注入提供。
- 对象
- 定义
OnGet
方法以从PizzaService
对象中检索披萨列表并将其存储在PizzaList
属性中。
提示
如果需要了解 null 安全方面的帮助,请参阅 C# 中的 null 安全。
- 已创建名为
-
保存文件。 如果使用的是 GitHub Codespaces,则文件会自动保存。
-
返回到正在运行
dotnet watch
的终端,然后按 Ctrl+R 以重新加载具有已注册服务和PizzaListModel
的新构造函数的应用。
现在,可在页面上访问披萨列表,接下来需要使用该列表在页面上显示披萨。
- 打开 Pages/PizzaList.cshtml。
- 使用下面的代码替换
<!-- List of pizzas will go here -->
注释:
<table class="table mt-5"><thead><tr><th scope="col">Name</th><th scope="col">Price</th><th scope="col">Size</th><th scope="col">Gluten Free</th><th scope="col">Delete</th></tr></thead><tbody>@foreach (var pizza in Model.PizzaList){<tr><td>@pizza.Name</td><td>@($"{pizza.Price:C}")</td><td>@pizza.Size</td><td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td><td><form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id"><button class="btn btn-danger">Delete</button></form></td></tr>}</tbody>
</table>
在上述代码中:
- 已创建
<table>
元素来显示披萨列表。 - 已创建
<thead>
元素来保存表格标题。 <tbody>
中的@foreach
语句循环访问披萨列表。Model
属性引用在代码隐藏文件中创建的PizzaListModel
对象。PizzaList
属性引用在代码隐藏文件中定义的PizzaList
属性。
@foreach
语句的每个迭代都会创建一个<tr>
元素来保存披萨数据:- Razor 语法用于显示
<td>
元素中的披萨数据。 此语法用于显示存储在pizza
变量中的Pizza
对象的属性。 Price
是使用 C# 字符串内插进行格式设置的。- 三元表达式用于显示
IsGlutenFree
属性的值(“✔️”或空白单元格)。 - 已创建表单来删除披萨。
asp-page-handler
属性指示应将表单提交到代码隐藏文件中的Delete
处理程序。 你将在后面的单元中创建该处理程序。asp-route-id
属性指示应将Pizza
对象的Id
属性传递给Delete
处理程序。
- Razor 语法用于显示
- 保存文件。 在浏览器中,“披萨列表”页面会刷新以显示披萨列表。 如果使用的是 GitHub Codespaces,则文件会自动保存,但需要手动刷新浏览器选项卡。
做得很好! 你已创建一个显示披萨列表的 Razor 页面。 在下一单元中,你将了解标记帮助程序和页面处理程序。
了解标记帮助器和页面处理程序
在上一单元中,你创建了一个显示披萨列表的 Razor 页面。你使用了 @
符号在 HTML 和 C# 之间切换上下文。在此单元中,你将了解标记帮助程序。标记帮助程序是一种特殊的可以包含 C# 代码的 HTML 元素。你还将了解页面处理程序。页面处理程序是处理浏览器请求的方法。你将在下一单元中使用页面处理程序来添加和删除披萨。
标记帮助程序
标记帮助程序用于解决 HTML 和 C# 之间上下文切换效率低下问题。 ASP.NET Core 内置的多数标记帮助程序都可扩展标准 HTML 元素。 标记帮助程序为 HTML 元素提供了额外的服务器端特性,使元素更加可靠。
对于此项目,你应该知道四个标记帮助程序:Partial、Label、Input 和 Validation Summary Message。
分部标记帮助程序
<partial name="_ValidationScriptsPartial" />
这会将 _ValidationScriptsPartial.cshtml
文件的内容注入页面。 _ValidationScriptsPartial.cshtml
文件包含用于验证表单输入的 JavaScript,因此需要将其包含在包含表单的每个页面上。
标签标记帮助程序
<label asp-for="Foo.Id" class="control-label"></label>
这扩展了标准 HTML <label>
元素。 与许多标记帮助程序一样,它使用 asp-for
特性。 特性接受来自 PageModel
的属性。 在本例中,PageModel
的 Foo.Id
属性的名称(具体来说,字符串 "Id"
)将呈现为 HTML <label>
元素的内容。
输入标记帮助程序
<input asp-for="Foo.Id" class="form-control" />
与前面的示例类似,这会扩展标准 HTML <input>
元素。 它还使用 asp-for
特性来指定 PageModel
属性。 在本例中,Foo.Id
属性的值将作为 HTML <input>
元素的 value
特性呈现。
验证摘要标记帮助程序
<div asp-validation-summary="All"></div>
验证摘要标记帮助程序显示模型上单个属性的验证消息。
备注:
验证规则和属性显示名称等内容在 PageModel
类中定义。 我们将在下一单元中指出在代码中的什么位置查找它们。
页面处理程序
PageModel
类定义 HTTP 请求的页面处理程序和用于呈现页面的数据。 在上一练习中,PizzaListModel
类通过将 PizzaList
属性的值设置为 _service.GetPizzas()
的值处理了 HTTP GET 请求。
常见的处理程序包括用于页面初始化的 OnGet
和用于表单提交的 OnPost
。 为了处理 HTTP POST,页面处理程序可能会验证用户提交的数据,如果无效,则再次显示输入表单页,或者将有效数据发送到服务或数据库进行保留。
在下一单元中,你将添加一个表单,以使用多个标记帮助程序创建新披萨。 你还将添加页面处理程序来处理表单提交和删除披萨。
练习 - 添加新的披萨表单
在本单元中,你将完成“披萨列表”页面,方式是添加一个表单来创建新披萨。 你还将添加页面处理程序来处理表单提交和删除披萨。
添加表单以创建新披萨
首先,向 PizzaListModel
类添加属性以表示用户输入。 还需添加相应的页面处理程序。
- 打开 Pages\PizzaList.cshtml.cs,并将以下属性添加到
PizzaListModel
类:
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
在上述代码中:
- 将名为
NewPizza
的属性添加到PizzaListModel
类。NewPizza
是一个Pizza
对象。
BindProperty
特性应用到NewPizza
属性。BindProperty
特性用于将NewPizza
属性绑定到 Razor 页面。 发出 HTTP POST 请求时,将使用用户输入填充NewPizza
属性。
- 将
NewPizza
属性初始化为default!
。default!
关键字用于将NewPizza
属性初始化为null
。这可以防止编译器生成有关NewPizza
属性未初始化的警告。
- 现在,为 HTTP POST 添加页面处理程序。在同一文件中,将以下方法添加到
PizzaListModel
类:
public IActionResult OnPost()
{if (!ModelState.IsValid || NewPizza == null){return Page();}_service.AddPizza(NewPizza);return RedirectToAction("Get");
}
在上述代码中:
ModelState.IsValid
属性用于确定用户输入是否有效。- 验证规则是根据 Models\Pizza.cs 中
Pizza
类上的属性(例如Required
和Range
)推断出来的。 - 如果用户输入无效,则调用
Page
方法来重新呈现页面。
- 验证规则是根据 Models\Pizza.cs 中
NewPizza
属性用于向_service
对象添加新的披萨。RedirectToAction
方法用于将用户重定向到Get
页面处理程序,该处理程序将重新呈现包含更新的披萨列表的页面。
-
保存文件。如果使用的是 GitHub Codespaces,则文件会自动保存。
-
返回到正在运行
dotnet watch
的终端,然后按 Ctrl+R 重新加载应用。
-
打开 Pages\PizzaList.cshtml 并将
<!-- New Pizza form will go here -->
替换为以下代码:
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group"><label asp-for="NewPizza.Name" class="control-label"></label><input asp-for="NewPizza.Name" class="form-control" /><span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group"><label asp-for="NewPizza.Size" class="control-label"></label><select asp-for="NewPizza.Size" class="form-control" id="PizzaSize"><option value="">-- Select Size --</option><option value="Small">Small</option><option value="Medium">Medium</option><option value="Large">Large</option></select><span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check"><label class="form-check-label"><input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)</label>
</div>
<div class="form-group"><label asp-for="NewPizza.Price" class="control-label"></label><input asp-for="NewPizza.Price" class="form-control" /><span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group"><input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
在上述代码中:
asp-validation-summary
属性用于显示整个模型的验证错误。- 每个表单字段(
<input>
和<select>
元素)和<label>
都使用asp-for
特性绑定到NewPizza
属性。 asp-validation-for
属性用于显示每个表单字段的验证错误。@Html.DisplayNameFor
方法用于显示IsGlutenFree
属性的显示名称。 这是一种 Razor 帮助程序方法,用于显示属性的显示名称。 以这种方式添加标签可确保用户单击标签时复选框处于选中状态。- 提交按钮会添加到表单中,以便将表单数据发布到服务器。在运行时,当用户单击提交按钮时,浏览器以 HTTP POST 请求的形式向服务器发送表单。
在页面底部添加以下代码:
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
这会将客户端验证脚本注入页面。客户端验证脚本用于在将表单提交到服务器之前验证用户输入。
3. 保存文件。在浏览器中,“披萨列表”页面会刷新以显示新表单。如果使用的是 GitHub Codespaces,则文件会自动保存,但需要手动刷新浏览器选项卡。
4. 输入新披萨,然后选择“创建”按钮。页面应刷新并在列表中显示新披萨。
添加用于删除披萨的页面处理程序
要添加到“披萨列表”页面的最后一项内容是:用于删除披萨的页面处理程序。 用于删除披萨的按钮已显示在页面上,但它们尚未执行任何操作。
- 返回到 Pages\PizzaList. Cshtml. Cs,将以下方法添加到
PizzaListModel
类:
public IActionResult OnPostDelete(int id)
{_service.DeletePizza(id);return RedirectToAction("Get");
}
-
在上述代码中:
- 当用户单击针对某个披萨的“删除”按钮时,会调用
OnPostDelete
方法。- 页面知道使用此方法,因为 Pages\PizzaList.cshtml 中“删除”按钮上的
asp-page-handler
属性已设置为Delete
。
- 页面知道使用此方法,因为 Pages\PizzaList.cshtml 中“删除”按钮上的
id
参数用于标识要删除的披萨。id
参数绑定到 URL 中的id
路由值。 此操作是通过 Pages\PizzaList.cshtml 中“删除”按钮上的asp-route-id
属性完成的。
- 对
_service
对象调用DeletePizza
方法以删除披萨。 RedirectToAction
方法用于将用户重定向到Get
页面处理程序,该处理程序将重新呈现包含更新的披萨列表的页面。
- 当用户单击针对某个披萨的“删除”按钮时,会调用
-
保存文件。 如果使用的是 GitHub Codespaces,则文件会自动保存。
-
测试针对披萨的“删除”按钮。 页面应刷新,并且所选披萨应从列表中移除。
恭喜! 你已成功创建一个 Razor 页面,该页面显示披萨列表,并允许用户添加新披萨和删除披萨。
总结
在本模块中,你已了解 Razor Pages 的基础知识。你已了解如何创建 Razor 页面、添加模型和添加页面处理程序。你还了解了如何使用标记帮助程序将 HTML 元素绑定到模型属性并生成 URL。此外,你还了解了如何使用依赖项注入将服务注入到 Razor 页面。
后续步骤
深入了解文档。本模块中引入了以下 ASP.NET Core 功能和概念:
- Razor Pages
- Razor 语法参考
- 标记帮助程序
- 分部视图
- 布局
- 路由
- 依赖关系注入
- 使用类型化客户端模式发出 HTTP 请求
更多推荐
使用 ASP.NET Core 创建 Web UI
发布评论