ASP.NET Core 3.x 学习笔记（5）——Razor Page

原创 已于 2025-02-13 20:43:15 修改 · 787 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#.net

于 2020-11-23 21:27:18 首次发布
本文介绍了如何在ASP.NET Core 3.x项目中切换到RazorPage架构，讲解了路由、母版页设置、部门列表示例及添加功能的实现，展示了RazorPage如何结合数据、HTML/Razor和逻辑。

本系列学习笔记均来源于B站UP主”软件工艺师“的学习视频，学习连接如下：

https://www.bilibili.com/video/BV1c441167KQ

ASP.NET Core 3.x 学习笔记（5）——Razor Page

Razor Page

  • MVC，实现如下三个分层：
    • Model：数据
    • View：HTML、Razor、TagHelpers
    • Controllers：逻辑
  • Razor Page，将下列三个部分同意：
    • 数据
    • Html、Razor、TagHelpers
    • 逻辑

Razor Page 路由

在 Razor Page 中，默认视图页面在 Pages 文件夹中，路由可省略为如下格式。

  • /Pages/Index.cshtml
    • /
    • /Index
  • /Pages/Department.cshtml
    • /Department
  • /Pages/Department/EmployeeList.cshtml
    • /Department/EmployeeList
  • /Pages/Department/Index.cshtml
    • /Department
    • /Department/Index

在前文中的 MVC 项目上简单更改成 Razor Page

本例直接复制 MVC 中的 Models、Services、css等即可，这部分代码没有任何改变，但是不需要 Controller 和 Views。在 Razor Page 中，基本是可以理解为，将 View 和 Controller 结合在 Pages 中。具体代码如下：

  1. Startup.cs 稍有变动，需要添加 RazorPage 使用的东西

    using ASPNETCore_Learning_ThreePage.Services;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ASPNETCore_Learning_ThreePage
{
    public class Startup
    {
        private readonly IConfiguration _configuration; //存储配置信息的键值对

        public Startup(IConfiguration configuration)
        {
            this._configuration = configuration;
        }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();  //添加 RazorPage 使用的东西

            services.AddSingleton<IDepartmentService, DepartmentService>();
            services.AddSingleton<IEmployeeService, EmployeeService>();

        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();
            app.UseHttpMethodOverride();
            app.UseAuthentication();
            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();  //更改为 Razor Page
            });
        }
    }
}

  2. 建立母版页：建立方式与 MVC 基本一致，通过“Shared/_Layout.cshtml”、“_ViewStart.cshtml”设置，但在视图导入（_ViewImpotr.cshtml）中存在一定区别，如下：需要添加 @namespace ASPNETCore_Learning_ThreePage.Pages

    @namespace ASPNETCore_Learning_ThreePage.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

  3. 建立 Razor Page 页面

Pages

Pages 即为 MVC 中 View 与 Controller 的结合。下面通过建立三个不同的页面，展示不同情况下 Razor Page 的使用。

  1. 建立 Department 列表页面的“Razor 视图”

    @page
@using ASPNETCore_Learning_ThreePage.Services

@inject IDepartmentService departmentService

<div class="row">
    <div class="col-md-10 offset-md-2">
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Employee</th>
                <th>操作</th>
            </tr>
            @Html.DisplayFor(x => x.Departments)
        </table>
    </div>
</div>
<div class="row">
    <div class="com-md-4">
        <a asp-page="Department/AddDepartment">Add</a>
    </div>
</div>

@*C#代码处理请求*@
@functions
{
    public IEnumerable<ASPNETCore_Learning_ThreePage.Models.Department> Departments { get; set; }

    //get 请求在此处理
    public async Task OnGetAsync()
    {
        Departments = await departmentService.GetAll();
    }
}
    • 视图中默认要添加 @page，其它与 MVC 中的 Razor 基本一致使用
    • 处理请求的 C# 逻辑代码写在 @functions 代码块中
    • 请求方法页有统一的约定，如 OnGetAsync、OnGet、OnPostAsync

  2. 使用”Razor 页面“建立页面。创建后，除 .cshtml 文件外，还有 .cshtml.cs 文件。如下：

在这里插入图片描述

