本節主要介紹在上一節中通過搭建基架而創建的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> Movie { get;set; } 23 24 public async Task OnGetAsync() 25 { 26 Movie = await _context.Movie.ToListAsync(); 27 } 28 } 29 }
① 第13行：表示該Razor頁面派生自PageModel，約定：PageModel派生的類稱為<PageName>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<IActionResult> 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<IActionResult>時，必須提供回傳陳述句，
3、雙擊Pages/Movies/Index.cshtml檔案，這是一個Razor頁面：
1 @page 2 @model RazorPagesMovie.IndexModel 3 4 @{ 5 ViewData["Title"] = "Index"; 6 } 7 8 <h1>Index</h1> 9 10 <p> 11 <a asp-page="Create">Create New</a> 12 </p> 13 <table class="table"> 14 <thead> 15 <tr> 16 <th> 17 @Html.DisplayNameFor(model => model.Movie[0].Title) 18 </th> 19 <th> 20 @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate) 21 </th> 22 <th> 23 @Html.DisplayNameFor(model => model.Movie[0].Genre) 24 </th> 25 <th> 26 @Html.DisplayNameFor(model => model.Movie[0].Price) 27 </th> 28 <th></th> 29 </tr> 30 </thead> 31 <tbody> 32 @foreach (var item in Model.Movie) { 33 <tr> 34 <td> 35 @Html.DisplayFor(modelItem => item.Title) 36 </td> 37 <td> 38 @Html.DisplayFor(modelItem => item.ReleaseDate) 39 </td> 40 <td> 41 @Html.DisplayFor(modelItem => item.Genre) 42 </td> 43 <td> 44 @Html.DisplayFor(modelItem => item.Price) 45 </td> 46 <td> 47 <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> | 48 <a asp-page="./Details" asp-route-id="@item.ID">Details</a> | 49 <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a> 50 </td> 51 </tr> 52 } 53 </tbody> 54 </table>
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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>@ViewData["Title"] - RazorPagesMovie</title> 7 <link rel="stylesheet" href=https://www.cnblogs.com/treeskyer/p/"~/lib/bootstrap/dist/css/bootstrap.min.css" /> 8 <link rel="stylesheet" href=https://www.cnblogs.com/treeskyer/p/"~/css/site.css" /> 9 </head> 10 <body> 11 <header> 12 <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> 13 <div class="container"> 14 <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesMovie</a> 15 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" 16 aria-expanded="false" aria-label="Toggle navigation"> 17 <span class="navbar-toggler-icon"></span> 18 </button> 19 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> 20 <ul class="navbar-nav flex-grow-1"> 21 <li class="nav-item"> 22 <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a> 26 </li> 27 </ul> 28 </div> 29 </div> 30 </nav> 31 </header> 32 <div class="container"> 33 <main role="main" class="pb-3"> 34 @RenderBody() 35 </main> 36 </div> 37 38 <footer class="border-top footer text-muted"> 39 <div class="container"> 40 © 2019 - RazorPagesMovie - <a asp-area="" asp-page="/Privacy">Privacy</a> 41 </div> 42 </footer> 43 44 <script src=https://www.cnblogs.com/treeskyer/p/"~/lib/jquery/dist/jquery.min.js"></script> 45 <script src=https://www.cnblogs.com/treeskyer/p/"~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> 46 <script src=https://www.cnblogs.com/treeskyer/p/"~/js/site.js" asp-append-version="true"></script> 47 48 @RenderSection("Scripts", required: false) 49 </body> 50 </html>
① 這是一個頁面布局的模板（類似于母版頁），它允許HTML容器具有如下布局：在一個位置指定；應用于站點中的多個頁面，
② 第34行：@RenderBody()，是顯示全部頁面專用視圖的占位符，
③ 第6行：通過@ViewData["Title"]將字典中的物件“Title”的值取出來，和字串‘- RazorPagesMovie’一起，最終形成頁面上我們看到的標題：
④ Razor頁面的注釋方式采用： @* 注釋內容*@ 的方式進行注釋（區別于HTML的注釋<!-- 注釋-- >），注釋不會被發送到客戶端
5、更新布局
① 更改Title和鏈接頁面
/Pages/Shared/_Layout.cshtml檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - 電影</title>
<link rel="stylesheet" href="https://www.cnblogs.com/treeskyer/p/~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://www.cnblogs.com/treeskyer/p/~/css/site.css" />
</head>
<body>
<header>
<nav >
<div >
<a asp-page="/Movies/Index">我的電影</a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
這里一共更改了2處：
<title>@ViewData["Title"] - 電影</title>
<a asp-page="/Movies/Index">我的電影</a>
其中第二處更改，原先的代碼是：asp-area="" asp-page="/Movies/Index">，它表示一個標記幫助程式，更改之后，它是一個定位點標記幫助程式，asp-page="/Movies/Index"標記了幫助程式的屬性和值可以創建指向/Movies/Index的Razor頁面的連接，其中，asp-area屬性值為空，表示連接中未使用區域，
Pages/Movies/Index.cshtml檔案：
@page
@model RazorPagesMovie.IndexModel
@{
ViewData["Title"] = "首頁";
}
<h1>首頁</h1>
Pages/_ViewStart.cshtml中設定Layout屬性：
1 @{ 2 Layout = "_Layout"; 3 }
這個標記，針對所有Razor檔案將布局檔案設定為Pages檔案夾下的Pages/Shared/_Layout.cshtml，
Pages/Movies/Create.cshtml.cs檔案：
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<IActionResult> 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 }
第22行：OnGet方法初始化頁面所需的任何狀態，Create頁沒有任何要初始化的狀態，因此回傳Page()，Page()方法創建用于呈現Create.cshtml頁的PageResult物件，后面，我們會繼續學習OnGet初始化狀態的示例，
第27、28行：使用[BindProperty]特性，來給Movie屬性選擇加入模型系結，當Create頁面發布表單值（form 標記）時，ASP.NET Core運行時將發布(post回傳)的值系結到Movie模型，
第32行：當頁面發布（post）表單（form）資料時，將運行OnGetAsync方法，
第34-37行：如果不存在任何模型錯誤，將重新顯示表單，以及post回的任何表單資料，在post回form前，在可以在客戶端捕獲到大部分的模型錯誤，模型錯誤的一個實體是：post回的日期欄位值無法轉換為日期，
第39-42行：如果不存在模型錯誤，將保存資料，最后瀏覽器會重定向到Index頁面，
打開、更新Pages/Movies/Create.cshtml 的Razor頁面：
1 @page 2 @model RazorPagesMovie.CreateModel 3 4 @{ 5 ViewData["Title"] = "添加"; 6 } 7 8 <h1>新增</h1> 9 10 <h4>電影</h4> 11 <hr /> 12 <div class="row"> 13 <div class="col-md-4"> 14 <form method="post"> 15 <div asp-validation-summary="ModelOnly" class="text-danger"></div> 16 <div class="form-group"> 17 <label asp-for="Movie.Title" class="control-label">標題</label> 18 <input asp-for="Movie.Title" class="form-control" /> 19 <span asp-validation-for="Movie.Title" class="text-danger"></span> 20 </div> 21 <div class="form-group"> 22 <label asp-for="Movie.ReleaseDate" class="control-label">發布時間</label> 23 <input asp-for="Movie.ReleaseDate" class="form-control" /> 24 <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span> 25 </div> 26 <div class="form-group"> 27 <label asp-for="Movie.Genre" class="control-label">題材</label> 28 <input asp-for="Movie.Genre" class="form-control" /> 29 <span asp-validation-for="Movie.Genre" class="text-danger"></span> 30 </div> 31 <div class="form-group"> 32 <label asp-for="Movie.Price" class="control-label">價格</label> 33 <input asp-for="Movie.Price" class="form-control" /> 34 <span asp-validation-for="Movie.Price" class="text-danger"></span> 35 </div> 36 <div class="form-group"> 37 <input type="submit" value=https://www.cnblogs.com/treeskyer/p/"添加" class="btn btn-primary" /> 38 </div> 39 </form> 40 </div> 41 </div> 42 43 <div> 44 <a asp-page="Index">回傳到電影串列</a> 45 </div> 46 47 @section Scripts { 48 @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} 49 }
第14行：表示這個元素是一個表單標記幫助程式（form tag helper），表單標記幫助程式會自動包含防偽令牌（antiforgery token），
第15-34行：基架引擎在模型中為每個欄位（除ID外）創建Razor標記，
其中<div asp-validation-summary>和<span asp-validation-for>一起，用于顯示驗證錯誤，詳細的驗證資訊以后再學習，
<label asp-for="" >是標簽標記幫助程式（label tag helper），生成一個標簽描述和Title屬性的for特性，（這里我們手動更改為“標題”），
<input asp_for="" >使用DataAnnotations屬性并在客戶端生成jQuery驗證所需的HTML屬性，
6、驗證
按下ctrl+F5，運行應用程式，測驗我們更改的效果，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/47492.html
標籤：其他