单元 3

Coding24
以 Razor Pages 构建小型网站
学习内容 :

1. Razor Pages 基础
实作 1- 使用模版创建 Razor Pages 网站
2. Razor Pages 的进一步介绍
实作 2- 以 Razor Pages 实现 CityAlbum 网站

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

1
 1. Razor Pages 基础

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

2
 Razor Pages 基础
ASP.NET Core 有完善的 MVC 框架 ( 后续章节介绍 ) 用以构建
网站应用，但太完善也造成构建小型网站时复杂度偏高，因此
Razor Pages 框架应运而生。

它算是一种简化版的 MVC 框架，与传统的 Web Forms 模式相

似。

一个 Razor Pages 是一对文件，包含一个显示页面

（ .cshtml ）和相应的 PageModel 类（ .cshtml.cs ）
○ .cshtml 文件，其中包含使用 Razor 语法的 C# 代码的 HTML
标记。
○ .cshtml.cs 文件，其中包含处理页面事件的 C# 代码。
Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org
3
 Razor Pages 的特性
Razor Pages 是以页面为重点的 Web 编程方式，可以在一个页
面中实现所有的 HTML 和代码（ C# ）。
Razor Pages 通常放在 Pages 文件夹中，其文件名即为页面的
URL （路由）。
可以使用下面这些功能：模型绑定、 Razor 支持、 Tag Helpers
、 HTML Helpers 、 Handlers （ Action 方法）等功能。
Handlers 包含： OnGet, OnPost, OnGetAsync, OnPostAsync
等。
需要一个 Pages 文件夹，存放 Razor Pages （可配置）。
通常需要一个
Learn ASP.NET Core 6 MVC-v0.9
wwwroot 文件夹，放置静态文件，如图片等。
– http://www.coding24.org
4
 实作 1-
使用模版创建 Razor Pages 网
站

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

5
 实作 1- 使用模版创建 Razor Pages 网
站
说明：本实作将使用 ASP.NET Core 的模版创建 Razor Pages 网
站，并初步去了解模版网站的各项配置。
步骤：
1. 使用 VS 创建项目，类型：「 ASP.NET Core Web 应用」，项
目 / 方案名为 Lab-CityAlbum ，位置 : 你的工作目录 , 如 C:\
Labs

2. 框架 : .NET6.0,
Learn ASP.NET Core 6 MVC-v0.9 余采默认。
– http://www.coding24.org
6
 实作 1- 在 Razor Page 中使用
C#
3. 创建项目，完成后如右：

4. 运行网站如下图 :

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

7
 2. Razor Pages 的进一步介绍

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

8
 CityAlbum 项目文件
wwwroot 文件夹：包含静态文档，如
HTML 文件、 JavaScript 文件和 CSS 文
件
Pages 文件夹：
放 .cshtml 和 .cshtml.cs 文件

_Layout.cshtml 版面布局文件

Index.cshtml 首页

配置文件 , 包含配置数据，如连接字符串
等
网站启动及配置文件

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

9
 Program.cs 文件

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

10
 实作 2- 以 Razor Pages 实现
CityAlbum 网站

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

11
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
说明：在实作 1 基础上继续完成 CityAlbum 网站项目的各项修改。
步骤：
1. 在 wwwroot 上添加文件夹 images ，
并准备好至少 5 张的城市景点图片
，如下：

景点图片 900*500 jpg 格式

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

12
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
2. 修改 css/site.css, 在文档最后加入 : ( 相片框 , 相片大小 )
.div-image-box {
width: 220px;
height: 170px;
padding: 10px;
margin: 15px auto;
text-align: center;
float: left;
}

.div-image {
width: 200px;
height: 150px;
}
Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org
13
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
3. 修改 _Layout.cshtml, 如下 :
• Lab_CityAlbum 改为 CityAlbum 两处
• 菜单英文改中文 : Home-> 首页 , Privacy-> 隐私
• 添加一个菜单 (menu)->About ( 关于 )

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

14
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
4. 修改 index.cshtml.cs, 如下 :
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IHostingEnvironment = Microsoft.AspNetCore.Hosting.IHostingEnvironment;

namespace Lab_CityAlbum.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
string _path;
[BindProperty]
public IFormFile Upload { get; set; }
public FileInfo[] ImageFiles { set; get; }

public IndexModel(ILogger<IndexModel> logger, IHostingEnvironment environment)

{
_logger = logger;
//_path 指向存放相片的文件夹
_path = environment.WebRootPath + "//images";
}
Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org
15
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
public async Task OnPostAsync()
{
// 将相片上传到 images 文件夹中
var file = Path.Combine(_path, Upload.FileName);
using (var fileStream = new FileStream(file, FileMode.Create))
{
await Upload.CopyToAsync(fileStream);
}
// 调用 OnGet() 方法刷新首页相簿
OnGet();
}
public void OnGet()
{
// 读取 images 目录下的所有相片
DirectoryInfo directoryInfo = new DirectoryInfo(_path);
// 所有相片设置到 ImageFiles 属性
ImageFiles = directoryInfo.GetFiles();
}
}
}

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

16
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
5. 修改 index.cshtml, 如下 :
<div class="text-center">
<h1 class="display-4">CityAlbum</h1>
<hr/>
<!-- 图片上传 form-->
<form method="post" enctype="multipart/form-data">
<input type="file" asp-for="Upload" required/>
<input type="submit" />
</form>
<hr/>
@foreach (var item in Model.ImageFiles)
{
<div class="div-image-box">
<img class="div-image" src="~/images/@item.Name"><br/>
<!-- 去掉扩充名保留文档名作为相片说明 ,split 将原档名分为两段 , 取第 0 段 -->
@item.Name.Split('.')[0]
</div>
}
<!-- 清掉 float, 以免页尾也被排 -->
<div style="clear:both"/>
</div>
Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org
17
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
6. 在 Pages 中添加 About.cshtml 页面 :
右击 Pages-> 添加 ->Razor 页面 ->Razor 页面 - 空 , 文档名
About
内容如下 :
@page
@model Lab_CityAlbum.Pages.AboutModel
@{
ViewData["Title"] = " 关于 ";
}
<h1>@ViewData["Title"]</h1>

<br /><p> 网站主题 : 城市美景的收集与呈现 </p>

<p> 网站制作 : 王大中 abc@foxmail.com </p>

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

18
 实作 2- 以 Razor Pages 实现 CityAlbum 网站
7. 网站
运行如
下:

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

19
 单元小结
本单元以 Razor Pages 类型模版实现一个城市景点的范例网
站，以了解 Razor Pages 项目的基本结构。
在项目实现过程中也实现了网站相片上传的功能以增加城市景
点的数量。
透过这个项目的实现，我们基本上可了解小型 ASP.NET Core
网站的实现方式。

Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

20