Asp.Net Core 學習教程2、使用ASP.NET Core中的RazorPages
阿新 • • 發佈：2020-03-30
1、建立一個Asp.Net Core Web應用程式
1.1、開啟VS2019 新建專案
1.2、選好專案位置後進入選擇介面，選擇Web應用程式
1.3、進去的頁面結構如下
Pages 資料夾：包含 Razor 頁面和支援檔案。 每個 Razor 頁面都是一對檔案：
- 一個 .cshtml 檔案，其中包含使用 Razor 語法的 C＃ 程式碼的 HTML 標記 。
- 一個 .cshtml.cs 檔案，其中包含處理頁面事件的 C# 程式碼 。
wwwroot 資料夾：包含靜態檔案，如 HTML 檔案、JavaScript 檔案和 CSS 檔案。
appSettings.json：包含配置資料，如連線字串。
Program.cs：包含程式的入口點。
Startup.cs：包含配置應用行為的程式碼。
執行起來如果提示要安裝證書的直接點是就可以了，出現WelCome就表示可以了
2、新增模型
2.1、在這裡搭建“商品”模型的基架。 確切地說，基架工具將生成頁面，用於對“商品”模型執行建立、讀取、更新和刪除 (CRUD) 操作。
右擊專案名稱新增資料夾Models，在Models新資料夾裡新建一個模型類Shop
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace CoreRazorPages.Models
{
/// <summary>
/// 商品類
/// </summary>
public class Shop
{
[Display(Name="ID")]
public int ID { get; set; }
[Display(Name = "Guid")]
public string Guid { get; set; }
[Display(Name = "名稱")]
public string Name { get; set; }
[Display(Name = "價格")]
public decimal Price { get; set; }
[Display(Name = "新增日期")]
[DataType(DataType.Date)]
public DateTime AddTime { get; set; }
}
}3、新增基架
3.1、右擊Pages資料夾新增一個資料夾Shop，然後右擊Shop>新增>新搭建基架的專案>使用實體框架生成Razor頁面（CRUD）模型類選擇Shop，資料庫上下文點選右邊的+號
3.2、生成專案，如果報錯Shop就加上名稱空間，這裡是因為資料夾Shop名稱跟類名Shop一樣
專案資料夾多了個Data那是資料庫上下文，還有配置檔案裡面也加了資料庫訪問的字串在appsetting.json資料夾裡
3.3、更改資料庫連結
開啟appsettiong.json檔案修改裡面的資料庫連結字串，然後點工具>nuget包管理器>程式包管理控制檯依次輸入Add-Migration InitialCreate、Update-Database，警告不要管他（程式設計師不怕警告就怕錯誤 哈哈）
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
//原來生成的Server=(localdb)\\mssqllocaldb;Database=CoreRazorPagesContext-10c906a7-1959-4967-9659-0fcbfe8b7d16;Trusted_Connection=True;MultipleActiveResultSets=true
"CoreRazorPagesContext": "Data Source=伺服器地址;Initial Catalog=資料庫名User ID=使用者名稱;Password=密碼"
}
}
看生成的資料庫
3.4、修改資料夾Shared下的佈局_Layout.cchtml新增Shop導航
看起來有點像winform的伺服器控制元件一樣哈哈，asp-area是區域名，現在沒有 asp-page是指Razor的位置這裡是Shop/Index
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">CoreRazorPages</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="Shop/Index">商品</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
3.5、新增一些資料在Shop中，在Data檔案件下面新增一個類 AddDefaultData，然後修改程式入口main 方法。
從依賴關係注入容器獲取資料庫上下文例項>呼叫 InitData方法，並將上下文傳遞給它、方法完成時釋放上下文
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
//新增名稱空間
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using CoreRazorPages.Models;
namespace CoreRazorPages.Data
{
public class AddDefaultData
{
/// <summary>
/// 新增資料
/// </summary>
/// <param name="serviceProvider"></param>
public static void InitData(IServiceProvider serviceProvider)
{
using (var db = new CoreRazorPagesContext(serviceProvider.GetRequiredService<DbContextOptions<CoreRazorPagesContext>>()))
{
//如果有資料就不添加了
if (db.Shop.Any())
{
return;
}
//新增10條初始資料
for(var i=0;i<10;i++)
{
var model = new Shop
{
Name = "商品"+i.ToString(),
Guid = Guid.NewGuid().ToString("N"),
Price = i + 0.66M,
AddTime = DateTime.Now
};
db.Shop.AddRange(model);
}
db.SaveChanges();
}
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
//新增名稱空間
using Microsoft.Extensions.DependencyInjection;
using CoreRazorPages.Data;
namespace CoreRazorPages
{
public class Program
{
public static void Main(string[] args)
{
var host = CreateHostBuilder(args).Build();
using (var scope=host.Services.CreateScope())
{
var services = scope.ServiceProvider;
try
{
AddDefaultData.InitData(services);
}
catch (Exception ex)
{
var logger = services.GetRequiredService<ILogger<Program>>();
logger.LogError(ex, "新增初始資料失敗");
}
}
host.Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
資料庫依賴注入在staup.cs裡面已經自己生成好了
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
//資料庫連線
services.AddDbContext<CoreRazorPagesContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("CoreRazorPagesContext")));
}
然後啟動 點到商品導航上面資料就有了，也可以一些基本的操作（CRUD）
4、新增搜尋
新增名稱，guid的搜尋，在Pages資料夾下面的Shop資料夾下面的Index.cchtml.sc開啟 修改
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using CoreRazorPages.Data;
using CoreRazorPages.Models;
namespace CoreRazorPages.Pages.Shop
{
public class IndexModel : PageModel
{
private readonly CoreRazorPages.Data.CoreRazorPagesContext _context;
public IndexModel(CoreRazorPages.Data.CoreRazorPagesContext context)
{
_context = context;
}
/// <summary>
/// 模型List
/// </summary>
public IList<CoreRazorPages.Models.Shop> Shop { get;set; }
[BindProperty(SupportsGet = true)]
public string SearchName { get; set; }
[BindProperty(SupportsGet = true)]
public string SearchGuid { get; set; }
public async Task OnGetAsync()
{
var model = _context.Shop.Where(x=>x.ID>0);
if (!string.IsNullOrEmpty(SearchName))
model = model.Where(x => x.Name.Contains(SearchName));
if (!string.IsNullOrEmpty(SearchGuid))
model = model.Where(x => x.Guid.Contains(SearchGuid));
Shop = await model.ToListAsync();
}
}
}
在Index.cshtml裡面新增
<p>
<a asp-page="Create">Create New</a>
</p>
<form>
<p>
名字: <input type="text" asp-for="SearchName" />
Guid: <input type="text" asp-for="SearchGuid" />
<input type="submit" value="搜尋" />
</p>
</form>
SearchName 、SearchGuid：包含使用者在搜尋文字框中輸入的文字。 SearchString 也有 [BindProperty] 屬性。 [BindProperty] 會繫結名稱與屬性相同的表單值和查詢字串。 在 GET 請求中進行繫結需要 (SupportsGet = true)。
5、新增欄位，驗證
5.1在模型檔案Shop.cs新增一個欄位Remark
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace CoreRazorPages.Models
{
/// <summary>
/// 商品類
/// </summary>
public class Shop
{
[Display(Name="ID")]
public int ID { get; set; }
[Display(Name = "Guid")]
public string Guid { get; set; }
[Display(Name = "名稱")]
public string Name { get; set; }
[Display(Name = "價格")]
public decimal Price { get; set; }
[Display(Name = "新增日期")]
[DataType(DataType.Date)]
public DateTime AddTime { get; set; }
/// <summary>
/// 新加欄位、驗證
/// </summary>
[Required]//必填
[StringLength(10,ErrorMessage ="{0}最大長度10 必填")]//最大長度
[RegularExpression(@"^[A-Z]+[a-zA-Z""'\s-]*$")]//驗證格式
public string Ramake { get; set; }
}
}
5.2nuget包管理器>程式包管理控制檯依次輸入Add-Migration Remake、Update-Database，
5.3、編輯Shop資料夾下面的Index.cshtml、Create.cshtml、Delete.cshtml、Details.cshtml、Edit.cshtml檔案新增Remake欄位
<td>
@Html.DisplayFor(modelItem => item.Ramake)
</td>
<div class="form-group">
<label asp-for="Shop.Ramake" class="control-label"></label>
<input asp-for="Shop.Ramake" class="form-control" />
<span asp-validation-for="Shop.Ramake" class="text-danger"></span>
</div>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Shop.Ramake)
</dd>
<div class="form-group">
<label asp-for="Shop.Ramake" class="control-label"></label>
<input asp-for="Shop.Ramake" class="form-control" />
<span asp-validation-for="Shop.Ramake" class="text-danger"></span>
</div>
5.4、執行起來測試看
6、程式碼總結：
- Razor 頁面派生自 PageModel。 按照約定，PageModel 派生的類稱為 <PageName>Model。 此建構函式使用依賴關係注入將 RazorPagesMovieContext 新增到頁。 所有已搭建基架的頁面都遵循此模式，對頁面發出請求時，OnGetAsync 方法向 Razor 頁面返回影片列表。 呼叫 OnGetAsync 或 OnGet 以初始化頁面的狀態。 在這種情況下，OnGetAsync 將獲得影片列表並顯示出來。
當 OnGet 返回 void 或 OnGetAsync 返回 Task 時，不使用任何返回語句。 當返回型別是 IActionResult 或 Task<IActionResult> 時，必須提供返回語句
-
@page 指令：@page Razor 指令將檔案轉換為一個 MVC 操作，這意味著它可以處理請求。 @page 必須是頁面上的第一個 Razor 指令。 @page 是轉換到 Razor 特定標記的一個示例
- @model 指令指定傳遞給 Razor 頁面的模型型別。 在前面的示例中，@model 行使 PageModel 派生的類可用於 Razor 頁面。 在頁面上的 @Html.DisplayNameFor 和 @Html.DisplayFor HTML 幫助程式中使用該模型。
現在開始對Razor頁面有一定了解，大多數程式碼都是系統自己生成的，資料庫上下文類、依賴注入、我也是對Core還不怎麼熟悉不知道怎麼學習跟著做就行了，對後面肯定有很大的幫助。
原文地址：https://www.cnblogs.com/w5942066/p/12597712.html