學習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 屬性。