其中 .cshtml 文件进行页面展示， .cshtml.cs 文件进行逻辑处理，如下：

  • 使用 ”[BindProperty]“ 绑定页面属性，使代码中不需要再另外处理 GET 请求；页面直接通过 “Department(对象).Name(属性)”可以直接获取绑定值
  • 处理 Post 请求的代码基本和 MVC 中一致

AddDepartmentModel.cshtml.cs

using System.Threading.Tasks;
using ASPNETCore_Learning_ThreePage.Services;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ASPNETCore_Learning_ThreePage.Pages.Department
{
    public class AddDepartmentModel : PageModel
    {
        private readonly IDepartmentService _departmentService;

        //通过BindProperty直接绑定，不需要另外处理 Get 请求
        [BindProperty]
        public ASPNETCore_Learning_ThreePage.Models.Department Department { get; set; }

        public AddDepartmentModel(IDepartmentService departmentService)
        {
            _departmentService = departmentService;
        }

        //需要处理 Post 请求
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                //不合法直接返回当前页面，重新填写
                return Page();
            }

            await _departmentService.Add(Department);
            return RedirectToPage("/Index");
            //return RedirectToPage("Index");  //会返回当前目录下的 Index 页面，即Department文件夹下的Index页面

        }
    }
}

AddDepartmentModel.cshtml

@page
@model ASPNETCore_Learning_ThreePage.Pages.Department.AddDepartmentModel
<form asp-action="Add">
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="Department.Name"></label>
        </div>
        <div class="col-md-6">
            <input class="form-control" asp-for="Department.Name" />
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="Department.Location"></label>
        </div>
        <div class="col-md-6">
            <input class="form-control" asp-for="Department.Location" />
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-2 offset-md-2">
            <label asp-for="Department.EmployeeCount"></label>
        </div>
        <div class="col-md-6">
            <input class="form-control" asp-for="Department.EmployeeCount" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 offset-md-2">
            <button type="submit" class="btn btn-primary">Add</button>
        </div>
    </div>
</form>

  1. 建立 “Razor 视图”，在视图中使用 @page 传递参数。如下：

    @page "{departmentId:int}"

@using Microsoft.AspNetCore.Mvc.RazorPages
@using ASPNETCore_Learning_ThreePage.Services 
@using ASPNETCore_Learning_ThreePage.Models

@model EmployeeListModel

<div class="row">
    <div class="col-md-10 offset-md-2">
        <table class="table">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Is Fired</th>
                <th>操作</th>
            </tr>
            @Html.DisplayFor(x => x.Employees)
        </table>
    </div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-2">
        <a asp-action="Add" asp-route-departmentID="@ViewBag.DepartmentId">Add</a>
    </div>
</div> 

@functions{ 
    public class EmployeeListModel : PageModel
    {
        private readonly IEmployeeService _employeeService;

        public EmployeeListModel(IEmployeeService employeeService)
        {
            _employeeService = employeeService;
        }

        public IEnumerable<Employee> Employees { get; set; }

        public async Task OnGet(int departmentId)
        {
            Employees = await _employeeService.GetByDepartmentId(departmentId);
            ViewData["DepartmentId"] = departmentId;
        }
    }
}

    注意：

    • 逻辑代码要放在 @functions 中，否则编译会报错

通过杨老师的课程，对 Razor Page 的认知懵懵懂懂，后续找时间阅读 MSDN 补充笔记。

