单元6 视图应用Razor语法及Bootstrap框架

单元 6- 视图应用 Razor 语法及
Coding24
Bootstrap 框架
学习内容 :
1. View 视图基础介绍实作 3- 使用 Bootstrap 的网格系统

2. Razor 语法基础介绍 4. ASP.NET Core 的视图布局
实作 1- View 结合 Razor 的使用实作 4-View 的版面布局应用
3. View 结合 Bootstrap 框架的使用
实作 2- 在 View 中使用 Bootstrap
Learn ASP.NET Core 6 MVC-v0.9 – http://www.coding24.org

1
1. View 视图基础介绍

2
View 视图基础
在 MVC 模式中，视图负责数据的
呈现，并和用户交互。
视图是在 Razor 标记中使用 C#
编程语言的 .cshtml 文件。通常
视图文件会分组到以“ Views/ 控
制器”命名的文件夹中，如
Views/Home 。
如右图， HomeController 使用的视
图置于 Views/Home 文件夹中。它
包
含“ About” 、“ Contact” 和“ Ind
ex”
Learn ASP.NET Core （主页）等视图。
6 MVC-v0.9 – http://www.coding24.org
3
View 视图基础
View 主要使用 HTML 及 Razor 技术
在 ASP.NET Core 中， View 主要使用 HTML 语法构建页面，
在 Razor 语法进行逻辑运算（ C# 语法）。
可使用 HTML Helper 及 Tag Helper 快速建立相关组件，协助
HTML 构建 View 页面。

4
View 的页面构成
Razor 区块
前端网页技术：
使用
HTML 、 CSS
、 JS 或其它前
端技术。
HTML Helper 、
Tag Helper

5
View 视图的建立步
骤
3
2

6
2. Razor 语法基础介
绍

7
Razor 语法基
础
Razor 是一种标记语法，将 .NET 的代码（一般为 C# ）嵌入网
页中。 Razor 语法由 Razor 标记、 C# 和 HTML 组成。包含
Razor 的文件通常具有 .cshtml 文件扩展名。
.cshtml 页面运行时， Razor 语法被解析成标准 C# 语法，在服
务器端进行编译并运行，最后转为 HTML 页面呈现至用户浏览
器中。
Razor 语法：
1. 隐式 Razor 表达式－只用 @ 符号：以 @ 开头，后跟 C# 代码
CSHTML
<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

8
Razor 语法基
础
2. 显式 Razor 表达式－使用 @() 符号：表达式由 @ 符号和圆括号组成
CSHTML
<p> 一周的时间 : @(DateTime.Now - TimeSpan.FromDays(7))</p>
3. Razor 代码区块－使用 @{} 符号：区块以 @ 开始， C# 语句写在 { }

CSHTML CSHTML
中
@{ @foreach (var person in people)
var msg = “ 信息处理完 {
成 !"; <p> 姓名 : @person.Name</p>
} <p> 年龄 : @person.Age</p>
}
<p>@msg</p>
注 : 区块内 C# 语句结尾要加分
号
9
Razor 语法基础
在页面输出 @ 符号：要使用 @@ （两个）
CSHTML
输
@@ASP.NET Core 网页 @ASP.NET Core 网页
出
Html.Raw() 的使用：将带有 Html 标签的字符串，转换成 Html

标签输出（产生作用）。
CSHTML
<html><body>
@{
var msg = "<script>alert(' 您好 !')</script>";
}
@msg
@Html.Raw(msg)
</body></html>

