學習ASP.NET Core Razor 程式設計系列五——Asp.Net Core Razor建立模闆頁面

原文: 學習ASP.NET Core Razor 程式設計系列五——Asp.Net Core Razor建立模闆頁面 學習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 屬性。