ASP.NET 网页简介 - 编程基础知识

2024-07-16

本教程概述了如何使用 Razor 语法在 ASP.NET 网页中编程。

学习内容：

用于在 ASP.NET 网页中进行编程的基本“Razor”语法。

一些基本 C#，这是你将使用的编程语言。

网页的一些基本编程概念。

如何安装包（包含预生成代码的组件）以用于站点。

如何使用 帮助程序 执行常见的编程任务。

讨论的功能/技术：

NuGet 和包管理器。

帮助 Gravatar 程序。

本教程主要介绍你将用于 ASP.NET 网页的编程语法。你将了解 以 C# 编程语言编写的 Razor 语法 和代码。在上一教程中，你看到了此语法的一瞥;在本教程中，我们将介绍更多语法。

我们承诺，本教程涉及在单个教程中看到的最编程，也是仅关于编程的唯一教程。在此集中的剩余教程中，你将实际创建用于执行有趣操作的页面。

你还将了解 帮助程序。帮助程序是一个组件（打包的代码片段），可以添加到页面。帮助程序为你执行工作，否则可能很繁琐或复杂。

创建使用 Razor 播放的页面

在本部分中，你将使用 Razor 进行一些操作，以便了解基本语法。

启动 WebMatrix（如果尚未运行）。你将使用在上一教程中创建的网站（网页入门）。若要重新打开它，请单击“我的网站”，然后选择“WebPageMovies”

Web 矩阵开始屏幕的屏幕截图，其中显示了“打开网站”选项和突出显示了红色矩形的“我的网站”。

选择“文件”工作区。

在功能区中，单击“新建”以创建页面。选择 CSHTML 并命名新页面 TestRazor.cshtml。

单击“确定”。

将以下内容复制到文件中，完全替换已存在的内容。

注意

将示例中的代码或标记复制到页面中时，缩进和对齐方式可能与教程中不同。不过，缩进和对齐方式不会影响代码的运行方式。

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

检查示例页

你看到的大多数内容都是普通 HTML。但是，顶部有以下代码块：

@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

请注意以下有关此代码块的事项：

@ 字符告诉 ASP.NET 以下代码是 Razor 代码，而不是 HTML。 ASP.NET 将 @ 字符后的所有内容视为代码，直到它再次进入一些 HTML。（在本例中 <，就是！DOCTYPE> 元素。
如果代码有多个行，大括号（{ 和 }）将 Razor 代码块括起来。大括号告诉 ASP.NET 该块的代码开始和结束的位置。
// 字符标记注释，即不会执行的代码的一部分。
每个语句必须以分号结尾（;)。（不过，不是评论。
可以在变量中存储值，使用关键字 var 创建（声明）。创建变量时，为其指定一个名称，该名称可以包括字母、数字和下划线（_）。变量名称不能以数字开头，不能使用编程关键字的名称（如 var）。
将字符串（如“ASP.NET”和“网页”）括在引号中。（它们必须是双引号。数字不以引号表示。
引号外的空格无关紧要。换行符大多无关紧要：例外情况是不能跨行用引号拆分字符串。缩进和对齐并不重要。

此示例中并不明显的内容是，所有代码都区分大小写。这意味着变量 TheSum 不同于可能命名为 theSum 或 thesum 的变量。同样，var 是关键字，但 Var 不是。

对象和属性和方法

然后是表达式 DateTime.Now。简单来说，DateTime 是一个对象。对象是一种可以编程的对象：页面、文本框、文件、图像、Web 请求、电子邮件、客户记录等。对象具有描述其特征的一个或多个属性。文本框对象具有 Text 属性（等等）、请求对象具有 Url 属性（和其他属性）、电子邮件具有 From 属性和 To 属性等。对象还具有 其可执行的“谓词”方法 。你将处理很多对象。

如示例中所示，DateTime 是一个对象，可用于对日期和时间进行编程。它具有一个名为 Now 的属性，该属性返回当前日期和时间。

使用代码在页面中呈现标记

在页面正文中，请注意以下事项：

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

同样，@ 字符告诉 ASP.NET 以下代码，而不是 HTML。在标记中，可以添加 @ 后跟代码表达式，ASP.NET 将立即呈现该表达式的值。在此示例中， @a 将呈现名为 a 的变量的值、 @product 呈现名为 product 的变量中的任意值，依此呈现。

不过，你并不局限于变量。在下面的几个实例中，@ 字符位于表达式前面：