[Asp.Net Core]MVC开发&解读Razor混编
德仔
11-20 941
MVC开发 1.什么是MVC？ V-视图------呈现给用户看到的内容（表现层） C-控制器----控制业务逻辑计算，调用服务，选择返回什么内容，可以返回视图，JSON,字符串等等 M-视图模型—用作控制器和视图之间传递数据的载体 2.修改视图，增加了Html代码，不能马上生效，那么办？必须要编译后方可生效的问题，如何解决？ #region 解决修改视图内容，必须编译后方可生效的问题 //1.Nuget安装：Microsoft.AspNetCore.Mvc.
ASP.NET Core Web Razor Pages系列教程一：使用ASP.NET Core 创建一个Razor Pages网络应用程序
个人博客
06-08 1687
ASP.NET Core 系列教程一：使用ASP.NET Core 创建一个Razor Pages网络应用程序 未完待续
RazorPage介绍(一)
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
09-23 3065
什么是RazorPage 我们都知道在Asp.Net MVC中，Razor是其一种视图引擎。而今天我们介绍的Razor Page却是一种web框架，它是一种简化的MVC框架，如果你曾经做过WebForm的开发者，你会发现，Razor Page有点类似Web Form，一个page，一个class。 大家或许会有疑惑，我们现在Asp.Net MVC已经很完善了，为何还需要出来一种新型的框架呢？在我看来，MVC确实已经足够强大了，只是因为太强大了，却变成了它的缺点。当我们的业务越来越庞大的时候，你是否觉得你的一
.NET Core 学习第一天：Razor Pages应用介绍及目录结构
最新发布
van的博客
12-04 620
放置网站的静态文件的目录，在这里放所有的静态文件，如图像，css文件，js文件等，以及静态HTML文件等。lauchSettings.json文件，配置VS在什么时候做什么，也可以项目上右键 --> 属性-->Debug来设置。Razor Pages和我们的WebForm是不一样的，这是全新的重写，完全不同的格式。_ViewImports文件，引入命名空间，有全局作用域，如果自己创建了标签助手也可以在这里引入。--> 默认配置不更改 -->创建 --> 生成项目。--> 编辑项目名称 -->
ASP.NET Core教程【一】关于Razor Page的知识
weixin_34358092的博客
11-24 537
关键文件和目录结构 按照asp.net core WEB应用程序向导，创建一个工程之后 你会发现如下几个目录和文件 wwwroot：放置网站的静态文件的目录 Pages：放置razor页面的目录 appsettings.json：是应用的配置文件 bower.json：静态资源包管理的配置文件 Program.cs：这个程序负责承载ASP.NET Core应用 Startup.cs：初始化ser...
ASP.NET Core应用程序6：Razor Pages
噢~
05-11 1123
  Razor Pages是生成Html响应的一种简化方式。它的简单性，意味着能够比MVC框架更快获得结果。它将单个视图与一个类关联起来，由该类为视图提供功能，并使用基于文件的路由系统来匹配URL。它的灵活性不如MVC，所以不适合复杂的应用程序。 1 准备工作 2 理解Razor Pages   Razor Pages和MVC并不是二选一的情况，是可以共存的，Razor Pages以牺牲灵活性来...
