创建基于ASP.NET core 3.1 的RazorPagesMovie项目（三）-已搭建基架的Razor页面解释和更新

2021-03-17 16:25

阅读：502

YPE html>

标签：程序 span 没有 bsp version nav 访问冲突 site sys

本节主要介绍在上一节中通过搭建基架而创建的Razor页面，并做一些UI改变。

一、创建、删除、详细信息和编辑页面

　　1、双击Pages/Movies/Index.cshtml.cs文件，这是一个Razor页面模型：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Threading.Tasks;
 5 using Microsoft.AspNetCore.Mvc;
 6 using Microsoft.AspNetCore.Mvc.RazorPages;
 7 using Microsoft.EntityFrameworkCore;
 8 using RazorPagesMovie.Data;
 9 using RazorPagesMovie.Models;
10 
11 namespace RazorPagesMovie
12 {
13     public class IndexModel : PageModel
14     {
15         private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;
16 
17         public IndexModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
18         {
19             _context = context;
20         }
21 
22         public IList Movie { get;set; }
23 
24         public async Task OnGetAsync()
25         {
26             Movie = await _context.Movie.ToListAsync();
27         }
28     }
29 }

　　① 第13行：表示该Razor页面派生自PageModel。约定：PageModel派生的类称为Model。

　　② 第17行：表示这是一个构造函数，使用依赖关系注入将RazorPagesMovieContent添加到页。所有已搭建基架的页面都遵循这个模式。

　　③ 第24行：表示对页面发出请求时，OnGetAsync方法向Razor页面返回影片列表。调用OnGetAsync或OnGet以初始化页面的状态。OnGetAsync方法将获得的影片列表显示出来。当OnGet返回void或OnGetAsync返回task时，使用任何返回语句。因为此时返回的Movie对象，在程序中做了定义（第22行）

　2、双击Pages/Movies/Create.cshtml.cs文件，这也是一个Razor页面模型：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Threading.Tasks;
 5 using Microsoft.AspNetCore.Mvc;
 6 using Microsoft.AspNetCore.Mvc.RazorPages;
 7 using Microsoft.AspNetCore.Mvc.Rendering;
 8 using RazorPagesMovie.Data;
 9 using RazorPagesMovie.Models;
10 
11 namespace RazorPagesMovie
12 {
13     public class CreateModel : PageModel
14     {
15         private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;
16 
17         public CreateModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
18         {
19             _context = context;
20         }
21 
22         public IActionResult OnGet()
23         {
24             return Page();
25         }
26 
27         [BindProperty]
28         public Movie Movie { get; set; }
29 
30         // To protect from overposting attacks, please enable the specific properties you want to bind to, for
31         // more details see https://aka.ms/RazorPagesCRUD.
32         public async Task OnPostAsync()
33         {
34             if (!ModelState.IsValid)
35             {
36                 return Page();
37             }
38 
39             _context.Movie.Add(Movie);
40             await _context.SaveChangesAsync();
41 
42             return RedirectToPage("./Index");
43         }
44     }
45 }

　　④ 第32、22行：当返回类型是IActionResult或Task时，必须提供返回语句。

3、双击Pages/Movies/Index.cshtml文件，这是一个Razor页面：

 1 @page
 2 @model RazorPagesMovie.IndexModel
 3 
 4 @{
 5     ViewData["Title"] = "Index";
 6 }
 7 
 8 Index
 9 
10 
11     "Create">Create New
12 
13

class="table"> 1415161922252829303132 @foreach (var item in Model.Movie) { 3334374043465152} 5354

17 @Html.DisplayNameFor(model => model.Movie[0].Title) 18	20 @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate) 21	23 @Html.DisplayNameFor(model => model.Movie[0].Genre) 24	26 @Html.DisplayNameFor(model => model.Movie[0].Price) 27
35 @Html.DisplayFor(modelItem => item.Title) 36	38 @Html.DisplayFor(modelItem => item.ReleaseDate) 39	41 @Html.DisplayFor(modelItem => item.Genre) 42	44 @Html.DisplayFor(modelItem => item.Price) 45	47 "./Edit" asp-route-id="@item.ID">Edit \| 48 "./Details" asp-route-id="@item.ID">Details \| 49 "./Delete" asp-route-id="@item.ID">Delete 50

