ASP.NET 入门

作者： Tom FitzMacken

对于新的 Web 应用开发，我们建议 使用 Blazor。

注意

不再建议将 WebMatrix 用作 ASP.NET 网页的集成开发环境。 使用 Visual Studio 或 Visual Studio Code。

本指南和应用程序概述了 ASP.NET 网页（版本 2 或更高版本）和 Razor 语法，这是用于创建动态网站的轻型框架。 它还引入了用于创建页面和网站的 WebMatrix 工具。

级别：ASP.NET 网页的新增功能。
技能假设：HTML、基本级联样式表（CSS）。

你将在集的第一个教程中学习的内容：

• 什么是 ASP.NET 网页技术及其用途。
• 什么是 WebMatrix。
• 如何安装所有内容。
• 如何使用 WebMatrix 创建网站。

讨论的功能/技术：

• Microsoft Web 平台安装程序。
• WebMatrix。
• .cshtml 页面

Mike Pope 最初编写了本教程。 Tom FitzMacken 更新了 Microsoft WebMatrix 3。

本教程中使用的软件版本

• ASP.NET 网页 （Razor） 2
• WebMatrix 3

你应该知道什么？

我们假设你熟悉：

• HTML。 不需要深入的专业知识。 我们不会解释 HTML，但我们也不会使用任何复杂内容。 我们将提供指向 HTML 教程的链接，我们认为它们很有用。
• 级联样式表 （CSS） 。 与 HTML 相同。
• 基本数据库创意。 如果已对数据使用电子表格并对其进行排序和筛选，则我们通常假设在本教程集中具备专业知识级别。

我们还假设你有兴趣学习基本编程。 ASP.NET 网页使用名为 C# 的编程语言。 你不必在编程方面有任何背景，只是对它感兴趣。 如果你以前曾经在网页中编写过任何 JavaScript，则你有足够的背景。

请注意，如果你熟悉编程，你可能会发现，本教程集最初会缓慢移动，同时我们让新的程序员加快速度。 不过，当我们完成前几个教程时，要解释的基本编程将不太基本，并且内容将在更快的剪辑中继续前进。

你需要什么？

以下是需要做好的准备：

• 运行 Windows 8、Windows 7、Windows Server 2008 或 Windows Server 2012 的计算机。
• 实时 Internet 连接。
• 管理员权限（安装过程需要）。

什么是 ASP.NET 网页？

ASP.NET 网页是可用于创建动态网页的框架。 简单的 HTML 网页是静态的;其内容由页面中的固定 HTML 标记确定。 动态页面（如使用 ASP.NET 网页 创建的页面页面）允许使用代码动态创建页面内容。

动态页面允许你执行各种操作。 可以使用窗体请求用户输入，然后更改页面显示的内容或外观。 你可以从用户获取信息，将其保存在数据库中，然后稍后列出。 你可以从网站发送电子邮件。 你可以与 Web 上的其他服务（例如映射服务）进行交互，并生成从这些源集成信息的页面。

什么是 WebMatrix？

WebMatrix 是集成网页编辑器、数据库实用工具、用于测试页面的 Web 服务器以及将网站发布到 Internet 的功能的工具。 WebMatrix 是免费的，易于安装和易于使用。 （它也适用于纯 HTML 页面，以及 PHP 等其他技术。

实际上不必使用 WebMatrix 来处理 ASP.NET 网页。 可以使用文本编辑器创建页面，例如，通过使用有权访问的 Web 服务器来测试页面。 但是，WebMatrix 使这一切变得非常简单，因此这些教程将在整个过程中使用 WebMatrix。

关于这些教程

本教程集介绍了如何使用 ASP.NET 网页。 此介绍性教程集中总共有 9 个教程。 这是一系列教程集的一部分，它带你从 ASP.NET 网页新手到创建真实、专业的网站。

第一个教程集重点介绍了如何使用 ASP.NET 网页的基础知识。 完成后，可以处理其他教程集，这些教程集会选取此内容结束的位置，并更深入地浏览网页。

我们故意去容易的深入解释。 每当我们展示某些内容时，对于本教程，我们始终选择我们认为最容易理解的方式。 后面的教程集将更深入地介绍，并向你展示更高效或更灵活的方法（也更有趣）。 但这些教程需要先了解基础知识。

刚开始的教程集介绍了 ASP.NET 网页的这些功能：

• 介绍和获取所有安装内容。 （这是你在阅读的教程中）。
• ASP.NET 网页编程的基础知识。
• 创建数据库。
• 创建和处理用户输入表单。
• 在数据库中添加、更新和删除数据。

你将创建什么？

本教程集和后续教程围绕一个网站展开，你可以在其中列出你喜欢的电影。 你将能够输入电影、编辑和列出它们。 下面是将在本教程集中创建的几个页面。 第一个显示要创建的电影列表页面：