@（a*b）呈现变量 a 和 b 中任何内容的乘积。（* 运算符表示乘法。）
@（technology + “ + product）在连接变量技术和产品后呈现值，并在两者之间添加一个空间。串联字符串的运算符（+）与用于添加数字的运算符相同。 ASP.NET 通常可以判断你使用的是数字还是字符串，并使用 + 运算符执行正确的操作。
@Request.Url 呈现 Request 对象的 Url 属性。 Request 对象包含有关浏览器当前请求的信息，当然，Url 属性包含该当前请求的 URL。

该示例还旨在向你展示你可以以不同的方式执行工作。可以在顶部的代码块中执行计算，将结果放入变量中，然后在标记中呈现变量。或者，可以在标记中的表达式中执行计算。你使用的方法取决于你正在执行的操作，在某种程度上取决于自己的偏好。

查看操作中的代码

右键单击文件的名称，然后在浏览器中选择“启动”。在浏览器中看到页面，其中包含在页面中解析的所有值和表达式。

在浏览器窗口中运行的“测试 Razor”页的屏幕截图，其中显示了已解析的值和表达式的三个框。

在浏览器中查看源。

测试 Razor 页面源的屏幕截图，将页面源与呈现的 Web 浏览器输出进行比较。

正如你在上一教程中的体验所期望的那样，Razor 代码都不在页面中。你看到的就是实际显示值。运行页面时，实际上正在向 WebMatrix 中内置的 Web 服务器发出请求。收到请求后，ASP.NET 解析所有值和表达式并将其值呈现到页面中。然后，它将页面发送到浏览器。

提示

Razor 和 C#

到目前为止，我们已经说过你正在使用 Razor 语法。这是真的，但它不是完整的故事。你使用的实际编程语言称为 C# 。 C# 是由十多年前Microsoft创建的，已成为创建 Windows 应用的主要编程语言之一。有关如何命名变量以及如何创建语句等的所有规则实际上是 C# 语言的所有规则。

Razor 更具体地指一组关于如何将此代码嵌入页面的一小部分约定。例如，使用 @ 标记页面中的代码并使用 @{ } 嵌入代码块的约定是页面的 Razor 方面。帮助程序也被视为 Razor 的一部分。 Razor 语法在多个位置使用，而不仅仅是在 ASP.NET 网页中使用。（例如，它也用于 ASP.NET MVC 视图。

我们提到这一点，因为如果你查找有关编程 ASP.NET 网页的信息，你会发现很多对 Razor 的引用。但是，许多引用不适用于你正在执行的操作，因此可能会令人困惑。事实上，许多编程问题确实与使用 C# 或 ASP.NET 有关。因此，如果你专门查找有关 Razor 的信息，则可能无法找到所需的答案。

添加一些条件逻辑

在页面中使用代码的一大功能是，你可以根据各种条件更改所发生的情况。在本教程的这一部分，你将通过一些方法来更改页面中显示的内容。

该示例将简单且有些复杂，以便我们可以专注于条件逻辑。你将创建的页面将执行以下操作：

根据页面是否是首次显示页面还是单击按钮来提交页面，页面上显示不同的文本。这是第一个条件测试。
仅在 URL 的查询字符串中传递特定值（http://...）时显示消息？show=true）。这是第二个条件测试。

在 WebMatrix 中，创建一个页面并将其命名为 TestRazorPart2.cshtml。（在功能区中，单击新建，选择 CSHTML，命名该文件，然后单击“ 确定”。

将该页的内容替换为以下内容：

@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

顶部的代码块使用一些文本初始化名为消息的变量。在页面正文中，消息变量的内容显示在 p> 元素内<。标记还包含用于<创建提交按钮的输入>元素。

运行页面以查看其工作原理。目前，它基本上是静态页面，即使单击“提交”按钮。

返回到 WebMatrix。在代码块内，在初始化消息的行后面添加以下突出显示的代码：

@{
    var message = "This is the first time you've requested the page.";

    if(IsPost) {
        message = "Now you've submitted the page.";
    }
}

if { } 块

刚刚添加的内容是条件。在代码中，if 条件的结构如下所示：

if(some condition){
    One or more statements here that run if the condition is true;
}

要测试的条件位于括号中。它必须是返回 true 或 false 的值或表达式。如果条件为 true，ASP.NET 运行大括号内的语句或语句。（这些是当时的逻辑的一部分。如果条件为 false，则会跳过代码块。

下面是可在 if 语句中测试的一些条件示例：

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

可以使用逻辑运算符或比较运算符针对值或表达式测试变量：等于（==）、大于（）、小于（><）、大于或等于（=）、小于或等于（><=）。！= 运算符表示不等于 — 例如，如果（a ！= 0）表示 a 不等于 0。

