asp.net core 系列 3 項目實戰之：NetCore 的 Web 應用程序（參考自：Microsoft教程）

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

概述：此教程介紹了生成 Razor Pages Web 應用的基礎知識。具體分為如下部分

1. 創建 Razor 頁面 Web 應用
2. 向 Razor 頁面應用添加模型
3. 基架（生成）Razor 頁面
4. 使用數據庫
5. 更新 Razor 頁面
6. 添加搜索
7. 添加新字段
8. 添加驗證

首先，我們啟用VS新建一個項目：

本篇主要是學習使用NetCore的Razor視圖，因此先從最基本的添加項目開始。添加項目完成后，我們發現系統自動生成了以下各項，如下圖：

 

 

 首先我們對項目各文件的執行順序作個說明：

 

 

 與早期版本的 ASP.NET 對比，最顯著的變化之一就是配置應用程序的方式， Global.asax、FilterConfig.cs 和 RouteConfig.cs 統統消失了，取而代之的是 Program.cs 和 Startup.cs。Program.cs 作為 Web 應用程序的默認入口，不做任何修改的情況下，會調用同目錄下 Startup.cs 中的 ConfigureServices 方法 和 Configure 方法，最后執行Request Handle Start（個人認為就是路由指向的文件） ，譬如：https://localhost:44392/Movies/Details?id=4  執行的是上圖Pages文件夾中的Movies文件夾中的Details.cshtml文件，其路由機制和MVC類似。

其次，一起探討下各個文件夾/文件的作用：

Pages文件夾

1、模板文件，

例如：__Layout.cshtml，一般都放在Pages/Shared文件夾中，_Layout.cshtml 文件可配置所有頁面通用的 UI 元素 。 此文件設置頁面頂部的導航菜單和頁面底部的版權聲明。

2、自定義的Razor頁面

注意：自定義的Razor頁面比模板頁面會多出一個CS文件，這一點和.Net MVC中的CsHtml頁面不一樣，這個CS文件我們可以理解為頁面的ViewModel，用於初始化頁面及頁面業務邏輯的相關操作，譬如：增刪改查。

wwwroot 文件夾

包含靜態文件，如 HTML 文件、JavaScript 文件和 CSS 文件。 有關詳細信息，請參閱 ASP.NET Core 中的靜態文件。

appSettings.json

包含配置數據，如連接字符串。 有關詳細信息，請參閱 ASP.NET Core 中的配置。

Program.cs

包含程序的入口點。 有關詳細信息，請參閱 .NET 通用主機。

Startup.cs

包含配置應用行為的代碼。 有關詳細信息，請參閱 ASP.NET Core 中的應用啟動。

文件的簡單介紹到此為止，下面我們來添加項目相關准備

1、新建一個數據庫，命名為：MovieDB

2、創建一張表，命名為：Movie

腳本如下：

create table Movie
(
ID int identity(1,1) primary key,
Title nvarchar(200),
ReleaseDate datetime,
Genre varchar(200),
Price decimal(18,2)
)

數據庫創建完畢，我們插入一條數據：

  insert into [MovieDB].[dbo].[Movie]
  values('戰狼2',getdate(),'影視媒體',18)

至此，數據准備完畢，下面我們創建數據庫鏈接字符串，打開appsettings.json文件，編輯如下：

新增鏈接字符串：

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "RazorPagesMovieContext": "Data Source=DESKTOP-VD79APR\\SQLEXPRESS;Initial Catalog=MovieDB;Integrated Security=True"
  }
}

 注意上述鏈接字符串中的 RazorPagesMovieContext ，這是一個數據訪問上下文，用於數據庫對象（數據表）構建及數據訪問，我們可以通過VS創建，下面會逐步介紹，現在我們需要准備和數據表對應的實體類Movie，如下：

在項目中添加DataModel文件夾，並添加類：Movie.cs 【類的屬性和數據表字段對應，並添加了相關數據驗證】，如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesMovie2.DataModel
{
    public class Movie
    {
        public int ID { get; set; }

        [StringLength(60, MinimumLength = 3)]
        [Required]
        public string Title { get; set; }

        /// <summary>
        /// 發布日期，Display：展示類型 DataType：數據類型 日期類型
        /// </summary>
        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }

       /// <summary>
       /// 價格 范圍1~100 貨幣類型 數字類型
       /// </summary>
        [Range(1, 100)]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18, 2)")]
        public decimal Price { get; set; }

        /// <summary>
        /// 正則表達式 最大長度30  必填信息
        /// </summary>
        [RegularExpression(@"^[A-Z]+[a-zA-Z""'\s-]*$")]
        [Required]
        [StringLength(30)]
        public string Genre { get; set; }
    }
}