下面是允许向网站添加新电影信息的页面：

后续教程集基于此集构建，并添加更多功能，例如上传图片、让用户登录、发送电子邮件以及与社交媒体集成。

请参阅在 Azure 上运行的此应用

是否希望看到作为实时 Web 应用运行的已完成网站？ 只需单击以下按钮即可将应用的完整版本部署到 Azure 帐户。

需要一个 Azure 帐户才能将此解决方案部署到 Azure。 如果还没有帐户，则具有以下选项：

• 免费 打开 Azure 帐户 - 获得可用于试用付费 Azure 服务的信用额度，即使在使用完帐户后，也可以保留该帐户并使用免费的 Azure 服务。
• 激活 MSDN 订阅者权益 - MSDN 订阅每月提供可用于付费 Azure 服务的额度。

安装所有内容

可以使用 Microsoft 中的 Web 平台安装程序安装所有内容。 实际上，安装安装程序，然后使用它安装其他所有内容。

若要使用网页，必须至少安装装有 SP3 或 Windows Server 2008 或更高版本的 Windows XP。

在 ASP.NET 网站的网页页上 ，单击“ 安装”。

在安装 WebMatrix 之前，系统会要求你接受许可条款和隐私声明。

单击“运行”以开始安装。 （如果要保存安装程序，请单击 保存 ，然后从保存它的文件夹中运行安装程序。

此时会显示 Web 平台安装程序，可以安装 WebMatrix。 单击“安装”。

安装过程确定计算机上必须安装的内容并启动该过程。 根据确切安装的内容，此过程可能需要几分钟到几分钟的时间。 选择“ 我接受” 以接受许可条款。

Hello，WebMatrix

完成后，安装过程可以自动启动 WebMatrix。 如果没有，在 Windows 中 ，从“开始” 菜单启动 Microsoft WebMatrix。

首次启动 WebMatrix 时，你有机会使用 Microsoft 帐户登录到 azure Microsoft。 通过登录，你将通过 Azure 收到 10 个免费 Web 应用。 这些免费的 Web 应用提供了一种方便的方式来测试应用。 如果还没有 Azure 帐户，但拥有 MSDN 订阅，则可以 激活 MSDN 订阅权益。 否则，只需几分钟即可创建一个免费试用帐户。 有关详细信息，请参阅 Azure 免费试用。

现在无需登录即可继续学习本教程。 如果现在未登录，仍可以选择以后登录。 本教程系列的最后 一个主题 介绍如何将网站部署到 Azure;因此，需要登录才能完成该主题。

此时，请使用Microsoft帐户登录或选择右下角的“ 立即不 ”。

首先，你将创建一个空白网站并添加一个页面。 在稍后的本教程中，你将使用其中一个内置网站模板。

在开始窗口中，单击“ 新建”。

模板是不同类型的网站的预生成文件和页面。 若要查看默认可用的所有模板，请选择“模板库”选项。

在“快速启动”窗口中，从 ASP.NET 组中选择“空网站”，并将新网站命名为“WebPagesMovies”。

单击 “下一步” 。

如果已登录到 Microsoft 帐户，则会有机会在 Azure 上创建站点。 根据站点的名称，建议使用默认 名称 WebPagesMovies.azurewebsites.net ;但是，感叹号指示此名称在 Windows Azure 上不可用。 为简单起见，请选择“跳过”，绕过立即在 Azure 上创建网站。 本系列后面的部分将站点发布到 Azure。

WebMatrix 创建并打开网站：

顶部有快速访问工具栏和功能区。 在左下角，可以看到在任务之间切换的工作区选择器（站点、文件、数据库、报表）。 右侧是编辑器和报表的内容窗格。 在底部，你偶尔会看到消息的通知栏。

完成这些教程时，你将了解有关 WebMatrix 及其功能的详细信息。

创建网页

若要熟悉 WebMatrix 和 ASP.NET 网页，你将创建一个简单的页面。

在工作区选择器中 ，选择“文件 ”工作区。 通过此工作区，可以使用文件和文件夹。 左窗格显示站点的文件结构。 功能区更改以显示与文件相关的任务。

在功能区中，单击“新建”下的箭头，然后单击“新建文件”。

WebMatrix 显示文件类型列表。 选择 CSHTML，然后在 “名称 ”框中键入“HelloWorld”。 CSHTML 页是 ASP.NET 网页页。

单击“确定”。

WebMatrix 创建页面并在编辑器中打开它。

如你所看到的，页面包含大多数普通的 HTML 标记，顶部的块如下所示：

@{ 

}

这是为了添加代码，正如你很快就会看到的那样。

