创建基于ASP.NET core 3.1 的RazorPagesMovie项目(三)-已搭建基架的Razor页面解释和更新
2021-03-17 16:25
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 IListMovie { get;set; } 23 24 public async Task OnGetAsync() 25 { 26 Movie = await _context.Movie.ToListAsync(); 27 } 28 } 29 }
① 第13行:表示该Razor页面派生自PageModel。约定:PageModel派生的类称为
② 第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 TaskOnPostAsync() 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 8Index
9 10 13
17 @Html.DisplayNameFor(model => model.Movie[0].Title) 18 | 1920 @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate) 21 | 2223 @Html.DisplayNameFor(model => model.Movie[0].Genre) 24 | 2526 @Html.DisplayNameFor(model => model.Movie[0].Price) 27 | 2829 |
---|---|---|---|---|
35 @Html.DisplayFor(modelItem => item.Title) 36 | 3738 @Html.DisplayFor(modelItem => item.ReleaseDate) 39 | 4041 @Html.DisplayFor(modelItem => item.Genre) 42 | 4344 @Html.DisplayFor(modelItem => item.Price) 45 | 4647 "./Edit" asp-route-id="@item.ID">Edit | 48 "./Details" asp-route-id="@item.ID">Details | 49 "./Delete" asp-route-id="@item.ID">Delete 50 | 51
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["Title"] - RazorPagesMovie 7 "stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> 8 "stylesheet" href="~/css/site.css" /> 9 10 1112 31 32class="container"> 3337 38 43 44 45 46 47 48 @RenderSection("Scripts", required: false) 49 50"main" class="pb-3"> 34 @RenderBody() 35 36
① 这是一个页面布局的模板(类似于母版页)。它允许HTML容器具有如下布局:在一个位置指定;应用于站点中的多个页面。
② 第34行:@RenderBody(),是显示全部页面专用视图的占位符。
③ 第6行:通过@ViewData["Title"]将字典中的对象“Title”的值取出来,和字符串‘- RazorPagesMovie’一起。最终形成页面上我们看到的标题:
④ Razor页面的注释方式采用: @* 注释内容*@ 的方式进行注释(区别于HTML的注释
文章标题:创建基于ASP.NET core 3.1 的RazorPagesMovie项目(三)-已搭建基架的Razor页面解释和更新
文章链接:http://soscw.com/essay/65379.html