使用 ASP.NET 入门

作者 Tom FitzMacken

对于新的 Web 应用程序开发，建议使用 Razor Pages。 有关详细信息，请参阅 Razor Pages 入门。

注意

不再建议将 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 页

迈克·波普最初写了本教程。 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 XP 或 Windows Server 2008 或更高版本。

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

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

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

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

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

Hello， WebMatrix

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

首次启动 WebMatrix 时，你将有机会使用 Microsoft 帐户登录到 Microsoft Azure。 登录后，你将通过 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 或页面是什么。 你将在本系列教程的后面部分详细了解如何发布网站。

添加一些Server-Side代码

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

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

@{
   var currentDateTime = DateTime.Now;
}

这是一些 Razor 代码。 很明显，它会获取当前日期和时间，并将该值放入名为 的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或任何) 的实际字符串，这与 .cshtml 页中的内容不同@currentDateTime。 此处发生的情况是，在运行页面时，ASP.NET 处理的所有代码 (很少，在这种情况下，) 标记了 @。 代码生成输出，并且该输出已插入页面。

这就是 ASP.NET 网页

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

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

即将推出下一步

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

其他资源

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

下一页