9.1 Web Pages 的概述
为什么需要 Web Pages?
- 移动互联网(MobileInternet,简称MI)是一种通过智能移动终端,采用移动无线通信方式获取业务和服务的新兴业务
- 移动互联网被称为下一代互联网Web3.0,如dropbox和uDrop这类应用就是典型的移动互联网应用。移动互联网业务和应用包括移动环境下的网页浏览、文件下载、位置服务、在线游戏、视频浏览和下载等业务
9.1.1 ASP.NET Web Forms 缺点
ASP.NET Web Forms 的缺点
- 由于控件封装了很多东西,开发者很难了解这背后的HTML是如何运作的
- 容易得到一个包含大量ViewState的页面,使得页面尺寸远远超过所需的内容页面的打开速度较慢。
- 不容易被测试
9.1.2 Web Pages 介绍
Web Pages 是 3 种 ASP.NET 编程模型中的一种,用于创建 ASP.NET 网站和 Web 应用程序,优点如下 :
- 易于学习、阅读和使用
- 围绕单一网页进行构建
- 类似 PHP 和 ASP
- 服务器脚本使用 Visual Basic 或 C#
- 对 HTML、CSS 和 JavaScript 的完全控制
ASP.NET 的3 种开发模式,即 Web Pages(Web 页面)、MVC(Model View Controller 模型—视图—控制器)和 Web Forms(Web 窗体)
9.2 Web Pages 项目创建
创建 Web Pages 项目
- 打开 Visual Studio 的菜单“文件”→ “新建” →“新建项目”,在弹出的“新建项目”对话框选择“Web” →“先前版本” → “ASP.NET 网站 (Razor v3)
- “新建项目”对话框允许输入项目、解决方案的名称和程序源码存放的位置
- 点击“确定”按钮后,创建项目并打开 cshtml 文件,查看视图代码
- 按下快捷键 F5 运行项目
9.2.1 Web Pages 目录介绍
ASP.NET Web Pages 应用程序包含的默认文件和目录,为组织一个良好的应用程序结构提供了一致的方案,这些文件和目录的意义如下 :
- /Account:文件夹包含登录和安全文件
- /App_Data:数据的物理存储区,即本地化的数据库文件或数据文件
- /Content:放置应用程序的静态内容,如 CSS、可下载的文件和音乐文件等
- /Images:存放图片的目录
- /Shared:文件夹包含通用文件(如布局和样式文件)
- /Scripts:放置 JavaScript 和 jQuery 文件,文件后缀名通常为 .js
- /Web.config:应用程序配置文件
9.3 Razor 基本语法的概述
9.3.1 Razor语法特点
Razor 不是一种代码语言,而是视图中使用的代码引擎。Razor 编写时使用“@ 符号”开头,“@ 符号”是Razor 的标志
Razor 引擎允许开发人员和界面设计人员直接在 Razor 代码块中编写 C# 和 HTML 混合代码,其有以下几个特点
- Razor 是一种向网页添加基于服务器的代码的标记语法
- Razor 拥有传统 ASP.NET 标记的能力,但是更易学习和使用
- Razor 是一种类似 ASP 和 PHP 的服务器端标记语法
- Razor 支持 C# 和 Visual Basic 编程语言
示例:使用 Razor 向页面输出 C# 变量
<body>
<h1> 使用 Razor 输出 C# 变量 </h1>
<p> 现在时间:@DateTime.Now</p>
</body>
该页面包含常规的 HTML 标记,此外还包含由 @ 标记的 Razor 代码。 Razor 代码的全部工作是检测服务器上的当前时间,然后显示出来(可以指定格式选项,或者仅仅以默认格式显示)。
9.3.2 Razor基本语法
在 Razor 语法中,行内表达式(变量和函数)以 @ 开始,可以用 @ 标记来输出变量或者定义代码块(@{...})
Razor 语法具体说明如下:
- Razor 代码块由 @{ ... } 包围
- 行内表达式(变量和函数)以 @ 开始
- 代码语句以分号结束
- 变量通过 var 关键词进行声明
- 字符串用引号包围
示例:使用 Razor 声明变量并输出
<body>
<!-- 单行代码块 -->
@{ var myMessage = "Hello World"; }
<!-- 行内表达式或变量 -->
<p>The value of myMessage is: @myMessage</p>
<!-- 多行代码块 -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
</body>
9.4 Razor 与 HTML 混合输出
9.4.1 if 语句和 HTML 混合编写
Razor 编写时使用“@ 符号”开头,“@ 符号”是Razor 的标志
Razor 引擎允许开发人员和界面设计人员直接在 Razor 代码块中编写 C# 和 HTML 混合代码。在视图页面中定义变量,根据 if 语句的判断结果输出不同的内容
示例:使用if语句完成判断
<body>
@{var isOK = true; }
@if (isOK)
{
@: 好!很好
}
else
{
@: 错!大错
}
</body>
if 和 else 使用了两个 Razor 代码块,因此在输出文字时,必须添加“@:”符号。
示例: if语句和HTML混合编写
<body>
@{var isOK = true; }
@if (isOK)
{
<h1 style="font-style:italic"> 好,很好! </h1>
}
else
{
<h1 style="color:red"> 错,大错! </h1>
}
</body>
实际运用过程中,如果要循环集合,则可以使用for 语句进行循环操作
<body>
@{var list = new List<string>() { " 张三 ", " 李四 ", " 王五 " }; }
<ul>
@for (int i = 0; i < list.Count; i++) {
<li>
@list[i]
</li>
}
</ul>
</body>
使用foreach 语句进行循环操作
<body>
<ul>
@foreach (string str in list)
{
<li style="color:blue">
@str
</li>
}
</ul>
</body>
for与foreach语句块中加入了HTML标签,在标签中调用集合变量输出,因此在输出时,必须添加符号@ 如果没有加入 @,则系统会当成文字直接输出“list[i] 或 str”
总结
- Razor 语法规则中书写行内表达式(变量和函数)以符号 @ 开始
- Razor 代码块用 @{} 包围
- Razor语法中可以将if、for、foreach与HTML混合使用
- Razor 是一种向网页添加基于服务器的代码的标记语法
- Razor 拥有传统 ASP.NET 标记的能力,但是更易学习和使用
- Razor 是一种类似 ASP和 PHP 的服务器端标记语法
- Razor 支持 C# 和 Visual Basic 编程语言