基於ASP.NET Core 3.0快速搭建Razor Pages Web應用

本文轉載自查看原文 2019-12-08 23:00 1067 DotCore/C#

前言

雖然說學習新的開發框架是一項巨大的投資，但是作為一個開發人員，不斷學習新的技術並快速上手是我們應該掌握的技能，甚至是一個.NET Framework開發人員，學習.NET Core 新框架可以更快速掌握其中的編寫，構建，測試，部署和維護應用程序。

您現有的.NET Framework應用程序可以在其他操作系統上工作。對於希望擴大類庫的受眾平台，或者希望在分布式應用程序的其他領域使用相同代碼的開發人員來說，這是非常好的選擇。

.NET Core是為了重新啟動某些Framework組件而為其他人提供跨平台工作的機會。由於.NET Framework主要以托管（C＃）代碼為基礎構建，因此這些部分不需要更改代碼即可移至.NET Core。依賴於Windows特定組件的庫必須被移除或重構以使用跨平台替代方案。這同樣適用於您的應用程序。

選擇學習.NET Core,是因為有強大的多功能性：

加上微軟社區的大量工作，使.Net Core成為市場上具有競爭力的框架，幫助開發人員快速開發具有最佳性能和可擴展性的強大應用程序。

在本章，我們將介紹生成 ASP.NET Core Razor Pages Web 應用的基礎知識，基於ASP.NET Core應用程序中的Razor視圖引擎，快速的搭建一個博主的管理系統應用，並且在后續中，我們可以基於這個模板進行快速開發迭代。

工具

本文基於以下開發工具和程序包：

1.VS2019

包含 ASP.NET Web開發功能模塊

2. .NET Core SDK 3.0版本

開始

一、創建新的 ASP.NET Core Web 應用程序

1. 下一步：

2.將項目命名為“BlogRazor” 。

3.選擇ASP.NET Core3.0 , 然后依次選擇“Web 應用程序”和“創建”

4.項目初建成功：

二、添加模型

1.添加數據模型

創建新文件夾Models,在此文件夾下右鍵選擇“添加” > “類” ，創建BloggerModel類

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

namespace BlogRazor.Models
{
    public class BloggerModel
    {
        public int ID { get; set; }

        public string Name { get; set; }
        public string Sex { get; set; }
        public string Sign { get; set; }
        [DataType(DataType.Date)]
        public DateTime RegistDate { get; set; }
    }
}

2. 添加模型基架

創建“Pages/Blogger”文件夾——在Blogger文件夾右鍵選擇添加新搭建基架的項目

3. 在“添加基架”對話框中，選擇“使用實體框架生成 Razor Pages (CRUD)”>“添加” 。

4 .完成“使用實體框架(CRUD)添加 Razor Pages”對話框：

在“模型類”下拉列表中，選擇“BloggerModel (BlogRazor.Models) 。
在“數據上下文類”行中，選擇 +（加號）並將生成的名稱從 BlogRazor.Models .BlogRazorContext 更改為 BlogRazor.Data .Data.Context 。它創建具有正確命名空間的數據庫上下文類。
選擇“添加” 。

4. 開始創建文件，在搭建基架時，會創建並更新以下文件

Pages/Blogger：“創建”、“刪除”、“詳細信息”、“編輯”和“索引”。
Data/BlogRazorContext.cs

5 . 數據初始遷移

通過程序包管理器控制台 (PMC) ：

Add-Migration InitialCreate
Update-Database

三、測試應用

說明

一、增刪查改頁面

這里已Blogger/Index.cshtml Razor頁面為例

@page
@model BlogRazor.Pages.Blogger.IndexModel

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

<h1>Index</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.BloggerModel[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BloggerModel[0].Sex)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BloggerModel[0].Sign)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.BloggerModel[0].RegistDate)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.BloggerModel) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sex)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sign)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RegistDate)
            </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 BlogRazor.Models.Data.Context _context;

        public IndexModel(BlogRazor.Models.Data.Context context)
        {
            _context = context;
        }

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

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

Razor 可以從 HTML 轉換為 C# 或 Razor 特定標記。當 @ 符號后跟 Razor 保留關鍵字時，它會轉換為 Razor 特定標記，否則會轉換為 C#。

@page 指令

@page Razor 指令將文件轉換為一個 MVC 操作，這意味着它可以處理請求。 @page 必須是頁面上的第一個 Razor 指令。 @page 是轉換到 Razor 特定標記的一個示例。

@model 指令

@model 指令指定傳遞給 Razor 頁面的模型類型。在前面的示例中，@model 行使 PageModel 派生的類可用於 Razor 頁面。

@model BlogRazor.Pages.Blogger.IndexModel

ViewData 和布局

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

上面的代碼就是 Razor 代碼轉換為 C# 的一個示例。大括號“{ }” 字符括住 C# 代碼塊。

PageModel 基類具有 ViewData 字典屬性，可用於添加要傳遞到某個視圖的數據。可以使用鍵/值模式將對象添加到 ViewData 字典。在上面的示例中，“Title”屬性被添加到 ViewData 字典中。 “Title”屬性的在 Pages/_Layout.cshtml 文件中使用。

"Title" 屬性用於 Pages/Shared/_Layout.cshtml 文件。以下標記顯示 _Layout.cshtml 文件的前幾行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - BlogRazor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

更新布局

1.更改 Pages/Shared/_Layout.cshtml 文件中的 <title> 元素以顯示博主管理系統而不是 BlogRazor。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 博主管理系統</title>