注意

请确保请注意，等于（==）的比较运算符与 =不同。 = 运算符仅用于赋值（var a=2）。如果将这些运算符混合在一起，你将收到错误，或者你会收到一些奇怪的结果。

若要测试某个内容是否为 true，完整的语法为 if（IsDone == true）。但你也可以使用快捷方式 if（IsDone）。如果没有比较运算符，ASP.NET 假定要测试 true。

此 ! 运算符本身表示逻辑 NOT。例如，条件 if（！IsPost）表示 IsPost 是否为 true。

可以使用逻辑 AND（&& 运算符）或逻辑 OR （|| 运算符）合并条件。例如，上述示例中的最后一个条件意味着 FileProcessingIsDone 未设置为 true AND displayMessage 设置为 false。

其他块

如果块是最后一件事：一个 if 块可以后跟另一个块。另一个块很有用，在条件为 false 时，必须执行不同的代码。下面是一个简单示例：

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

在本系列教程的后续教程中，你将看到一些示例，其中使用其他块非常有用。

测试请求是否为提交（帖子）

还有更多，但让我们回到示例，该示例的条件 if（IsPost）{ ... }。 IsPost 实际上是当前页的属性。首次请求页面时，IsPost 返回 false。但是，如果单击某个按钮或以其他方式提交页面（即发布该页面），IsPost 将返回 true。因此，IsPost 允许你确定你是否正在处理表单提交。（就 HTTP 谓词而言，如果请求是 GET 操作，IsPost 将返回 false。如果请求是 POST 操作，则 IsPost 返回 true。）在后面的教程中，你将使用输入表单，其中此测试特别有用。

运行页面。由于这是你第一次请求页面，因此你会看到“这是你第一次请求页面”。该字符串是初始化消息变量的值。存在 if（IsPost）测试，但此时返回 false，因此如果块未运行，则代码内部的代码将返回 false。

单击“提交”按钮。再次请求页面。与之前一样，消息变量设置为“这是第一次...”。但这次，测试 if（IsPost）返回 true，因此，如果块运行，则代码在内。代码将消息变量的值更改为其他值，即标记中呈现的值。

现在，在标记中添加 if 条件。在包含“提交”按钮的 <p> 元素下方，添加以下标记：

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

你要在标记中添加代码，因此必须以 @开头。然后，如果测试类似于前面在代码块中添加的测试。不过，在大括号内，你正在添加普通 HTML，至少，它很普通，直到它到达 @DateTime.Now。这是另一点 Razor 代码，因此必须再次在它前面添加 @ 。

此处的一点是，可以在顶部和标记中的代码块中同时添加条件。如果在页面正文中使用 if 条件，则块内的行可以是标记或代码。在这种情况下，只要混合标记和代码，就如实一样，必须使用 @ 来明确 ASP.NET 代码的位置。

运行页面，然后单击“ 提交”。这一次，您不仅在提交时看到其他邮件（“现在已提交...”），还会看到一封列出日期和时间的新邮件。

在 Web 浏览器中运行的测试 Razor 2 页面的屏幕截图，其中显示了页面提交后显示的时间戳消息。

测试查询字符串的值

再测试一次。这一次，你将添加一个测试名为显示可能传入查询字符串的值的 if 块。（如下所示： http://localhost:43097/TestRazorPart2.cshtml?show=true你将更改页面，以便仅当显示值为 true 时，才会显示你显示的消息（“这是第一次...”等）。

在页面顶部的代码块底部（但内部）添加以下内容：

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

完整的代码块现在如以下示例所示。（请记住，将代码复制到页面中时，缩进看起来可能有所不同。但这不会影响代码的运行方式。

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

块中的新代码将名为 showMessage 的变量初始化为 false。然后，它会执行一个 if 测试来查找查询字符串中的值。首次请求页面时，该页面的 URL 如下所示：

http://localhost:43097/TestRazorPart2.cshtml

该代码确定 URL 是否包含查询字符串中显示的变量，如下所示的 URL 版本：

http://localhost:43097/TestRazorPart2.cshtml？show=true

测试本身将查看 Request 对象的 QueryString 属性。如果查询字符串包含名为 show 的项，如果该项设置为 true，则 if 块运行并将 showMessage 变量设置为 true。

