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

時間 2019-12-09

標籤基於 asp.net asp core 3.0 快速搭建 razor pages web 應用欄目 ASP 简体版

原文原文鏈接

前言

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

您現有的.NET Framework應用程序能夠在其餘操做系統上工做。對於但願擴大類庫的受衆平臺，或者但願在分佈式應用程序的其餘領域使用相同代碼的開發人員來講，這是很是好的選擇。html

.NET Core是爲了從新啓動某些Framework組件而爲其餘人提供跨平臺工做的機會。因爲.NET Framework主要以託管（C＃）代碼爲基礎構建，所以這些部分不須要更改代碼便可移至.NET Core。依賴於Windows特定組件的庫必須被移除或重構以使用跨平臺替代方案。這一樣適用於您的應用程序。數據庫

選擇學習.NET Core,是由於有強大的多功能性：bootstrap

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

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

工具

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

1.VS2019分佈式

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

2. .NET Core SDK 3.0版本佈局

開始

1、建立新的 ASP.NET Core Web 應用程序

1. 下一步：

2.將項目命名爲「BlogRazor」。

3.選擇ASP.NET Core3.0 , 而後依次選擇「Web 應用程序」和「建立」

4.項目初建成功：

2、添加模型

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

3、測試應用

說明

1、增刪查改頁面

這裏已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>