学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面-白红宇

学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面

阅读量：6905 次

发布时间：2019-06-27

本文共 3373 字，大约阅读时间需要 11 分钟。

原文:

学习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
     
       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
     
       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";}Create
Book
     
         
              
                   
        
            
                        
                         
                         
                     
        
            
                        
                         
                         
                     
        
            
                        
                         
                         
                     
        
            
                        
                         
                         
                     
        
            
                        
                     
        
        
       
    
      
     
         
      Back to List
     
@section Scripts {    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} }

Visual Studio以一种独特的字体显示<form method="post"> 标记，如下图：

<form method="post"> 元素是一个表单标记助手。表单标记助手会自动包含防伪标记。

基架引擎在Razor页面中为每个字段（ID 除外）创建一个类似下面的 Razor 标签，如下所示：

对于上述代码中的一些辅助助手介绍如下：

校验标签助手（<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 属性。

转载地址：http://xpldl.baihongyu.com/

你可能感兴趣的文章