學習ASP.NET Core Razor 編程系列目錄

學習ASP.NET Core Razor 編程系列一

學習ASP.NET Core Razor 編程系列二——添加一個實體

?學習ASP.NET Core Razor 編程系列三——創建數據表及創建項目基本頁面

學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面

?

?

???????? 上一篇文章中我們學習了列表頁面的結構，@page與@model兩個關鍵Razor指令，以及頁面布局應該修改哪里。這一篇文章我們來學習一下新建頁面。

????????? 首先，我們在Visual Studio 2017的解決方案管理器中，打開Pages/Books/Create.cshtml.cs 文件，這個文件中的的代碼如下:

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Microsoft.AspNetCore.Mvc.Rendering; using RazorMvcBooks.Models;namespace RazorMvcBooks.Pages.Books {public class CreateModel : PageModel{private readonly RazorMvcBooks.Models.BookContext _context;public CreateModel(RazorMvcBooks.Models.BookContext context){_context = context;}public IActionResult OnGet(){return Page();}[BindProperty]public Book Book { get; set; }public async Task<IActionResult> OnPostAsync(){if (!ModelState.IsValid){return Page();}_context.Book.Add(Book);await _context.SaveChangesAsync();return RedirectToPage("./Index");}} }

?

??????? OnGet 方法與上一篇文章中的OnGetAsync方法實現的功能一樣，都是進行頁面初始化。 但是“新建”頁面沒有任何要初始化的狀態。 Page方法會創建一個用于呈現 “新建”頁面內容的 PageResult 對象。

??????? 屬性Book使用 [BindProperty] 特性綁定到“新建”頁面實例對象中。 當“新建”頁面的表單把表單中的值以POST的方式發送到后臺時，ASP.NET Core 運行時會將表單中的值綁定到 Book實體上。

?

??????? 在頁面中點擊“Create”按鈕，即通過POST方法發出表單數據請求時，Asp.Net Core將調用 OnPostAsync 方法：??

public async Task<IActionResult> OnPostAsync(){if (!ModelState.IsValid){return Page();}_context.Book.Add(Book);await _context.SaveChangesAsync();return RedirectToPage("./Index");}

??????? 如果有任何錯誤，沒有通過校驗規則，頁面將重新顯示表單，以及我們剛才填寫的數據。 在表單發出請求前，也可以通過在客戶端添加校驗而捕獲到大部分錯誤。 例如以下的一個錯誤示例，表單中填寫的日期字段值無法轉換為日期格式數據。

?

?????????? 如果不存在錯誤，應用程序將會把我們填寫的數據保存到數據庫，并且瀏覽器會重定向到書籍列表頁面，在書籍列表頁面中的書籍列表中會出現我們剛才保存的數據。如下圖。

???????? 新建頁面的 Razor 前臺頁面

??????? 接下來我們在Visual Studio 2017的解決方案資源管理器中使用鼠標左鍵雙擊打開 Pages/Books/Create.cshtml Razor文件，文件中的內容如下:

@page @model RazorMvcBooks.Pages.Books.CreateModel @{ViewData["Title"] = "Create"; } <h2>Create</h2> <h4>Book</h4> <hr /> <div class="row"><div class="col-md-4"><form method="post"><div asp-validation-summary="ModelOnly" class="text-danger"></div><div class="form-group"><label asp-for="Book.Name" class="control-label"></label><input asp-for="Book.Name" class="form-control" /><span asp-validation-for="Book.Name" class="text-danger"></span></div><div class="form-group"><label asp-for="Book.ReleaseDate" class="control-label"></label><input asp-for="Book.ReleaseDate" class="form-control" /><span asp-validation-for="Book.ReleaseDate" class="text-danger"></span></div><div class="form-group"><label asp-for="Book.Author" class="control-label"></label><input asp-for="Book.Author" class="form-control" /><span asp-validation-for="Book.Author" class="text-danger"></span></div><div class="form-group"><label asp-for="Book.Price" class="control-label"></label><input asp-for="Book.Price" class="form-control" /><span asp-validation-for="Book.Price" class="text-danger"></span></div><div class="form-group"><input type="submit" value="Create" class="btn btn-default" /></div></form></div> </div> <div><a asp-page="Index">Back to List</a> </div> @section Scripts {@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

?

??????? Visual Studio以一種獨特的字體顯示<form method="post"> 標記，如下圖：

?

??????? <form method="post"> 元素是一個表單標記助手。 表單標記助手會自動包含防偽標記。

??????? 基架引擎在Razor頁面中為每個字段（ID 除外）創建一個類似下面的 Razor 標簽，如下所示：?

<div asp-validation-summary="ModelOnly" class="text-danger"></div><div class="form-group"><label asp-for="Book.Name" class="control-label"></label><input asp-for="Book.Name" class="form-control" /><span asp-validation-for="Book.Name" class="text-danger"></span></div>

????? 對于上述代碼中的一些輔助助手介紹如下：

????? 校驗標簽助手（<div asp-validation-summary 和 <span asp-validation-for）顯示驗證錯誤。

????? 標簽輔助助手 (<label asp-for="Book.Name" class="control-label"></label>) 為實體對象字段生成描述標簽標題和屬性。

?????? 輸入輔助助手 (<input asp-for="Book.Name" class="form-control" />) 在實體類上采用dataannotations屬性，就可以在在客戶端生成 jQuery 驗證所需的 HTML 屬性。

?

?

?

轉載于:https://www.cnblogs.com/chillsrc/p/8778379.html

總結

以上是生活随笔為你收集整理的学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。