ASP.NET基础之WebPages

ASP.NET 提供了多种开发模式，包括 Web Pages、MVC 和 Web Forms。下面是对这些开发模式的简要解释：

Web Pages（Web 页面）：
- 这是最简单的 ASP.NET 模式之一，类似于 PHP 和经典 ASP。
- 使用基于 Razor 语法的动态页面，可以轻松地嵌入服务器代码和 HTML。
- 内置了许多模板和帮助器，可用于快速开发功能，如数据库操作、视频播放、图形生成和社交媒体集成等。
MVC（模型-视图-控制器）：
- MVC 将 Web 应用程序分解为三个主要组件：模型、视图和控制器。
- 模型（Model）负责处理数据逻辑和数据访问。
- 视图（View）负责呈现用户界面。
- 控制器（Controller）负责处理用户输入、控制应用程序流程和协调模型和视图之间的交互。
- MVC 提供了一种更加分离和可测试的开发模式，使应用程序更易于维护和扩展。
Web Forms（Web 窗体）：
- 这是传统的 ASP.NET 事件驱动开发模式。
- 开发人员可以创建具有服务器控件、服务器事件和服务器代码的网页。
- 开发人员可以使用事件处理程序来响应用户操作，并通过在服务器上执行代码来实现页面逻辑。
- Web Forms 提供了一种类似于桌面应用程序开发的方式，使开发人员可以快速构建具有复杂交互的页面。

<!DOCTYPE html>
<html>
<body>
     <h1>Hello Web Pages</h1>
     <p>The time is @DateTime.Now</p>
</body>
</html>

这段代码是一个简单的 HTML 页面，用于显示当前时间。其中 @DateTime.Now 是 Razor 语法，用于在页面中插入 C# 代码。在这里，DateTime.Now 是 C# 中的一个内置函数，用于获取当前日期和时间。通过将其包含在 @ 符号内，可以将其嵌入到 HTML 页面中，并在页面加载时显示当前的日期和时间。

Web Pages 是一种用于创建 ASP.NET 网站和 Web 应用程序的编程模式之一。它是 ASP.NET 中最简单的开发模式之一，适合初学者和快速开发。

下面是对 Web Pages 的主要特点的解释：

容易学习，容易理解，容易使用： Web Pages 提供了一种简单的方式来构建 ASP.NET 网页，因此对于初学者来说很容易上手。它使用了类似于 PHP 和经典 ASP 的语法和概念，使得开发过程更加直观。
围绕着单一的网页创建： 与其他 ASP.NET 模式相比，Web Pages 更加关注于单个网页的创建。每个网页可以包含 HTML、CSS、JavaScript 和服务器脚本，使得开发过程更加简洁和直观。
与 PHP 和经典 ASP 相似： Web Pages 的语法和结构与 PHP 和经典 ASP 类似，因此对于那些熟悉这些技术的开发者来说，上手更容易。
服务器脚本支持： 使用 Visual Basic 或者 C# 等服务器脚本语言，可以在 Web Pages 中编写服务器端代码，实现动态的网页内容和逻辑。
全 HTML、CSS 和 JavaScript 控制： Web Pages 允许开发者完全控制 HTML、CSS 和 JavaScript，从而实现自定义的网页布局和样式。
内置功能和扩展性： Web Pages 内置了数据库访问、视频、图形、社交媒体等功能，并提供了丰富的 Web Helpers 库，使得开发者能够轻松地扩展和定制网站的功能。

Razor 是一种用于将基于服务器的代码嵌入到网页中的标记语法。它具有传统 ASP.NET 标记的功能，但更加容易使用和学习。Razor 支持 C# 和 Visual Basic 两种编程语言，使得开发者可以在网页中使用这两种语言来实现动态内容和逻辑。

Razor C# 语法规则

Razor 代码块使用 @{ ... } 包裹
内联表达式（变量和函数）以 @ 开头
代码语句需要以分号结束
变量使用 var 关键字声明
字符串需要用引号括起来
C# 代码区分大小写
C# 文件的扩展名是 .cshtml

在网页中添加 Razor 代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
<p>The time is @DateTime.Now</p>
</body>
</html>

这个示例中，使用了 Razor 代码 @DateTime.Now 来获取当前时间，并将其显示在网页中。

以下是几个使用 Razor 语法的例子：

显示变量：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
@{
    var name = "John";
}
<h1>Hello @name</h1>
</body>
</html>

使用条件语句：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
@{
    var isMember = true;
}
@if (isMember)
{
    <p>Welcome, Member!</p>
}
else
{
    <p>Please sign up to become a member.</p>
}
</body>
</html>

循环迭代：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<ul>
@{
    var fruits = new List<string> { "Apple", "Banana", "Orange" };
}
@foreach (var fruit in fruits)
{
    <li>@fruit</li>
}
</ul>
</body>
</html>

这些示例展示了 Razor 语法在网页中的应用，包括显示变量、使用条件语句、以及循环迭代等功能。

