学习 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