这里有一个技巧，正如你所看到的。与名称一样，查询字符串是一个字符串。但是，如果要测试的值是布尔值（true/false），则只能测试 true 和 false。在测试查询字符串中显示变量的值之前，必须将其转换为布尔值。这是 AsBool 方法执行的操作 — 它采用字符串作为输入，并将其转换为布尔值。显然，如果字符串为“true”，AsBool 方法会将该值转换为 true。如果字符串的值是任何其他值，则 AsBool 返回 false。

提示

数据类型和 As（）方法

到目前为止，我们只说，当你创建变量时，你将使用关键字 var。不过，这不是整个故事。为了操作值（要添加数字或连接字符串，或比较日期或测试 true/false），C# 必须处理值的相应内部表示形式。 C# 通常可以根据对值执行的操作来弄清楚该表示形式（即数据的类型）。 不过，现在和之后，它无法做到这一点。如果没有，则必须通过显式指示 C# 如何表示数据来提供帮助。 AsBool 方法会告知 C# 应将字符串值“true”或“false”视为布尔值。存在类似的方法来表示字符串作为其他类型的字符串，如 AsInt（视为整数）、AsDateTime（视为日期/时间）、AsFloat（被视为浮点数），等等。使用这些 As（）方法时，如果 C# 无法按请求表示字符串值，则会看到错误。

在页面的标记中，删除或注释掉此元素（此处显示已注释掉）：

<!-- <p>@message</p> -->

在删除或注释掉该文本的位置，添加以下内容：

@if(showMessage) {
  <p>@message</p>
}

如果测试显示 showMessage 变量为 true，则呈现一个 <包含消息变量值的 p> 元素。

条件逻辑摘要

如果不完全确定刚刚完成的内容，下面是一个摘要。

消息变量初始化为默认字符串（“这是第一次...”）。
如果页面请求是提交的结果（帖子），邮件的值将更改为“现在你已提交...”
showMessage 变量初始化为 false。
如果查询字符串包含？show=true，则 showMessage 变量设置为 true。
在标记中，如果 showMessage 为 true，则会呈现一个 <显示消息值的 p> 元素。（如果 showMessage 为 false，则标记中此时不会呈现任何内容。
在标记中，如果请求是帖子， <则会呈现显示日期和时间的 p> 元素。

运行页面。没有消息，因为 showMessage 为 false，因此在标记中，if（showMessage）测试返回 false。

单击“提交” 。你会看到日期和时间，但仍没有消息。

在浏览器中，转到 URL 框，将以下内容添加到 URL 末尾：？show=true，然后按 Enter。

Web 浏览器中“测试 Razor 2”页的屏幕截图，其中显示了 U R L 框中的查询字符串。

再次显示页面。（由于更改了 URL，因此这是一个新请求，而不是提交请求。再次单击“ 提交 ”。该消息再次显示，日期和时间也一样。

Web 浏览器中的“测试 Razor 2”页面的屏幕截图，该页面提交后，U R L 框中带有查询字符串。

在 URL 中，将？show=true 更改为？show=false，然后按 Enter。再次提交页面。页面返回到启动方式 - 无消息。

如前所述，此示例的逻辑有点精心尝试。但是，如果要出现在你的许多页面中，它将采用你在此处看到的一个或多个表单。

安装帮助程序（显示 Gravatar 图像）

人们经常希望在网页上执行的某些任务需要大量的代码或需要额外的知识。示例：显示数据图表;在页面上放置 Facebook“赞”按钮;从网站发送电子邮件;裁剪或调整图像大小;为网站使用PayPal。为便于执行此类操作，ASP.NET 网页允许你使用帮助程序。帮助程序是为站点安装的组件，通过仅使用几行 Razor 代码来执行典型任务。

ASP.NET 网页内置了一些帮助程序。但是，使用 NuGet 包管理器提供的包（加载项）中提供了许多帮助程序。 NuGet 允许你选择要安装的包，然后它负责安装的所有详细信息。

在本教程的这一部分，你将安装一个帮助程序，用于显示 Gravatar（“全局识别的头像”）图像。你将了解两件事。一种方法是查找和安装帮助程序。你还将了解帮助程序如何使你能够轻松执行其他需要执行的操作，只需使用大量代码即可自行编写。

可以在 Gravatar 网站上 http://www.gravatar.com/注册自己的 Gravatar，但创建 Gravatar 帐户来执行本教程的这一部分并不重要。

在 WebMatrix 中，单击 “NuGet ”按钮。

Web 矩阵用户界面的屏幕截图，其中突出显示了红色矩形的“Nu Get”按钮。