10
Razor 语法基础
各种循环语句的使用： @for (var i = 0; i < people.Length; i+
CSHTML +)
{
@{
var person = people[i];
var people = new Person[]
<p> 姓名 : @person.Name</p>
{
<p> 年龄 : @person.Age</p>
new Person(“ 张三 ",
}
33),
new Person(“ 李四 ", 41)
支持以下循环语句： @{ var i = 0; }
}; @while (i < people.Length)
} {
@foreach (var person in people) var person = people[i];
{ <p> 姓名 : @person.Name</p>
<p> 姓名 : <p> 年龄 : @person.Age</p>
@person.Name</p> i++;
<p> 年龄 : @person.Age</p> }
}
11
Razor 语法基
础
Razor 注释：
○ Razor 支持 C# 和 HTML 注释：
CSHTML
@{
/* C# 区块注释 */
在浏览器呈现
// C# 单行注释以下 HTML ：

}

CSHTML
＠*
@{ 在浏览器不会
○ 使用 /* C#@* *@ */来注释：在呈现网页之前，服务器会删除
区块注释呈现注释区块 Razor 注释
} 内容
 　 * ＠

12
Razor 语法基
础
包含电子邮件地址的 HTML 属性和内容不将 @ 符号视为转
换字符，如 Razor 不会处理以下电子邮件地址（ Razor 很聪
明）：
CSHTML
<a href=“mailto:support@coding24.org">support@coding24.org</a>
在代码块内以
CSHTML HTML 形式呈现整个行的其余内容，使用 @: 语
法：
@foreach (var person in people) 注 : 代码区块内默认是 C# 语
{ 句，若要输出 HTML 或一般文
字，在该行前要加上 @: 符号，
@: 姓名 : @person.Name
或使用 HTML 标签，且该行最后
@: 年龄 : @person.Age 不用分号。
}

13
实作 1- View 结合 Razor 的使用

14
实作 1- View 结合 Razor 的使
用
说明：本实作将 MVC 模式创建一个简单的图书显示网站，在 View
中将应用 Razor 语法。
任务：
○ 创建一个空的 ASP.NET Core 网站
○ 添加或修改 Program.cs 内容。
○ 添加静态资源 wwwroot
○ 添加 Model 类： Book.cs
○ 撰写 Controller 及 Action 。
○ 添加 View
○ 查看网站运行结果并进行调试。

15
用
步骤：
1. 使用 VS 创建项目，类型：「 ASP.NET Core 空」，项目 / 方
案名为 Lab-ViewExercise ，位置 : 你的工作目录 , 如 C:\Labs
2. 框架 : .NET6.0, 余采默认，建立项目。
3. 修改 Program.cs ，加入 MVC 服务并修改默认路由，如下：
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseStaticFiles();
app.MapControllerRoute(name: "default",
pattern: "{Controller=Home}/{Action=Index}/{id?}");
app.Run();

16
用
4. 添加 wwwroot 文件夹，在其内添加 images 文件夹，将教程提
供的图书图片置入。
5. 在项目中添加 Controllers 文件夹，在 Controllers 中，添加”
控制器” ->”MVC 控制器 - 空”，名为 HomeController.cs ，
内容如下备注稿。
6. 在项目中添加 Models 文件夹，在其中添加 Book.cs ，内容如
下备注稿。

17
用
7. 添加 View ，模版及类选择如下图。完成后项目结构如右
下：

18
用
8. 阶段运行如下：
9. 再修改 View (index.cshtml) ，如下备注稿内容。

19
用
9. 完成后运行如下：

20
3. View 结合 Bootstrap 框架的使
用

21
Bootstrap 5 简介
Bootstrap 是一套 Web 前端组件库，用于开发响应式
（ RWD ）网站。目前最新版本为 5.3 版 (2023/2) ，它是一套
基于 HTML 、 CSS 和 Javascript 技术的开源工具。
Bootstrap 5 和 Bootstrap 3 & 4 的主要区别在于它不再依赖
jQuery ，使用了原生的 JavaScript 。
Bootstrap 官网及相关教学网站：
Bootstrap 官网：
https://getbootstrap.com/
中文教学网站
https://www.runoob.com/bootstrap5 ( 菜鸟教程 )
https://v5.bootcss.com/ (Bootstrap 中文文档 )
22
LibMan 介绍
Microsoft Library Manager——LibMan 是微软开源且轻量级的
库管理工具，能够帮助用户轻松安装和使用第三方客户端库。
可以从 CDN 添加任务库或是从文件系统、网络共享或远程
URL 添加任何文件，快速且集成于 VS 工具中。
支持的 CDN 有： cdnjs 、 jsdelivr 和 unpkg 。
在早期的 ASP.NET MVC 版本使用 NuGet 进行 Bootstrap 安
装，但在 ASP.NET Core MVC 改用 LibMan 。

23
实作 2- 在 View 中使用 Bootstrap

24
实作 2- 在 View 中使用
Bootstrap
说明：本实作在前述图书显示网站基础上，在 View 中引用
Bootstrap 框架进行 RWD 改造
步骤：
1. 将 Lab-ViewExercise 文件夹复制一份，并
改名为 Lab-ViewExercise-bstrp 。
2. 运行 ViewExercise-bstrp 项目以确定项目正常。
3. 用 LibMan 在项目中加入
Bootstrap 套件：
右击项目名 -> 添加 -> 客户端库

25
Bootstrap
4. 用 LibMan 在项目中加入 Bootstrap 套件 ( 续 ) ：选择库及版本
在方框中打
入” Bootstrap@...”

26
Bootstrap
下载完成后项目内容如下 :
若要更新版本或解安装
可…

27
Bootstrap
5. 引用 Bootstrap 套件：
拉入
6. 修改 View 套用 Bootstrap ：

28
Bootstrap
完成后运行结果如下：

29
实作 3- 使用 Bootstrap 的网格系
统

30
统
说明：本实作在前述图书显示网站基础上，在 View 中引用
Bootstrap 的网格标签进行 View 的改造。
步骤：
1. 将 Lab-ViewExercise-bstrp1 文件夹复制一份，并
改名为 Lab-ViewExercise-bstrp2 。
2. 运行 ViewExercise-bstrp2 项目以确定项目正常。
3. 修改 index.cshtml ，如次页内容。

31
统
这个区 (div) 为一个布局容器
container, mt-3 上边界 3rem. 并使
用行 (row) 来创建水平的列 (col).
表示这个
div( 区 ): col-12
超小屏占 12
列 ,col-md-3 中型
占 3 列 , sm-6 小
屏占 6 列 , mt-3
上边界 3rem.

32
统
完成后
运行如下：

33
4. ASP.NET Core 的视图布局

34
ASP.NET Core 的视图布局
大多数 Web 应用都有一个通用布局（ Layout ），可在页面间切换时为用户提供
一致体验， ASP.NET 也是如此。布局是一个页面（下图非灰色区），内容也是一
个页面（灰色区），整合呈现给用户。
布局通常包括页首、导览列（或菜单）以及页脚等常见的用户界面区块。
内容区块（ Content ）则由每个 View 负责呈现。
布局１布局２汉堡菜单 (RWD)

35
 ASP.NET Core 应用的默认布局名为 _Layout.cshtml ，不同类型项目
大致放置的位置大同小异，如下：
MVC 类型项目，布局文件位置： RazorPage 类型项目，文件位

Views/Shared/_Layout.cshtml 置： Pages/Shared/
_Layout.cshtml

36
 套用方法一：在各自页面，如 index.cshtml 的内容最上方加入
下列套用语句：亦即 _Layout.cshtml 负责显示共同内容（如页
首、导览及页脚），内容页（如 index.cshtml ）显示不同的页
面内容。 Index.cshtml
@{
Layout = "_Layout";
套 }
用 <html

</html>

37
 套用方法二：在 _ViewStart.cshtml 文件中设置 , 则所有 View
都会套用。 _ViewStart.cshtml 内容如下所示。
内容不用设置套用语句
_ViewStart.cshtml
@{
Layout = "_Layout";
}

38
实作 4-View 的版面布局应用

39
说明：本实作在前述图书显示网站基础上，在 View 中引用版面布局的设置 ,
使多页的 View 有一致的风格。
步骤：
1. 将 Lab-ViewExercise-bstrp2 文件夹复制一份，并改名为 Lab-
ViewExercise-layout 。
2. 运行 ViewExercise-layout 项目以
确定项目正常。
3. 在 Views 下加入 _ViewStart.cshtml 设置档：
右链 Views 文件夹 -> 添加 -> 视图 ->_ViewStart.cshtml
Razor 视图 - 空白，文件名为
@{
_ViewStart.cshtml ，如下 : Layout = "_Layout";
}
40
4. 在 Views/Shared 中加入布局页：右链 Shared 文件夹 -> 添加 -> 视图 -
>
Razor 视图 - 空白 ->Razor 布局，文件名为 _Layout.cshtml ，内容如
备注稿。
5. 修改 index.cshtml 套用布局：
只留下 <body></body> 间的部份，内容如备注稿。
完成后可先进行测试。
6. 在 HomeController 中添加 About 动作方法 :

41
7. 为 About 动作方法添加 View ：在 About 方法名称上右键 -> 添加视图 -
>Razor 视图 -> 勾选”使用布局页” ->” 添加”
8. 修改 About.cshtml 内容如下 :
About.cshtml
@{
ViewData["Title"] = " 关于 ";
}
<div class="container mt-3 mb-3">
<h4> 关于优书网 ....</h4>
<p> 我们是一家有潜力的在线图书销售及服务公司，公司的设置宗旨－只为你找优质的图书！ uBooks.com 是我们的公司名称，设
立于今天，但已于很久前就开开始提供服务了。 </p>
<br/>
</div>

42
9. 完成 ! 运行如下 :

43
单元小结
在 MVC 模式中， View 负责展示数据，不该包含任何业务逻，
同时它可结合各种前端技术以强化用户界面。
微软的 Razor 是一种新的前端标示语言，可运用于 View 中，它
主要以 @ 、 @() 及 @{ } 三种标签标示，以加入 C# 语句。
透过微软新的前端库管理工具— LibMan ，透过它可在项目中下
载各种库 (Library) 。在本单元中我们下载了 Bootstrap 套件，
应用它，将原本的 View 改为响应式页面。
最后 View 可采用视图布局的设计方式，使的网站页面的风格较
为一致且美观。

44

单元6 视图应用Razor语法及Bootstrap框架

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

单元6 视图应用Razor语法及Bootstrap框架

Uploaded by

Copyright:

Available Formats

单元 6- 视图应用 Razor 语法及

1. View 视图基础介绍 实作 3- 使用 Bootstrap 的网格系统

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

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

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

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

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

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

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

<p> 一周的时间 : @(DateTime.Now - TimeSpan.FromDays(7))</p>

3. Razor 代码区块－使用 @{} 符号：区块以 @ 开始， C# 语句写在 { }

Html.Raw() 的使用：将带有 Html 标签的字符串，转换成 Html

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

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

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

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

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

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

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

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

9. 再修改 View (index.cshtml) ，如下备注稿内容。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

布局１ 布局２ 汉堡菜单 (RWD)

MVC 类型项目，布局文件位置： RazorPage 类型项目，文件位

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

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

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

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

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

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

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

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

You might also like

1. View 视图基础介绍实作 3- 使用 Bootstrap 的网格系统

布局１布局２汉堡菜单 (RWD)