　　Razor可以从HTML转换为C#或Razor特定的标记。当@符号后面跟着Razor保留关键字时，它会转换为Razor特定标记，否则会转换为C#。

　　① 第1行：@page指令，它是一个Razor指令的一个示例。该指令表示将文件转换为一个MVC操作。这意味着它可以处理请求。@page必须是页面上第一个Razor指令。

　　② 第17-26行：@Html 这是一系列的使用Lambda表达式的HTML帮助程序。DisplayNameFor HTML帮助程序检查Lambda表达式引用的Tile、ReleaseDate等属性来确定显示名称。检查Lambda表达式（而非求值），意味着model、model.Movie或model.Movie[0]为null或空时，不会存在任何访问冲突。

　　③ 第35-44行：@Html.DisplayFor是对Lambda表达式进行求值，将获得该模型的属性值。

　　④ 第2行：@model指令，指定传递给Razor页面的模型类型。这个例子中的模型类型，就是第1段中派生于PageModel类的IndexModel模型。

　　⑤ 第4-6行：@符号后面没有Razor关键字，表示这是C#的一个示例。{}大括号中是C#代码块。这个页面的引用的模型是IndexModel，它派生于PageModel，PageModel基类中包含ViewData字典属性，可用于将数据传递到某个视图。我们可以采用键值对的模式将对象添加到ViewData字典中。这里，“Title”属性被添加到ViewData字典中。而“Title”属性又被用于/Pages/Shared/_Layout.cshtml文件中。见第4节中的第③条注释。

4、双击/Pages/Shared/_Layout.cshtml文件

 1 
 2 "en">
 3 4     "utf-8" />
 5     "viewport" content="width=device-width, initial-scale=1.0" />
 6     @ViewData[<span>"</span><span>Title</span><span>"</span>] - RazorPagesMovie 7     "stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
 8     "stylesheet" href="~/css/site.css" />
 9 
10 
11     
12         class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
13             class="container">
14                 class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie
15                 
19                 class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
20                     class="navbar-nav flex-grow-1">
21                         class="nav-item">
22                             class="nav-link text-dark" asp-area="" asp-page="/Index">Home
23                         

24                         class="nav-item">
25                             class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy
26                         

27                     
28                 
29             

30         
31     
32     class="container">
33         "main" class="pb-3">
34             @RenderBody()
35         
36     
37 
38     class="border-top footer text-muted">
39         class="container">
40             © 2019 - RazorPagesMovie - "" asp-page="/Privacy">Privacy
41         

42     
43 
44     45     46     47 
48     @RenderSection("Scripts", required: false)
49 
50

　　① 这是一个页面布局的模板（类似于母版页）。它允许HTML容器具有如下布局：在一个位置指定；应用于站点中的多个页面。

　　② 第34行：@RenderBody()，是显示全部页面专用视图的占位符。

　　③ 第6行：通过@ViewData["Title"]将字典中的对象“Title”的值取出来，和字符串‘- RazorPagesMovie’一起。最终形成页面上我们看到的标题：

　　技术图片

　　④ Razor页面的注释方式采用： @* 注释内容*@ 的方式进行注释（区别于HTML的注释

上一篇：Metal渲染：实现旋转/翻转功能

下一篇：js计算三个数字的大小，按从小到大的顺序打印

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：创建基于ASP.NET core 3.1 的RazorPagesMovie项目（三）-已搭建基架的Razor页面解释和更新
文章链接：http://soscw.com/index.php/essay/65379.html

亲，登录后才可以留言！

创建基于ASP.NET core 3.1 的RazorPagesMovie项目（三）-已搭建基架的Razor页面解释和更新

一、创建、删除、详细信息和编辑页面

1、双击Pages/Movies/Index.cshtml.cs文件，这是一个Razor页面模型：

2、双击Pages/Movies/Create.cshtml.cs文件，这也是一个Razor页面模型：

3、双击Pages/Movies/Index.cshtml文件，这是一个Razor页面：

Index

4、双击/Pages/Shared/_Layout.cshtml文件

评论

热门文章

推荐文章

最新文章

置顶文章