这会启动 NuGet 包管理器并显示可用包。（并非所有包都是帮助程序;有些将功能添加到 WebMatrix 本身，有些是其他模板，等等。可能会收到有关版本不兼容的错误消息。可以通过单击“确定”并继续学习本教程来忽略此错误消息。

Web 矩阵中 Nu Get 库对话框的屏幕截图，其中显示了要安装的可用包的列表。

在搜索框中，输入“asp.net 帮助程序”。 NuGet 显示与搜索词匹配的包。

Web 矩阵中 Nu Get 库对话框的屏幕截图，其中突出显示了带有红色矩形的 A P 点 N E T Web 帮助程序库项。

ASP.NET Web 帮助程序库包含用于简化许多常见任务的代码，包括使用 Gravatar 图像。选择 ASP.NET Web 帮助程序库包，然后单击“安装”以启动安装程序。当系统询问是否要安装包时，请选择“是”，并接受完成安装的条款。

这就可以了。 NuGet 下载并安装所有内容，包括可能需要的任何其他组件（依赖项）。

如果出于某种原因需要卸载帮助程序，该过程非常相似。 单击“NuGet”按钮，单击“已安装”选项卡，然后选择要卸载的包。

在页面中使用帮助程序

现在，你将使用刚安装的帮助程序。向页面添加帮助程序的过程与大多数帮助程序类似。

在 WebMatrix 中，创建一个页面并将其命名为 GravatarTest.cshml。（你正在创建一个特殊页面来测试帮助程序，但你可以在网站中的任何页面中使用帮助程序。

在正文>元素内<，添加 div <> 元素。在 div> 元素中<，键入以下命令：

@Gravatar。

@ 字符是用于标记 Razor 代码的同一个字符。 Gravatar 是正在使用的帮助程序对象。

一旦键入句点（.），WebMatrix 就会显示 Gravatar 帮助程序提供的方法（函数）列表：

源编辑器的屏幕截图，其中显示了 Gravatar 帮助程序 IntelliSense 下拉列表，其中突出显示了黄色的“获取 H T M L”项。

此功能称为 IntelliSense。它通过提供上下文适当的选择来帮助你编写代码。 IntelliSense 适用于 WEBMatrix 中支持的 HTML、CSS、ASP.NET 代码、JavaScript 和其他语言。这是另一项功能，可更轻松地在 WebMatrix 中开发网页。

在键盘上按 G，可以看到 IntelliSense 会查找 GetHtml 方法。按 Tab。IntelliSense 会为你插入所选方法（GetHtml）。键入一个打开的括号，并注意到自动添加右括号。在两个括号之间用引号键入电子邮件地址。如果你有 Gravatar 帐户，将返回个人资料图片。如果没有 Gravatar 帐户，则返回默认图像。完成后，该行如下所示：

@Gravatar.GetHtml("john@contoso.com")

现在，在浏览器中查看页面。将显示你的图片或默认图像，具体取决于你是否有 Gravatar 帐户。

Web 浏览器窗口的屏幕截图，其中显示了具有眼镜的男子的用户选择的 Gravatar 图像。 Web 浏览器窗口的屏幕截图，其中显示了样式化和旋转字母 G 的默认 Gravatar 图像。

若要了解帮助程序正在为你执行的操作，请查看浏览器中页面的源。除了在页面中拥有的 HTML，还会看到包含标识符的图像元素。这是帮助程序呈现到页面所在的位置 @Gravatar.GetHtml的代码。帮助程序获取你提供的信息，并生成了直接与 Gravatar 对话的代码，以便返回提供帐户的正确图像。

GetHtml 方法还允许你通过提供其他参数来自定义映像。以下代码演示如何请求图像的宽度和高度为 40 像素，如果指定的帐户不存在，则使用名为 wavatar 的指定默认图像。

@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

此代码生成类似于以下结果的内容（默认图像将随机变化）。

Web 浏览器页面的屏幕截图，其中显示了新的指定默认图像，其中包含 Get H T M L 方法中定义的集参数。

下一步

为使本教程保持简短，我们只需要关注一些基础知识。当然，Razor 和 C# 还有更多内容。完成这些教程后，你将了解详细信息。如果现在有兴趣详细了解 Razor 和 C# 的编程方面，可在此处阅读更全面的简介：使用 Razor 语法 ASP.NET Web 编程简介。

下一教程介绍如何使用数据库。在本教程中，你将开始创建示例应用程序，以便列出你喜欢的电影。

TestRazor 页面的完整列表

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

TestRazorPart2 页的完整列表

@{
   var message = "This is the first time you've requested the page.";

   if (IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if (Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

GravatarTest 页面的完整列表

@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

通过