ASP.NET Core 中的 Razor Pages

Razor Pages

Razor Pages 是基于页面的 ASP.NET Core Web App 架构。

相比 MVC 模式,Razor Pages的生产效率更快。

Razer Pages 需要两个中间件:

  • builder...Services.AddRazorPages 添加 Razor Pages services
  • app.MapRazorPages 添加 Razor Pages endpoints

.cshtml 与 .cshtml.cs

在最简单的页面中:

html 复制代码
@page
<h1>Hello, world!</h1>
<h2>The time on the server is @DateTime.Now</h2>

看起来与 MVC 的页面差不多,但特别之处是有一个 @page 指令,@page 指令意味着这个页面可以直接接收 http request,而不需要通过 controller。

第2个页面Pages/Index2.cshtml 的代码是这样的:

html 复制代码
@page
@using RazorPagesIntro.Pages
@model Index2Model

<h2>Separate page model</h2>
<p>
    @Model.Message
</p>

使用了 @using RazorPagesIntro.Pages 指令,

而RazorPagesIntro.Pages的实现代码Pages/Index2.cshtml.cs是这样的:

csharp 复制代码
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System;

namespace RazorPagesIntro.Pages
{
    public class Index2Model : PageModel
    {
        public string Message { get; private set; } = "PageModel in C#";
        public void OnGet()
        {
            Message += $" Server time is { DateTime.Now }";
        }
    }
}

一个Index2.cshtml 页面,搭配一个Index2.cshtml.cs,类似WPF 中的 xaml与 xaml.cs。

URL Path 路由

url 的 Path 与页面的 path 相匹配。比如:

  • / or /Index 匹配 /Pages/Index.cshtml
  • /Contact 匹配 /Pages/Contact.cshtml
  • /Store/Contact 匹配 /Pages/Store/Contact.cshtml

一个 Post 例子

有一个Pages/Customers/Create.cshtml 的 view 页面,代码如下:

@model 指令中的CreateModel 对应一个名为 Create 的 Model,

而 Form 的 submit 会发生 Http Post,

html 复制代码
@page
@model RazorPagesContacts.Pages.Customers.CreateModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<p>Enter a customer name:</p>

<form method="post">
    Name:
    <input asp-for="Customer!.Name" />
    <input type="submit" />
</form>

相应的Pages/Customers/Create.cshtml.cs 的代码中的部分如下:

OnPostAsync 处理 cshtml 中的 form submit,

一般还会有一个OnGet方法处理Http Get 请求。

RedirectToPage 方法会重定向到 ./Index 路径。

BindProperty\] 注解属性是表示model binding。 Razor Pages 中的BindProperty 一般用于非 GET 的属性。 ```csharp [BindProperty] public Customer? Customer { get; set; } public async Task OnPostAsync() { if (!ModelState.IsValid) { return Page(); } if (Customer != null) _context.Customer.Add(Customer); return RedirectToPage("./Index"); } ``` ### Home Page 的例子 Index.cshtml ```html @page @model RazorPagesContacts.Pages.Customers.IndexModel @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Contacts home page

@if (Model.Customers != null) { foreach (var contact in Model.Customers) { } }
ID Name
@contact.Id @contact.Name Edit |
Create New
``` 其中的 ```html Edit | ``` 使用asp-route-id 生成指向Edit页面的URL,URL 中包含 Contact id,比如: https://localhost:5001/Edit/1 而delete方法的html ```html ``` 由 server 生成后的html是: ```html ``` 对应的 Model 的代码Index.cshtml.cs: ```csharp public class IndexModel : PageModel { private readonly Data.CustomerDbContext _context; public IndexModel(Data.CustomerDbContext context) { _context = context; } public IList? Customers { get; set; } public async Task OnGetAsync() { Customers = await _context.Customer.ToListAsync(); } public async Task OnPostDeleteAsync(int id) { var contact = await _context.Customer.FindAsync(id); if (contact != null) { _context.Customer.Remove(contact); await _context.SaveChangesAsync(); } return RedirectToPage(); } } ``` ### 使用Layouts,Partial,模板和Tag Helpers 待更新 ### URL Generation 待更新 ### ViewData 属性 待更新 ### TempData 属性 待更新

相关推荐
Ray663 分钟前
「阅读笔记」elasticSearch 是什么?工作原理是怎么样的?
后端
paopaokaka_luck5 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
蓝倾17 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
德育处主任17 分钟前
Amazon CloudFront CDN加速实践指南
后端
平平无奇的开发仔18 分钟前
JPA 中 @EmbeddedId 和 @IdClass 的区别与实现详解
后端
iOS开发上架哦20 分钟前
全面解析iOS加固工具:功能差异、应用场景与实战选择建议
后端
jack_yin20 分钟前
GOLANG 可以这样用 MCP Server!
后端
GeekAGI21 分钟前
如何进行 Python 虚拟环境管理
后端
数新网络22 分钟前
Hive MetaStore的实现和优化
后端
掘金安东尼29 分钟前
革新Web部署:Amazon Amplify Hosting!
后端·面试·github