请注意，页面的不同部分（元素名称、属性和文本以及顶部的块）都采用不同的颜色。 这称为 语法突出显示，使所有内容更加清晰。 这是一项功能，可以轻松地在 WebMatrix 中使用网页。

添加和元素的内容<head><body>，如以下示例所示。 （如果需要，只需复制以下块，并将整个现有页面替换为此代码。

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

在“快速访问工具栏”或 “文件 ”菜单中，单击“ 保存”。

测试页面

在“文件”工作区中，右键单击 HelloWorld.cshtml 页面，然后单击浏览器中的“启动”。

WebMatrix 启动一个内置 Web 服务器（IIS Express），可用于测试计算机上的页面。 （如果没有 WebMatrix 中的 IIS Express，则必须在某个位置将页面发布到 Web 服务器，然后才能对其进行测试。页面显示在默认浏览器中。

请注意，在 WebMatrix 中测试页面时，浏览器中的 URL 类似于 http://localhost:33651/HelloWorld.cshtml. 名称 localhost 引用本地服务器，这意味着页面由自己的计算机上的 Web 服务器提供。 如前所述，WebMatrix 包括一个名为 IIS Express 的 Web 服务器程序，在启动页面时运行。

localhost 后的数字（例如 localhost：33651）是指计算机上的端口号。 这是 IIS Express 用于此特定网站的“通道”数量。 创建网站时，端口号是从 1024 到 65536 范围内随机选择的，对于创建的每个网站都是不同的。 （当你测试自己的站点时，端口号几乎肯定会不同于 33561。通过为每个网站使用不同的端口，IIS Express 可以保持它与之通信的站点的直接位置。

稍后将站点发布到公共 Web 服务器时，不再会在 URL 中看到 localhost 。 此时，你将看到更典型的 URL，例如 http://myhostingsite/mywebsite/HelloWorld.cshtml 或页面是什么。 本教程系列稍后将详细介绍如何发布网站。

添加一些服务器端代码

关闭浏览器并返回到 WebMatrix 中的页面。

向代码块添加一行，使其类似于以下代码：

@{
   var currentDateTime = DateTime.Now;
}

这是一点点 Razor 代码。 很明显，它获取当前日期和时间，并将该值放入名为 /&a0> 的变量中。currentDateTime 在下一教程中，你将详细了解 Razor 语法。

在页面正文中，在 <p>Hello World!</p> 元素后面添加以下内容：

<p>Right now it's @currentDateTime</p>

此代码获取放入 currentDateTime 顶部变量的值，并将其插入页面的标记中。 该@字符标记页面中的 ASP.NET 网页代码。

再次运行页面（WebMatrix 在运行页面之前保存所做的更改）。 这一次，你将在页面中看到日期和时间。

等待片刻，然后在浏览器中刷新页面。 日期和时间显示已更新。

在浏览器中，查看页面源。 其内容与以下标记类似：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

请注意 @{ } ，顶部的块不存在。 另请注意，日期和时间显示的实际字符字符串（1/18/2012 2:49:50 PM 或任何），不像 @currentDateTime 在 .cshtml 页面中所做的那样。 这里发生的事情是，当你运行页面时，ASP.NET 处理了标记 @的所有代码（在本例中很少）。 该代码生成输出，并且该输出已插入到页面中。

这就是 ASP.NET 网页

阅读 ASP.NET 网页生成动态 Web 内容时，你在此处看到的内容就是这个想法。 刚刚创建的页面包含之前看到的相同 HTML 标记。 它还可以包含可执行各种任务的代码。 在此示例中，它执行了获取当前日期和时间的简单任务。 正如你所看到的，你可以将代码与 HTML 交错，以在页面中生成输出。 当某人在浏览器中请求 .cshtml 页面时，ASP.NET 在 Web 服务器手中时处理该页面。 ASP.NET 将代码的输出（如果有）作为 HTML 插入到页面中。 代码处理完成后，ASP.NET 将生成的页面发送到浏览器。 所有浏览器都获得 HTML。 下面是一个关系图：

这个想法很简单，但代码可以执行许多有趣的任务，并且有许多有趣的方法，你可以在其中动态向页面添加 HTML 内容。 ASP.NET .cshtml 页面（如任何 HTML 页面）还可以包括在浏览器本身（JavaScript 和 jQuery 代码）中运行的代码。 你将在本教程集和后续教程中了解所有这些内容。

下一步

在本系列教程的下一教程中，你将探索 ASP.NET 网页编程。

其他资源

从头开始创建 ASP.NET 网站。 这是一个专门介绍如何使用 WebMatrix（而不是 ASP.NET 网页）的教程。 本文更详细地介绍了 WebMatrix 的某些附加功能，本教程集中未介绍这些功能。