上述准備完畢后，我們利用VS強大的數據模型綁定來構建增刪改查頁面，如下：

在Pages文件夾中新建文件夾MoviePages，如下：

 

 右鍵MoviePages文件夾，選擇：添加->新搭建基架的項目(F)...，用於創建增刪改查頁面及生成RazorPagesMovieContext數據庫上下文訪問類，如下：

 

需要將默認的:RazorPagesMovie2.Models.RazorPagesMovie2Context 修改為：RazorPagesMovie2.Data.RazorPagesMovie2Context ，以便生產一個名為Data的文件夾，用於區分Models文件夾。

 

 

 這是會生產一個Data的文件夾，有一個類，名稱為：RazorPagesMovie2Context ，也就是上述提到的數據庫訪問上下文類，用於數據庫訪問及數據庫對象構建。

如下：

 

 代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie2.DataModel;

namespace RazorPagesMovie2.Data
{
    public class RazorPagesMovie2Context : DbContext
    {
        public RazorPagesMovie2Context (DbContextOptions<RazorPagesMovie2Context> options)
            : base(options)
        {
        }

        public DbSet<RazorPagesMovie2.DataModel.Movie> Movie { get; set; }
    }
}

同時在StartUp.cs中也會指定數據庫訪問鏈接字符串，如下：

 

注意：StartUp.cs 中的上下文名稱應和appsettings.json 中的名稱一致，如果不一致，會導致找不到鏈接字符串。

 此時，項目基本構建完成，運行如下：

 

 由上圖可以，我們根據VS基架模板來生成的增刪改查頁面對應的.CS文件中有生成相應的增刪改查代碼，如下：

前端：

@page
@model RazorPagesMovie2.Pages.MoviePages.IndexModel

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Price)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Genre)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Movie) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

查詢代碼：

    public class IndexModel : PageModel
    {
        private readonly RazorPagesMovie2.Data.RazorPagesMovie2Context _context;

        public IndexModel(RazorPagesMovie2.Data.RazorPagesMovie2Context context)
        {
            _context = context;
        }

        public IList<Movie> Movie { get;set; }

        public async Task OnGetAsync()
        {
            Movie = await _context.Movie.ToListAsync();
        }
    }

查詢表中所有數據，當然，在EF NETCore中也支持Linq查詢，如下：

public async Task OnGetAsync()
{
    var movies = from m in _context.Movie
                 select m;
    if (!string.IsNullOrEmpty(SearchString))
    {
        movies = movies.Where(s => s.Title.Contains(SearchString));
    }

    Movie = await movies.ToListAsync();
}

增加頁面代碼如下：

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 RazorPagesMovie2.Data;
using RazorPagesMovie2.DataModel;

namespace RazorPagesMovie2.Pages.MoviePages
{
    public class CreateModel : PageModel
    {
        private readonly RazorPagesMovie2.Data.RazorPagesMovie2Context _context;

        public CreateModel(RazorPagesMovie2.Data.RazorPagesMovie2Context context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        [BindProperty]
        public Movie Movie { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Movie.Add(Movie);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }
    }
}

看到：await _context.SaveChangesAsync();是不是很熟悉，.SaveChanges其實就是EF增加刪除更新的最常用方法，呵呵。

前端：

@page
@model RazorPagesMovie2.Pages.MoviePages.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Movie</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="Movie.Title" class="control-label"></label>
                <input asp-for="Movie.Title" class="form-control" />
                <span asp-validation-for="Movie.Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.ReleaseDate" class="control-label"></label>
                <input asp-for="Movie.ReleaseDate" class="form-control" />
                <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Price" class="control-label"></label>
                <input asp-for="Movie.Price" class="form-control" />
                <span asp-validation-for="Movie.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Movie.Genre" class="control-label"></label>
                <input asp-for="Movie.Genre" class="form-control" />
                <span asp-validation-for="Movie.Genre" 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");}
}

 就不一一展示了，大家可參考自己的項目進行學習

參考來自：https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/?view=aspnetcore-3.1

@天才卧龍的博客