结合C#的Razor：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
@{
    var name = "John";
    var age = 30;
    var isAdult = age >= 18;
}
<h1>Hello @name!</h1>
@if (isAdult)
{
    <p>You are an adult.</p>
}
else
{
    <p>You are not yet an adult.</p>
}
</body>
</html>

在这个例子中，我们定义了一个名为 name 的变量和一个 age 变量，并使用条件语句来确定是否满足成年条件。通过Razor的 @ 符号，我们可以在HTML中嵌入C#代码，实现了动态生成内容的功能。

Razor VB 语法规则

知识点：

Razor 代码块包含在 @Code ... End Code 中。
内联表达式（变量和函数）以 @ 开头。
变量使用 Dim 关键字声明。
字符串用引号括起来。
VB 代码不区分大小写。
VB 文件的扩展名是 .vbhtml。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
<p>Current time: @DateTime.Now</p>

@Code
    Dim name As String = "John"
    Dim age As Integer = 25
End Code

<h2>Hello @name!</h2>
<p>Your age is @age.</p>

@If age >= 18 Then
    <p>You are an adult.</p>
@Else
    <p>You are not yet an adult.</p>
@end If

</body>
</html>

这个示例展示了如何使用 Razor VB 语法在 HTML 页面中嵌入 VB 代码。

Web Pages - 页面布局

通过 ASP.NET Web Pages，您可以轻松地创建具有一致外观的网站，实现以下几个目标：

一致的外观：使网站的每个页面具有相同的头部、底部、样式和布局。
内容块（Content Blocks）：将重复使用的内容块（如头部和底部）写成单独的文件，并在需要的页面中导入。
布局页（Layout Page）：定义一个布局页，包含网页的结构，而不是内容。内容页链接到布局页，根据布局页的结构显示内容。

Content Blocks（内容块）：

在 ASP.NET Web Pages 中，您可以使用 @RenderPage() 方法从其他文件导入内容块，以在多个页面中显示相同的内容。以下是一个示例：

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>

@RenderPage("header.cshtml")：这行代码使用了 Razor 语法 @RenderPage()，它的作用是将指定文件（header.cshtml）的内容导入到当前页面中。在这个例子中，header.cshtml 文件的内容将显示在当前页面的 <body> 标签之前，作为页面的头部内容。

<h1>Hello Web Pages</h1>：这是一个普通的 HTML 标签，用于显示页面中的标题。

<p>This is a paragraph</p>：这也是一个普通的 HTML 标签，用于显示页面中的段落内容。

@RenderPage("footer.cshtml")：与第一行类似，这行代码也使用了 Razor 语法 @RenderPage()，将指定文件（footer.cshtml）的内容导入到当前页面中。在这个例子中，footer.cshtml 文件的内容将显示在当前页面的 <body> 标签之后，作为页面的底部内容。

通过使用 @RenderPage() 方法，您可以在多个页面中重复使用相同的内容块，例如头部和底部，而不必在每个页面中都复制粘贴相同的代码。这有助于提高代码的可维护性和可重用性。

Layout Page（布局页）：

布局页定义了网页的结构，包含了网页的头部、底部等元素。内容页通过 @RenderBody() 方法嵌入到布局页中，实现一致的外观。以下是一个布局页的示例：

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2012 Runoob. All rights reserved.</p>
</body>
</html>

<p>This is header text</p>：这是一个普通的 HTML 段落标签，显示在页面的顶部，作为页面的头部内容。

@RenderBody()：这是一个 Razor 语法，表示在布局页中显示内容页的内容。具体来说，@RenderBody() 方法将会在布局页中的某个位置显示内容页（Content Page）中的实际内容。在布局页中使用 @RenderBody() 方法时，需要在内容页中定义一个布局指令，指定该内容页使用哪个布局页，例如 @{Layout="Layout.cshtml";}。

<p>© 2012 Runoob. All rights reserved.</p>：这也是一个普通的 HTML 段落标签，显示在页面的底部，作为页面的版权信息。

布局页的作用是定义网页的整体结构和布局，并且可以在多个页面中重复使用相同的布局，以确保网站的外观和风格保持一致。通过使用布局页，可以有效地管理网站的结构和样式，并且可以将网站的视觉元素与具体的内容分离开来，提高代码的可维护性和可重用性。

D.R.Y. - Don't Repeat Yourself

遵循 D.R.Y. 原则，避免在每个页面上重复相同的信息。

防止文件被浏览：

为了防止内容块或布局页被用户看到，您可以将这些文件的名称以下划线开头，例如 _header.cshtml、_footer.cshtml、_Layout.cshtml。

原理：为了防止内容块或布局页被用户直接访问到，您可以在它们的文件名前加上下划线 _。在 ASP.NET 中，以下划线开头的文件名会被视为“特殊”文件，不会直接向用户暴露，而是在服务器端被处理。

隐藏敏感信息：

您可以将敏感信息（如数据库密码、电子邮件密码等）保存在一个名为 _AppStart.cshtml 的单独文件中，以防止这些信息在网上被浏览。例如：