ASP.NET Core.pdf.pdf
12-10
ASP.NET Core是微软开发的一个开源、跨平台的框架，用于构建高性能、现代的web应用程序。这个框架结合了.NET Core和ASP...无论是初学者还是经验丰富的开发者，都能在ASP.NET Core的文档和教程中找到丰富的学习资源。
精选资源
【ASP.NET编程知识】如何ASP.NET Core Razor中处理Ajax请求.docx
05-21
ASP.NET Core Razor 中处理 Ajax 请求 ASP.NET Core Razor 中处理 Ajax 请求是 ASP.NET Core 的一项新功能，可以使编程方案更简单，更高效。RazorPages 使用处理程序方法来处理传入的 HTTP 请求（GET / POST / PUT ...
【ASP.NET编程知识】Amazing ASP.NET Core 2.0.docx
05-15
ASP.NET Core 2.0 是一个重要的更新，它在 ASP.NET Core 1.0 的基础上引入了许多改进和新特性，旨在提升开发效率和应用程序性能。本文将深入探讨 ASP.NET Core 2.0 的核心变化，包括SDK的更新、项目文件的变更以及...
精选资源
ASP.Net Core 5.0官方文档.pdf
07-31
ASP.NET core 5.0文档PDF(含目录，共5453页)。摘要： ASP.NET Core 文档及新增内容 ASP.NET 比较 .NET Core 和 .NET Framework 入门新增功能 5.0 版中的新增功能 3.1/3.0/2.2/2.1/2.0/1.1 版中的新增功能 教程Web ...
ASP.NET Core 3.1中文教程.pdf
08-12
* Razor Pages：ASP.NET Core 的 Razor Pages 框架，提供了一个简单的 Web 应用程序开发体验。 * MVC：ASP.NET Core 的 MVC 框架，提供了一个强大的 Web 应用程序开发体验。 * Blazor：ASP.NET Core 的 Blazor 框架...
ASP.NET Core 中的 Razor Pages
gnimgnot
09-03 1473
看起来与 MVC 的页面差不多，但特别之处是有一个 @page 指令，@page 指令意味着这个页面可以直接接收 http request，而不需要通过 controller。一个Index2.cshtml 页面，搭配一个Index2.cshtml.cs，类似WPF 中的 xaml与 xaml.cs。@model 指令中的CreateModel 对应一个名为 Create 的 Model，Razor Pages 中的BindProperty 一般用于非 GET 的属性。
[译]ASP.NET Core揭秘 - Razor Pages
weixin_30565199的博客
09-13 404
原文 什么是Razor Pages? Razor pages是ASP.NET Core 2.0的新特性，它被设计用来更快的开发页面，比传统的MVC模式更便捷。 创建项目 为了使用Razor Pages，你须在安装Core 2.0。 在VS中，你可以通过选择File -> New Project，然后选择ASP.NET Core Web Application来创建一个新的Core Razor...
ASP.NET Core Razor Pages入门
mwcxz的博客
11-17 2260
ASP.NET Core Razor Pages入门
【ASP.NET Core笔记】 使用razor pages构建网站
cxyhjl的博客
05-19 4687
使用ASP.NET Core Razor Pages 构建网站sqlite 北风数据库1. Northwind.Common.DataContext.Sqlite是Sqlite的数据库上下文，有三个类：ConsoleLogger.csNorthwindContext.csNorthwindContextExtensions.cs1.1 NorthwindContext 继承自 Microsoft....
ASP.NET Core 中的 Razor Pages 介绍
songjuntao8的专栏
02-12 1090
Razor 是一个用于将基于 .NET 的代码嵌入到网页中的标记语法。 Razor语法由 Razor 标记、c # 和 HTML 组成。 包含 Razor 的文件通常具有 .cshtml 文件扩展名。 Razor还可在 Razor 组件文件 () 中找到 .razor 。 Razor语法 类似于不同 JavaScript 单页应用程序的模板化引擎 (SPA) 框架，如 Angular、React、VueJs 和 Svelte。 呈现 HTML 默认 Razor 语言为 HTML。 从标记呈现 HTM
RazorPage：PageModel：从Model到Razor的传值
极客神殿
04-30 4276
创建和引入 在创建Razor页面时的时候，如果勾选： 就可以看到，在.cshtml文件中，有这样的代码： @model Demo.Pages.RegisterModel 在RegisterModel上F12转到定义，可以知道RegisterModel其实是一个类，继承自PageModel。 （演示：略） 注意其命名规范：类名同Page名，后加Model后缀 此外，注意： 组合之后的page可以有多个@model声明，但只能有一个@page声明 Handler Methods PageModel可以自
ASP.NET Core Razor 页面入门
allway2的博客
03-03 2151
Razor Pages 是 ASP.NET Core 2.0 中引入的 ASP.NET Core MVC 的一个新方面。它提供了一种“基于页面”的方法，用于在 ASP.NET Core 中构建服务器端呈现的应用程序，并且可以与“传统”MVC 或 Web API 控制器共存。在这篇文章中，我将介绍 Razor Pages、入门基础知识以及 Razor Pages 与 MVC 的不同之处。 如果您希望在 .NET Core 应用程序中看到 Twilio API 的完全集成，请查看这个免费的 5 部分视频系列.
asp.net core 2.0 入门攻略 第二章 Razor Pages项目结构
赫的BLOG
10-07 3114
打开VS社区版，选择文件->新建->新建项目 选择Visual C#->.Net Core->ASP.NET Core Web应用程序
Asp.Net Core 3.x 基础项目与核心技术实践
Asp.Net Core 3.x 是微软推出的一个跨平台、高性能的 Web 开发框架，广泛应用于现代 Web 应用程序开发中。本资源标题为“AspNet.Core 3.x 基础代码”，结合其描述和标签内容，涵盖了 Asp.Net Core 入门阶段的核心...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值