学习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.
原文: 学习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 属性。

 

 

 

目录
相关文章
|
3天前
|
开发框架 前端开发 JavaScript
盘点72个ASP.NET Core源码Net爱好者不容错过
盘点72个ASP.NET Core源码Net爱好者不容错过
80 0
|
3天前
|
开发框架 .NET
ASP.NET Core NET7 增加session的方法
ASP.NET Core NET7 增加session的方法
40 0
|
3天前
|
Go 开发者
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第24天】Go语言的`net/http`包在HTTP客户端编程中扮演重要角色,但使用时需注意几个常见问题:1) 检查HTTP状态码以确保请求成功;2) 记得关闭响应体以防止资源泄漏;3) 设置超时限制,避免长时间等待;4) 根据需求处理重定向。理解这些细节能提升HTTP客户端编程的效率和质量。
19 1
|
3天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0
|
3天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
32 0
|
3天前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
100 0
|
.NET 数据库 开发框架
asp.net学习之ado.net(无连接模式中的DataAdapter)
原文:asp.net学习之ado.net(无连接模式中的DataAdapter)     在非连接模式下,主要讨论以下对象:DataAdapter。     DataAdpater的作用是在物理存储模式的数据和内存之间进行数据传递。
970 0
|
SQL 存储 .NET
asp.net学习之ado.net(连接模式访问)
原文:asp.net学习之ado.net(连接模式访问)    ado.net框架支持两种模式的数据访问: 连接模式(Connected)和非连接模式(disconnected)。这一节介绍如何使用连接模式访问数据库中的数据,利用ADO.
1331 0
|
3天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
48 0
|
3天前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
122 5