@{
    // 设置数据库连接字符串
    var connectionString = "Server=myServerAddress;Database=myDataBase;User Id=myUsername;Password=myPassword;";
    
    // 设置电子邮件配置信息
    var emailServer = "mailserver.example.com";
    var emailUsername = "username@example.com";
    var emailPassword = "your-email-password";
    var emailFrom = "your-name-here@example.com";
    
    // 设置其他敏感信息
    var otherSensitiveInfo = "your-other-sensitive-information";
}

运用了刚刚的知识点

通过将敏感信息存储在单独的文件 _AppStart.cshtml 中，可以防止这些信息在网上被浏览。在 ASP.NET 中，以 _AppStart.cshtml 命名的文件会被特别处理，其内容不会被直接暴露给用户，而是在服务器端被处理。

在 _AppStart.cshtml 文件中，您可以设置诸如数据库密码、电子邮件密码等敏感信息，并在需要时在其他页面中引用这些信息。这种做法有助于保护您的敏感信息不被未经授权的访问者获取，并使您的网站更加安全可靠。

在 ASP.NET Web Pages 中，文件夹和文件夹路径的管理非常重要。

逻辑文件夹结构和物理文件夹结构：
- 逻辑文件夹结构和物理文件夹结构在 ASP.NET Web Pages用于组织和存储项目中的文件和文件夹。
  1. 逻辑文件夹结构：
    - 逻辑文件夹结构是指在项目中组织文件和文件夹的方式，是从项目的逻辑角度来考虑的。
    - 这种结构通常反映了项目的功能、模块或用途，使得代码更易于理解和维护。
    - 例如，一个名为“Account”的逻辑文件夹可能包含用于处理用户账户相关功能的文件，如登录、注册、密码重置等。
  2. 物理文件夹结构：
    - 物理文件夹结构是指在计算机文件系统中实际存储文件和文件夹的方式，是从计算机硬盘的角度来考虑的。
    - 这种结构与项目的逻辑结构不一定完全一致，因为在文件系统中组织文件可能会受到文件系统的限制或者项目部署的环境等因素影响。
    - 例如，一个名为“Images”的物理文件夹在计算机上的存储路径可能是“C:”，其中包含了网站中使用的图片文件。
  逻辑文件夹结构和物理文件夹结构的区别在于前者是从项目的逻辑角度组织文件，而后者是从计算机文件系统的角度组织文件。在实际开发中，开发者需要根据项目的需求和部署环境来设计和管理这两种文件夹结构，以便更好地组织和管理项目中的文件。
虚拟名称和物理名称：
- 虚拟名称和物理名称在网站开发中是两个重要的概念，用于描述资源的访问路径和实际存储路径。
  1. 虚拟名称：
    - 虚拟名称是指在网站上访问资源时使用的名称，通常是相对于网站根目录的路径。
    - 虚拟名称是通过 URL 访问资源时所使用的名称，它们可以是相对路径或绝对路径。
    - 例如，"Images/pic31.jpg" 是一个虚拟名称，用于访问位于 "Images" 文件夹下的 "pic31.jpg" 图片资源。
  2. 物理名称：
    - 物理名称是指资源在服务器文件系统中的实际存储路径，即资源在计算机硬盘上的位置。
    - 物理名称是用于在服务器端访问和处理资源的路径，通常是绝对路径。
    - 例如，"C:31.jpg" 是一个物理名称，指定了服务器上存储的 "pic31.jpg" 图片资源的实际位置。
  虚拟名称和物理名称之间的关系是，虚拟名称用于在 URL 中访问资源，而物理名称则用于在服务器上定位和处理资源。在开发网站时，开发者需要了解和管理这两种名称，以便正确地访问和处理网站中的资源。
  
  URL 和路径：
- URL 是用来访问网站中的文件的地址，如 http://www.runoob.com/html/html-tutorial.html。
- 虚拟路径是 URL 对应的路径表示，如“/html/html-tutorial.html”。
- 物理路径是 URL 对应的服务器上的实际路径，如“C:-tutorial.html”。

~ 运算符：

在编程代码中，~ 运算符表示站点的根目录，可用于规定虚拟路径。
使用 ~ 运算符可以使代码更加灵活，当站点位置改变时无需修改代码。

```C# // 使用 ~ 运算符指定虚拟路径 var myImagesFolder = "~/images"; var myStyleSheet = "~/styles/StyleSheet.css";


4. **Server.MapPath 方法**：

   - Server.MapPath 方法将虚拟路径转换为服务器上的物理路径。

   - 可以使用该方法获取物理路径，用于打开服务器上的数据文件等操作。

   - ```C#
     // 定义虚拟路径
     var pathName = "~/dataFile.txt";
     
     // 使用 Server.MapPath 方法将虚拟路径转换为物理路径
     var fileName = Server.MapPath(pathName);

Href 方法：

Href 方法将代码中使用的路径转换为浏览器可以理解的路径。
可以在 HTML 元素中使用该方法创建资源的路径，如图像文件、CSS 文件等。

