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

发布时间:2018/4/11 17:10:36 次浏览

首先,我们在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 属性。