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

来源:https://www.cnblogs.com/i3yuan/archive/2019/12/08/12003512.html
-Advertisement-
Play Games

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


前言

 雖然說學習新的開發框架是一項巨大的投資,但是作為一個開發人員,不斷學習新的技術並快速上手是我們應該掌握的技能,甚至是一個.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>

2. asp-page="/Blogger/Index" 標記幫助程式屬性和值可以創建指向 /Blogger/Index Razor 頁面的鏈接。 asp-area 屬性值為空,因此在鏈接中未使用區域。

 

二、使用資料庫

 LocalDB 是輕型版的 SQL Server Express 資料庫引擎,以程式開發為目標。

 

 通過資料庫管理器,我們可以查看創建的資料庫和資料庫表

 

 

預設情況下,LocalDB 資料庫在 C:\Users\<user>\ 目錄下創建 *.mdf 文件。(右鍵查看資料庫 屬性,根據連接參數下的數據文件找到對應的文件目錄)

總結

 1.參考文檔 ASP.NET Core Web應用程式開發

2.Razor易於使用,易於學習,並且可以在Visual Studio等工具中使用,快速搭建基本的應用程式。  
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 題目要求: 分析文件’課程成績.xlsx’,至少要完成內容:分析1)每年不同班級平均成績情況、2)不同年份總體平均成績情況、3)不同性別學生成績情況,並分別用合適的圖表展示出三個內容的分析結果。 廢話不多,直接上代碼 1每年不同班級平均成績情況: # 導入xlrd模塊import xlrdfrom ...
  • 前言本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。作者:weixin_45189038直接上知識點: 1. 註釋 單行註釋:在一行文字前面加#(快捷鍵:ctrl+/) 多行註釋:將註釋內容寫在三個英文雙引號或者單引號裡面(但是一 ...
  • 這個問題,是python與Pycharm不相容導致,解決辦法將Pycharm升級最新版本 ...
  • Shiro是一個功能強大且易於使用的Java安全框架,主要功能有身份驗證、授權、加密和會話管理,本文實現一個簡單的身份驗證例子。 ...
  • 人生從來沒有固定的路線,決定你能夠走多遠的,並不是年齡,而是你的努力程度。無論到了什麼時候,只要你還有心情對著糟糕的生活揮拳宣戰,都不算太晚。遲做,總比不做好! ...
  • # 集美大學各省錄取分數分析(學號尾數為2,3同學完成) # 分析文件‘集美大學各省錄取分數.xlsx’,完成: # 1)集美大學2015-2018年間不同省份在本一批的平均分數,柱狀圖展示排名前10的省份, # 2)分析福建省這3年各批次成績情況,使用折線圖展示結果,並預測2019年錄取成績(數據... ...
  • 本文中 $n$ 代表著待排序序列的長度。 演算法是否穩定:若 $a_i = a_j \ , \ i 1; merge(l,mid),merge(mid+1,r); mergesort(l,r,mid);return;//遞歸,先給小區間排序後大區間。 } merge(1,n); 上張圖理解一下: 可用 ...
  • 前一陣子在寫 CPU,導致一直沒有什麼時間去做其他的事情,現在好不容易做完閑下來了,我又可以水文章了哈哈哈哈哈。 有關 FP 的類型部分我打算放到明年再講,因為現有的 C# 雖然有一個 pattern matching expressions,但是沒有 discriminated unions 和  ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...