```C# @{ // 定义虚拟路径 var myStyleSheet = "~/Shared/Site.css"; }


掌握以上知识和方法可以更好地管理 ASP.NET Web Pages 项目中的文件和文件夹，并确保代码的灵活性和可维护性。

## 全局页面

ASP.NET Web Pages 中的全局页面包括 AppStart 和 PageStart。

**AppStart 页面**：

- AppStart 页面是在应用程序启动时执行的全局页面。
- 它包含应用程序的全局设置、配置和初始化代码。
- 通常用于配置应用程序范围内的设置，如数据库连接、身份验证等。

**PageStart 页面**：

- PageStart 页面是在每个页面被处理之前执行的全局页面。
- 它包含每个页面都要执行的共同代码，如页面级别的设置、布局等。
- 可以用于在每个页面加载之前执行特定的逻辑或设置页面级别的变量。

这两种全局页面可以帮助开发人员在整个应用程序中实现一致的设置和逻辑，提高开发效率并简化代码维护。

### 工作原理：

全局页面（AppStart 和 PageStart）的工作原理如下：

1. **AppStart 页面**：
   - 当应用程序启动时，ASP.NET Web Pages 框架会首先检测是否存在名为“AppStart.cshtml”的文件。
   - 如果存在，则框架会在应用程序启动时执行该页面中的代码。
   - 在 AppStart 页面中，可以进行应用程序范围内的全局设置、配置和初始化操作，如数据库连接、身份验证设置等。
   - 这些设置和初始化操作只会在应用程序启动时执行一次，并且对整个应用程序有效。

2. **PageStart 页面**：
   - 每当用户请求一个页面时，ASP.NET Web Pages 框架会首先检测该页面所在的文件夹中是否存在名为“PageStart.cshtml”的文件。
   - 如果存在，则框架会在处理该页面之前执行该页面中的代码。
   - 在 PageStart 页面中，可以进行每个页面都要执行的共同操作，如设置页面级别的变量、应用布局等。
   - 这些操作会在每个页面被处理之前执行，可以用于在页面加载之前执行特定的逻辑或设置页面级别的属性。

***



## ASP.NET Web Pages - HTML 表单

1. **HTML 表单标签**：使用 `<form>` 标签来创建 HTML 表单，指定表单的 action（提交地址）和 method（提交方法）等属性。

2. **表单控件**：可以在表单中放置各种输入控件，如文本框、复选框、单选按钮、下拉列表等，以收集用户输入的数据。

3. **表单提交**：用户输入完成后，通过提交表单将数据发送给服务器进行处理。提交可以使用按钮、链接或者 JavaScript 脚本触发。

4. **表单处理**：在服务器端，通过处理表单提交的数据来实现相应的业务逻辑，如数据处理、数据库操作等。

**具体代码样例**：

下面是一个简单的 HTML 表单示例，演示了如何创建一个包含文本框、单选按钮和提交按钮的表单，并使用 C# 处理表单提交的数据：

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Form Example</title>
</head>
<body>
    <h2>HTML Form Example</h2>
    <form action="ProcessForm.cshtml" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在上述代码中，<form> 标签创建了一个表单，action 属性指定了提交的地址（ProcessForm.cshtml），method 属性指定了提交的方法（POST）。

表单中包含一个文本框（用于输入姓名）和一组单选按钮（用于选择性别），以及一个提交按钮。

详细解释：

这是一个简单的 HTML 表单示例，用于收集用户的姓名和性别信息。让我逐行解释：

<!DOCTYPE html>：声明文档类型为 HTML5，确保浏览器按照最新的 HTML 标准解析页面。

<html>：HTML 页面的根元素。

<head>：包含了页面的元信息，如标题、样式表和脚本等。

<title>：定义了页面的标题，在浏览器标签栏中显示。

<body>：包含了页面的主体内容。

<h2>：标题级别为 2 的标题，显示了“HTML Form Example”。

<form>：创建了一个 HTML 表单，action 属性指定了表单提交的目标页面（ProcessForm.cshtml），method 属性指定了提交的方法（POST）。

<label>：定义了表单字段的标签，for 属性指定了关联的表单字段的 id。

<input type="text">：创建了一个文本框输入框，用户可以在其中输入文本，id 和 name 属性指定了该输入框的标识符。

<input type="radio">：创建了一个单选按钮，用户可以从多个选项中选择一个，id、name 和 value 属性分别指定了单选按钮的标识符、名称和值。

<input type="submit">：创建了一个提交按钮，用户点击该按钮后将提交表单数据到指定的目标页面。

通过这个表单，用户可以输入姓名，并从“Male”和“Female”两个选项中选择性别，然后点击提交按钮。提交后，表单数据将被发送到指定的目标页面进行处理.

在服务器端，可以创建 ProcessForm.cshtml 页面来处理表单提交的数据，示例代码如下：

@{
    var name = Request["name"];
    var gender = Request["gender"];
}

<!DOCTYPE html>
<html>
<head>
    <title>Form Data Processing</title>
</head>
<body>
    <h2>Form Data Processing</h2>
    <p>Name: @name</p>
    <p>Gender: @gender</p>
</body>
</html>

@{ ... }：这是 Razor 语法中的代码块，用于在服务器端处理表单提交的数据。在这里，使用 Request["name"] 和 Request["gender"] 获取了表单提交的姓名和性别数据，并将其分别存储在 name 和 gender 变量中。

<!DOCTYPE html>：声明文档类型为 HTML5。

<html>：HTML 页面的根元素。

<head>：包含了页面的元信息，如标题等。

<title>：定义了页面的标题，在浏览器标签栏中显示。

<body>：包含了页面的主体内容。

<h2>：标题级别为 2 的标题，显示了“Form Data Processing”。

<p>：创建了段落元素，用于显示表单提交的数据。@name 和 @gender 分别用于输出姓名和性别，这里的 @ 符号用于在 Razor 代码中插入 C# 变量的值。

通过这个页面，用户提交表单后，服务器端将接收到表单数据并显示在页面上，用户可以看到他们输入的姓名和选择的性别。

实例二

当用户选择了一个图像后，可以使用 Razor 来动态地显示相应的图像。以下是一个示例代码：

@{
    var selectedImage = Request["image"]; // 获取用户选择的图像名称
    var imagePath = "~/Images/" + selectedImage + ".jpg"; // 构建图像的路径
}

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Image Display</title>
</head>
<body>
    <h2>Dynamic Image Display</h2>
    
    <form method="get">
        <label for="image">Select an image:</label>
        <select id="image" name="image">
            <option value="image1">Image 1</option>
            <option value="image2">Image 2</option>
            <option value="image3">Image 3</option>
        </select>
        <input type="submit" value="Display">
    </form>
    
    @if (!string.IsNullOrEmpty(selectedImage))
    {
        <img src="@Href(imagePath)" alt="Selected Image">
    }
</body>
</html>

这段 Razor 代码实现了一个动态图像显示的功能，让用户可以选择并显示不同的图像

@{ ... } 代码块中的变量定义了 selectedImage 和 imagePath：

selectedImage 用于存储用户选择的图像名称，通过 Request["image"] 获取用户表单提交的图像名称。

imagePath 则是根据用户选择构建的图像路径，采用了虚拟路径的形式 ~/Images/selectedImage.jpg。

在 HTML 表单中，用户可以选择一个图像并提交表单：

表单通过 GET 方法提交，所以用户选择的图像名称会作为 URL 参数发送到服务器。

在表单提交后，通过 @if 语句检查用户是否已经选择了图像：

如果用户选择了图像，则使用 img 标签动态显示选定的图像。

@Href(imagePath) 用于生成图像的 URL，这样可以在 HTML 中引用图像文件。

ASP.NET Web Pages - 对象

Page 对象：

Page 对象用于表示当前页面，它包含了许多属性和方法来操作页面的内容和行为。

一些常见的 Page 对象方法和属性包括：

@RenderPage("header.cshtml")：在页面中渲染另一个页面的内容。
@RenderBody()：呈现不在布局页命名区域的内容页的一部分。
@Write(object)：将对象作为 HTML 编码字符串写入。
@Page.isPost：如果客户端使用的 HTTP 数据传输方法是 POST 请求，则返回 true。
@Page.Layout：获取或设置布局页面的路径。
@Page.Request：获取当前的 HTTP 请求对象。
@Page.Server：获取 HttpServerUtility 对象，提供了网页处理方法。

Page 对象的 Page 属性提供了对页面和布局页之间共享的数据的访问。您可以在 Page 属性中添加自定义的属性，例如：

@{
    Layout = "~/Shared/Layout.cshtml";
    Page.Title = "Home Page";
}

在上面的示例中，Layout 和 Page.Title 是 Page 对象的属性，您可以在页面中设置它们，然后在布局文件中使用。

让我们以一个简单的实例来说明如何使用 Page 对象的属性和方法：

Home.cshtml：

@{
    Layout = "~/Shared/Layout.cshtml";
    Page.Title = "Home Page";
}

<!DOCTYPE html>
<html>
<head>
    <title>@Page.Title</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is the home page content.</p>
</body>
</html>

在这个示例中，我们使用了 Razor 语法设置了两个属性：

Layout：设置了页面的布局文件路径为 "~/Shared/Layout.cshtml"，这意味着当前页面将使用 Layout.cshtml 文件作为布局。

Page.Title：设置了页面的标题为 "Home Page"。

接着，在 HTML 部分，我们使用 @Page.Title 将页面标题动态地呈现在 <title> 标签中，这样就确保每个页面都有自己的标题。页面的主要内容放置在 <body> 中，包括一个欢迎标题和一段简短的内容。

Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <title>@Page.Title</title>
</head>
<body>
    <header>
        <h2>My Website</h2>
    </header>
    
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
    
    <main>
        @RenderBody()
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

在上面的示例中，我们在 Home.cshtml 页面中设置了 Layout 和 Page.Title 属性，然后在布局文件 Layout.cshtml 中使用了这些属性。这样，每个页面都能使用相同的布局和标题，并且可以根据需要设置不同的页面内容。

Web Pages - 文件

使用文本文件：

文本文件通常用于存储网站数据，常见格式有 .txt、.xml 和 .csv。
通过读取文本文件，您可以在网页上显示文件中的数据。

读取并显示文本文件中的数据：

@{
    // 找到文本文件的物理路径
    var dataFile = Server.MapPath("~/App_Data/Persons.txt");
    
    // 读取文本文件的所有行，并存储在数组中
    string[] userData = File.ReadAllLines(dataFile);
}

<!DOCTYPE html>
<html>
<body>

<h1>Reading Data from a File</h1>
@foreach (string dataLine in userData)
{
    // 遍历每一行数据，以逗号分隔数据项
    foreach (string dataItem in dataLine.Split(','))
    {
        @dataItem <text>&nbsp;</text> <!-- 显示数据项 -->
    }
    <br /> <!-- 换行显示下一行数据 -->
}
</body>
</html>

这段代码演示了如何读取并显示文本文件中的数据：

使用 Server.MapPath 方法找到文本文件的物理路径。
使用 File.ReadAllLines 方法读取文本文件的所有行，并将它们存储在名为 userData 的数组中。
在 HTML 中，使用 @foreach 循环遍历 userData 数组中的每一行数据。
在每一行中，使用内部的 @foreach 循环遍历逗号分隔的每个数据项，并将它们显示在网页上。

各种帮助器

WebGrid 帮助器：

WebGrid 帮助器用于在网页上显示数据，它自动创建 HTML 表格来展示数据。
提供了不同的格式化选项，支持数据分页显示，并且可以通过点击列表标题进行排序。
数据来源可以是数组、数据库或者文件。

@{
    var data = new[]{
        new { ID = 1, Name = "John", Age = 30 },
        new { ID = 2, Name = "Alice", Age = 25 },
        new { ID = 3, Name = "Bob", Age = 35 }
    };
}

<!DOCTYPE html>
<html>
<head>
    <title>WebGrid Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>WebGrid Example</h2>
    @if(data != null && data.Any())
    {
        var grid = new WebGrid(data);
        @grid.GetHtml(columns: grid.Columns(
            grid.Column("ID", "ID"),
            grid.Column("Name", "Name"),
            grid.Column("Age", "Age")
        ))
    }
    else
    {
        <p>No data available.</p>
    }
</body>
</html>

这段代码演示了如何使用 WebGrid 帮助器在网页上显示数据。

在代码开头，创建了一个包含数据的数组 data，其中包括每个条目的 ID、Name 和 Age。

HTML 页面中的样式部分定义了一个简单的表格样式，用于美化显示数据。

在页面主体部分，使用 Razor 语法检查数据是否存在。如果数据不为空，则创建一个 WebGrid 实例，并使用 GetHtml 方法生成 HTML 表格，显示每个条目的 ID、Name 和 Age。

如果数据为空，则显示一条提示消息 "No data available."。

这样，通过 WebGrid 帮助器，可以轻松地在网页上展示数据，并且可以自定义表格的列以及样式。

Chart 帮助器：

Chart 帮助器用于显示各种类型的图表图像，支持多种格式化选项和标签。
可以通过数组、数据库或者文件来提供图表的数据。

1
2
3
4
5
6
7
8
9
10
11
@{
    var chart = new Chart(width: 600, height: 400)
        .AddTitle("Sales Report")
        .AddLegend("Sales by Month")
        .AddSeries(
            name: "2019",
            xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" },
            yValues: new[] { 100, 200, 300, 400, 500, 600 }
        )
        .Write();
}
这段代码创建了一个简单的图表，展示了2019年每个月的销售情况。具体解释如下：

使用 Chart 类创建了一个图表对象，指定了图表的宽度和高度。

使用 AddTitle 方法添加了图表的标题。

使用 AddLegend 方法添加了图表的图例。

使用 AddSeries 方法添加了一个数据系列，包括系列名称、X 轴的值（月份）和 Y 轴的值（销售额）。

最后，使用 Write 方法将图表呈现在页面上。

这样，通过 Chart 帮助器可以轻松创建各种类型的图表，并将其嵌入到网页中，用于可视化数据。

WebMail 帮助器：

WebMail 帮助器提供了使用 SMTP（Simple Mail Transfer Protocol）发送电子邮件的功能。
可以通过简单的 Razor 代码来发送电子邮件，例如发送表单数据或者站点反馈等。

@{
    var to = "recipient@example.com";
    var subject = "Test Email";
    var body = "This is a test email sent using WebMail helper.";
    var isBodyHtml = true;

    WebMail.SmtpServer = "smtp.example.com";
    WebMail.SmtpPort = 587;
    WebMail.EnableSsl = true;
    WebMail.UserName = "your-email@example.com";
    WebMail.Password = "your-email-password";

    WebMail.Send(to, subject, body, null, null, null, isBodyHtml);
}

<p>Email sent successfully!</p>

这段代码使用了 WebMail 帮助器发送了一封测试邮件。具体解释如下：

设置了邮件的收件人 (to)、主题 (subject)、正文 (body) 以及是否为 HTML 格式 (isBodyHtml)。
设置了 SMTP 服务器 (SmtpServer)、端口号 (SmtpPort)、启用 SSL 连接 (EnableSsl)、用户名 (UserName) 和密码 (Password)。
调用 WebMail.Send 方法发送邮件，传入收件人、主题、正文等参数。
最后，在页面上显示一条消息表示邮件发送成功。

这样，通过 WebMail 帮助器可以方便地在 ASP.NET Web Pages 中发送电子邮件。

WebImage 帮助器：

WebImage 帮助器用于管理网页中的图像，提供了图像的翻转、旋转、缩放、加水印等功能。

@{
    var imagePath = Server.MapPath("~/Images/sample.jpg");
    var webImage = new WebImage(imagePath);

    // 缩放图像
    webImage.Resize(width: 200, height: 150);

    // 旋转图像
    webImage.RotateLeft();

    // 添加水印
    webImage.AddTextWatermark("Watermark", fontColor: "White", fontSize: 20, fontFamily: "Arial", opacity: 50, padding: 10);

    // 保存处理后的图像
    var newImagePath = Server.MapPath("~/Images/sample_processed.jpg");
    webImage.Save(newImagePath);
}

<p>Image processed successfully!</p>

这段代码演示了如何使用 WebImage 帮助器对图像进行处理。具体解释如下：

使用 Server.MapPath 方法获取图像文件的物理路径。
创建 WebImage 对象并加载图像。
使用 Resize 方法调整图像大小为指定的宽度和高度。
使用 RotateLeft 方法将图像逆时针旋转90度。
使用 AddTextWatermark 方法在图像上添加文本水印，指定了字体颜色、字体大小、字体样式、透明度和边距。
使用 Save 方法保存处理后的图像到新的文件路径。
在页面上显示一条消息表示图像处理成功。

通过 WebImage 帮助器，可以方便地对网页中的图像进行各种处理操作。

第三方帮助器：

除了内建的 ASP.NET 帮助器外，还可以利用第三方帮助器来简化开发过程。这些帮助器可以处理电子邮件、数据库、多媒体、社交网络等方面的操作。通过 Razor，可以轻松地集成这些帮助器，并在网站开发中加速开发过程。

一些实例：

显示日期和时间：

<!DOCTYPE html>
<html>
<head>
    <title>Date and Time Example</title>
</head>
<body>
    <h1>Date and Time Example</h1>
    <p>The current date is: @DateTime.Now.ToShortDateString()</p>
    <p>The current time is: @DateTime.Now.ToShortTimeString()</p>
</body>
</html>

这个示例演示了如何使用C#代码在ASP.NET Web Pages中显示当前的日期和时间。

可重复使用的头部和底部：

header.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Header</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

footer.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Footer</title>
</head>
<body>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

这两个示例演示了如何创建可重用的头部和底部部分，您可以在页面中使用@RenderPage("header.cshtml")和@RenderPage("footer.cshtml")来包含它们。

基本的 HTML 表单：

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Form</title>
</head>
<body>
    <h1>Basic HTML Form</h1>
    <form action="ProcessForm.cshtml" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

这个示例展示了一个简单的HTML表单，包含姓名、电子邮件和消息字段，以及一个提交按钮。提交后，表单数据将发送到ProcessForm.cshtml进行处理。

Ｃ＃实例

基本的 C#：

For 循环：

@{
    for (int i = 0; i < 5; i++)
    {
        <p>@($"Iteration {i + 1}")</p>
    }
}

这个示例演示了如何使用C#中的for循环来输出一系列的文本。

For Each 循环：

@{
    var names = new string[] { "Alice", "Bob", "Charlie", "David" };
    foreach (var name in names)
    {
        <p>@name</p>
    }
}

这个示例演示了如何使用C#中的foreach循环来遍历一个数组并输出其中的每个元素。

While 循环：

@{
    int i = 0;
    while (i < 5)
    {
        <p>@($"Iteration {i + 1}")</p>
        i++;
    }
}

这个示例演示了如何使用C#中的while循环来输出一系列的文本，直到满足条件。

Array 数组：

@{
    var fruits = new string[] { "Apple", "Banana", "Orange", "Grapes" };
    foreach (var fruit in fruits)
    {
        <p>@fruit</p>
    }
}

这个示例演示了如何创建一个字符串数组，并使用foreach循环遍历数组中的每个元素。

If 条件：

@{
    int x = 10;
    if (x > 5)
    {
        <p>x is greater than 5</p>
    }
}

这个示例演示了如何使用C#中的if语句来判断条件并执行相应的代码块。

If Else 条件：

@{
    int x = 3;
    if (x > 5)
    {
        <p>x is greater than 5</p>
    }
    else
    {
        <p>x is less than or equal to 5</p>
    }
}

这个示例演示了如何使用C#中的if-else语句来根据条件执行不同的代码块。

Else If 条件：

@{
    int x = 3;
    if (x > 5)
    {
        <p>x is greater than 5</p>
    }
    else if (x == 5)
    {
        <p>x is equal to 5</p>
    }
    else
    {
        <p>x is less than 5</p>
    }
}

这个示例演示了如何使用C#中的if-else if-else语句来根据不同的条件执行不同的代码块。

Switch 条件：

@{
    int dayOfWeek = 3;
    switch (dayOfWeek)
    {
        case 1:
            <p>Monday</p>
            break;
        case 2:
            <p>Tuesday</p>
            break;
        case 3:
            <p>Wednesday</p>
            break;
        case 4:
            <p>Thursday</p>
            break;
        case 5:
            <p>Friday</p>
            break;
        default:
            <p>Weekend</p>
            break;
    }
}

这个示例演示了如何使用C#中的switch语句根据不同的条件执行不同的代码块。

数据库结合实例

使用数据库显示数据：

@{
    // 连接数据库，查询数据
    var db = Database.Open("YourDatabaseConnectionString");
    var data = db.Query("SELECT * FROM YourTable");

    // 显示数据
    foreach (var row in data)
    {
        <p>@row.ColumnName1 - @row.ColumnName2</p>
    }
}

这个示例演示了如何连接数据库，查询数据，并使用foreach循环显示数据库中的数据。

使用 WebGrid 显示数据：

@{
    // 连接数据库，查询数据
    var db = Database.Open("YourDatabaseConnectionString");
    var data = db.Query("SELECT * FROM YourTable");

    // 使用 WebGrid 显示数据
    var grid = new WebGrid(source: data);
}

<!DOCTYPE html>
<html>
<head>
    <title>WebGrid Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>WebGrid Example</h2>
    @grid.GetHtml()
</body>
</html>

首先，通过Database.Open方法连接到数据库，并使用db.Query方法执行SQL查询，将结果存储在变量data中。

然后，使用new WebGrid(source: data)创建了一个WebGrid对象，其中source参数指定了要在网格中显示的数据源。

在HTML部分，@grid.GetHtml()方法用于生成HTML表格，显示数据库查询结果。WebGrid会自动根据数据生成表头和表格内容，并应用一些默认的样式。

整个页面的样式定义在<style>标签中，用于设置表格的边框和单元格样式。

以下是使用Chart帮助器的示例，分别演示了根据数组、数据库和XML文件显示条形图和饼图的方法。

根据数组显示条形图：

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Sales by Product")
        .AddSeries(
            name: "Sales",
            xValue: new[] { "Product A", "Product B", "Product C", "Product D" },
            yValues: new[] { "100", "200", "150", "300" }
        );
}

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart Example</title>
</head>
<body>
    <h2>Bar Chart Example</h2>
    @myChart.Write()
</body>
</html>

根据数据库显示条形图：

@{
    var db = Database.Open("YourDatabaseConnectionString");
    var salesData = db.Query("SELECT ProductName, SalesAmount FROM SalesData");
    
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Sales by Product")
        .AddSeries(
            name: "Sales",
            xValue: salesData.Select(item => item.ProductName).ToArray(),
            yValues: salesData.Select(item => item.SalesAmount).ToArray()
        );
}

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart Example</title>
</head>
<body>
    <h2>Bar Chart Example</h2>
    @myChart.Write()
</body>
</html>

根据数据库显示饼图：

@{
    var db = Database.Open("YourDatabaseConnectionString");
    var salesData = db.Query("SELECT ProductName, SalesAmount FROM SalesData");
    
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Sales Distribution")
        .AddSeries(
            chartType: "Pie",
            xValue: salesData.Select(item => item.ProductName).ToArray(),
            yValues: salesData.Select(item => item.SalesAmount).ToArray()
        );
}

<!DOCTYPE html>
<html>
<head>
    <title>Pie Chart Example</title>
</head>
<body>
    <h2>Pie Chart Example</h2>
    @myChart.Write()
</body>
</html>

根据XML文件显示饼图：

@{
    var xmlData = XDocument.Load(Server.MapPath("~/App_Data/SalesData.xml"));
    var salesData = xmlData.Root.Elements("Product")
                        .Select(p => new {
                            ProductName = p.Element("Name").Value,
                            SalesAmount = p.Element("Sales").Value
                        });
    
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Sales Distribution")
        .AddSeries(
            chartType: "Pie",
            xValue: salesData.Select(item => item.ProductName).ToArray(),
            yValues: salesData.Select(item => item.SalesAmount).ToArray()
        );
}

<!DOCTYPE html>
<html>
<head>
    <title>Pie Chart Example</title>
</head>
<body>
    <h2>Pie Chart Example</h2>
    @myChart.Write()
</body>
</html>