ASP.NET 网页

项目
07/13/2015

WebMatrix 简介

Clark Sell

现在，市场上并不缺少供 Web 开发人员使用的工具。事实上，很有可能您已经使用 Visual Studio 很长时间了。如果您听说过 Microsoft WebMatrix，您可能会好奇它是什么、它对您的意义何在，甚至会好奇您为什么应该关注它。

在本文中，我将探讨这几个问题，还有其他一些问题。首先，我将介绍 ASP.NET 堆栈最近的几个变化。然后介绍如何设置 WebMatrix 并创建一个“Hello Web”应用程序。之后我将展示几个附加功能，例如布局、帮助程序、数据访问、报告，当然还有部署。在介绍上述所有内容之前，我将首先定义 WebMatrix。

WebMatrix 是全新的一站式网站编辑器，适用于 ASP.NET 网页。它面向不同的 Web 开发人员，并且面向的 ASP.NET 组件也与一般的 Microsoft 产品有所不同。WebMatrix 并不是 Visual Studio 的竞争产品，而是对 Visual Studio 的补充，两者之间只是略有重叠。

您会发现 WebMatrix 的安装过程快速、轻松。这是因为整个软件包及其相关文件不足 50MB。软件包中包括文本编辑器、Web 服务器、数据库引擎和基础框架，基本上囊括了创建和部署网站时所需的一切。更令人称奇的是，WebMatrix 不仅适用于 ASP.NET，还支持 PHP 和 MySQL。本文将重点介绍 WebMatrix 的 .NET 功能。

新的 ASP.NET 堆栈

在过去几年中，ASP.NET 堆栈经历了一些变革。2009 年 4 月，ASP.NET MVC 发布，成为 ASP.NET 中针对 Web 应用程序开发的新选项。MVC（即“模型-视图-控制器”）模式并不是新鲜事物，但它在 ASP.NET 上的实现则是全新的。而且，Web 表单和 MVC 可以在一个网站中和谐共存。

为了正确引入到 ASP.NET 中，此框架进行了一些小的重构，以便 LEGO 部分可以轻松按照您选择的方式整合在一起。而到现在，Microsoft 刚刚发布了 ASP.NET MVC 3 和 WebMatrix。这些都是主要版本，包括很多新功能和增强功能。对于框架，有三个值得注意的新功能：Razor 分析器和视图引擎（简称 Razor）、ASP.NET 网页和 IIS Express。图 1 描述了所有相关的 ASP.NET 框架组件之间的关系。

图 1 Web 堆栈

在图 1 中，您可能注意到 Razor、IIS Express、SQL Compact 和 Web Deploy 是针对 ASP.NET Web 开发中其他领域的有效选项。而且，随着 ASP.NET MVC 3 的发布，Razor 现在已成为默认的视图引擎。我将在稍后更详细地介绍 Razor。

相反，ASP.NET 网页是作为 Web 表单和 MVC 的同类引入的。网页模型是以页面为中心的执行模型，与 PHP 类似。标记和代码都包含在页面本身之中，并且利用帮助程序来保持代码的简洁。您可以使用 Visual Basic 或 C# 在 Razor 中编写这些页面。

入门

WebMatrix 的入门非常简单。该程序是作为 Microsoft Web 平台安装程序（简称 WebPI）版本 3.0 的附属产品提供的。WebPI 是一个客户端项目，旨在让安装 SQL Express 或 ASP.NET MVC 等任务变得简单易行。有关 WebPI 的更多信息，请访问 microsoft.com/web/downloads/platform.aspx。若要快速安装，请访问 web.ms/webmatrix 并单击“立即下载”按钮。这不仅会安装 WebPI，还会安装 WebMatrix。安装完成之后，您将获得以下组件：

Microsoft WebMatrix（编辑器）
ASP.NET Web Pages with Razor Syntax（引擎和框架）
SQL Compact（数据库）
IIS Express（开发 Web 服务器）

我在前文中说过 WebMatrix 也支持 PHP 开发。尽管使用该软件包可立即进行开发，但如果您打算从头开始创建一个 PHP 网站，您还是需要安装 PHP 运行时。

Hello World Web

几乎每本技术书籍中都有经典的“Hello World”示例，因此我们也使用 WebMatrix 创建一个“Hello Web”网站。当您第一次打开 WebMatrix 时，您将看到一个对话框，其中包含四个选项。这四个选项代表了不同的起点：

我的网站
从文件夹创建网站
从模板创建网站
从 Web 库创建网站

“我的网站”只包含您处理过的网站。“从文件夹创建网站”将打开任何文件夹，以用作网站的根目录。该文件夹中列出的所有内容都将显示为该网站的组件。您还可以右键单击一个文件夹，然后选择“使用 Microsoft WebMatrix 作为网站打开”，这么做的效果与使用“从文件夹创建网站”相同。

WebMatrix 提供了很多预置的 Web 模板，可让您快速开始创建网站。选择“从模板创建网站”将根据模板设置您的文件夹结构，以及网站所需的所有源代码。撰写本文时，共有五种模板可用：空白网站、入门网站、面包店、照片库和日历。未来将提供更多模板。

“从 Web 库创建网站”可能是最有意思的。最近几年，您可能一直在使用 WebPI 并下载 Umbraco 或 WordPress 等应用程序，按照您的意愿自定义这些程序之后，再部署到托管提供商。遗憾的是，这一领域并不存在端到端的集成解决方案。现在，通过 WebMatrix，您可以真正做到从现有的应用程序（例如 Umbraco）开始开发。WebMatrix 和 WebPI 将设置好一切，让您可以从库中列出的某个应用程序开始创建您的网站。在 WebMatrix 完成相关的设置之后，您可以根据需要进行自定义，并使用 WebMatrix 的部署功能部署到您的托管提供商。

若要创建我们的 Hello Web 演示网站，首先要打开 WebMatrix 并选择“从模板创建网站”。选择“空白网站”模板并指定网站名称，在我们的示例中是 HelloWeb。WebMatrix 将使用您选择的名称创建一个空文件夹。现在选择“文件”选项卡，然后从主窗口中选择“向网站添加文件”。您应该注意的第一件事是新的文件扩展名。ASP.NET 网页有两种新的文件格式：CSHTML 和 VBHTML。扩展名的前两个字母分别代表 Razor 分析器在分析代码时应该使用的语言：C# 和 Visual Basic。我选择 CSHTML 文件，并命名为“HelloWeb.cshtml”。这将自动打开该文件，其中预填了一些默认的 HTML。

向已有的 body 元素中添加文字“Hello Web”，Hello Web 即大功告成。WebMatrix 会自动检测您安装的所有 Web 浏览器。您只需单击一次按钮，即可在某个浏览器或所有浏览器中运行网站。单击功能区中的“运行”将启动默认浏览器，并打开和呈现您关注的页面。当然，在 Hello Web 示例中，您将看到文字“Hello Web”。

在 Razor 中编写代码

如前所述，Razor 是一个代码和标记模板引擎。这意味着您要编写一些以后要进行解释并发送到请求者的语法。以下是我们的简单网页的 HTML，以及一小段调用 @DateTime.Now 的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
     <title>Hello World</title>
  </head>
  <body>
    Hello Web it's @DateTime.Now
  </body>
</html>

这段代码调用 .NET System.DateTime 类的 Now 方法。呈现的结果页面就如图 2 所示。

图 2 浏览器中的 Hello Web

我们也可以增加一点复杂性：创建一些属性、运行一个循环、混合一些 HTML，或者为了增添一点乐趣，将它们都混合起来。图 3 就是结果，为了简洁起见，一些有效的 HTML 被省略了。图 4 显示了所呈现的页面。

图 3 CodingRazor.cshtml

@{
  var cars = new string [] { "Camaro", "Avalanche", "Honda"};
  var emailAddress = "cars@something.com";
}
 
<ul>
  @foreach ( var car in cars ) {
    <li>
      <a href="http://@(@car).something.com">@car</a>
            
      @if ( car == "Camaro" ) {
        @: Is my favorite!
}
    </li>
  }
</ul>

To comment on this list of cars e-mail us at @emailAddress.

图 4 浏览器中呈现的 Cars 代码

让我们进一步了解一下图 3 中列出的某些代码。首先是超链接“http://@(@car).something.com”。您可以看到“@(@car)”。这里我需要明确告知 Razor，@car 是变量，因为它嵌入到 URL 中。下一个代码块是由“@:”定义的内容块。在循环中，有一条 If 语句，包含文字内容“Is my favorite!”。如果您删除“@:”，Razor 将不会进行编译，因为该文字内容没有包装到 HTML 中。最后，我们调用 @emailAddress，但使用句点结束句子。Razor 足够聪明，知道 @emailAddress 是变量，而不是类。精彩之处并未到此结束。查看该页面的源代码，您会发现浏览器中呈现的是纯粹的 HTML，如下所示：

<ul>
  <li><a href="http://Camaro.something.com">Camaro</a> Is my favorite!
</li>
  <li><a href="http://Avalanche.something.com">Avalanche</a> </li>
  <li><a href="http://Honda.something.com">Honda</a> </li>
</ul>

To comment on this list of cars e-mail us at cars@something.com

布局

Razor 引入一种新方法，以可重用的方式安排网站内容的结构。您可能了解 ASP.NET Web 表单中的“母版页”惯例，Razor 则使用布局来完成同样的事，但方法不尽相同。另外说一句，请务必注意这两种布局方法不能同时使用，也就是说母版页不能用作 Razor 的布局引擎，反之亦然。

为了开始布局，我将首先创建一个以下划线开头的页面，例如 _MasterLayout.cshtml。下划线页面无法直接在浏览器中呈现，必须由其他公共页面引用。从某种角度来讲，下划线页面就像程序集中标为“internal”的类。在该页面中，我将设计下游引用如何以及在何处插入页面的不同部分。有三个主类可以帮助您进行设计：RenderSection、RenderPage 和 RenderBody。 图 5 显示了使用这三个类的简单母版布局页。

图 5 RenderSection、RenderPage 和 RenderBody 类

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    @RenderSection("ClientScripts", required: false)
  </head>
  <body>
    @RenderPage("~/layout/shared/_header.cshtml")
    @RenderBody()
    @RenderPage("~/layout/shared/_footer.cshtml")
  </body>
</html>

任何要继承母版页的已定义布局的子页面都需要引用此母版页。第一行代码如下所示：

@{ Layout = "~/layout/shared/_MasterLayout.cshtml"; }
	
@section ClientScripts {
  Custom Script Here </br>
}
 
Some body content

在我的布局页中，我在页面的 head 部分定义了可选的部分 (@RenderSection)。因为它是可选的，子页面可以选择实现它。若要实现一个部分，请使用“@section”，后跟您在“@RenderSection”调用中指定的名称。页面的其余部分（在本示例中）假定为内容。这将由“@RenderBody”使用。请参见本文附带的在线源代码，以了解更详细的示例。

运行 default.cshtml（在下载的源代码中的“layout”文件夹中）将产生如图 6 所示的结果。所有部分均会正确呈现并作为纯粹的 HTML 发送到浏览器中。

图 6 运行 default.cshtml 得到的输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  Custom Script Here </br>
</head>
<body>
  <p>this was rendered from ~/layout/shared/_header.cshtml</p>
  Some body content
  <p>this was rendered from ~/layout/shared/_footer.cshtml</p>
</body>
</html>

帮你帮我

在软件行业，您总会听到这个词：重用。WebMatrix 引入了一个与 WordPress 或 jQuery 中使用的插件模型类似的概念。在 WebMatrix 中，这些插件称为帮助程序。其概念是我们所熟悉的：它们是具备可重用功能的已发布程序包，或是正确构建和打包以便轻松分发和使用的小段 .NET 代码。帮助程序包本身只是 NuGet 软件包（请参见 nuget.codeplex.com）。如果您是构建和使用帮助程序的 .NET 开发人员，会发现它与使用标准的 .NET 类没有区别，因为它其实就是 .NET 类。

帮助程序存储在基于云的 NuGet 源中并从其中检索。那么您如何找到这些神秘的帮助程序呢？在 WebMatrix 中打开网站后，单击“运行”。这将在浏览器中打开您的网站，例如：。然后浏览到。这是唯一会呈现的下划线页面，并且它位于您的本地计算机上。此时，系统将提示您创建密码，之后您将进入程序包管理器（请参见图 7）。

图 7 ASP.NET 网页管理程序包管理器

您可以查看三种类别的帮助程序：“已安装”、“联机”和“更新”。您还可以按照帮助程序的“来源”进行查看。该来源就是 NuGet 源。默认的源是 WebMatrix 帮助程序的正式目录，但您也可以添加其他来源。

现在我们就看到程序包的列表，让我们安装其中一个。为了演示，我们安装并探讨一个名为 Url Shortener Helper 的帮助程序（请参见 UrlShortenerHelper.CodePlex.com）。我构建的这个帮助程序的用途是缩短 URL，它利用了 bit.ly 这样的提供商。其概念很简单：获取 URL 并缩短，但隐藏了与实现缩短功能的提供商之间的交互。现在我们转到“联机”并为 UrlShortener 选择“安装”。这将下载该帮助程序，并安装和配置到您的网站中。

目前帮助程序的编写方式有两种：直接在 Razor 中编写，或在编译的程序集中编写。您应该选择哪一种呢？这要视具体情况而定。在我的 Url Shortener 示例中，代码其实是与外部提供商 API 的交互，没有发送任何 HTML。因此在我的方案中，帮助程序更适合打包为程序集。另一方面，Facebook 帮助程序要发送大量标记，因此以 CSHTML 帮助程序的形式编写。对于需要封装 API 调用并发送标记的帮助程序，还可以采取混合的方式：一些功能在 Razor 中完成，另一些在程序集中完成。

您可以在 UserVoiceHelper.codeplex.com 的 UserVoiceHelper 中找到这样的示例。

再回到我们的网站，您现在可以看到几个新的组件。在网站的根目录下，现在有一个 /bin 文件夹，其中有两个新程序集。这是 NuGet 安装我们的程序包之后留下的。根目录下还有一个 ReadMe.UrlShortener.txt 文件，其中包含如何使用该帮助程序的说明。其他的帮助程序，例如 Facebook 帮助程序，将其自己的文件夹和代码添加到 App_Code 文件夹中。

数据

一个网站的后面总会有一个数据存储。WebMatrix 提供新版本的 SQL Compact Server Compact Edition 4（即 SQL Compact）。它是免费的嵌入式数据库引擎，支持无安装和 xcopy 部署。由于 SQL Compact 就是 SQL Server 本身的一个版本，因此您可以在完成少量工作后即升级到更高级的 SQL Server 版本。WebMatrix 甚至提供了相关工具，可帮助您将 SQL Compact 数据库升级到 SQL Server。

WebMatrix 内置的编辑器可满足您的数据库需求。从创建表到创建数据，您都可以轻松在 WebMatrix 中完成。创建之后的数据库以及所有必要的组件都包含在一个扩展名为 SDF 的数据库文件中。图 8 是一个简单的数据访问调用。

图 8 Cars.cshtml 查询数据

@{ 
  var db = Database.Open("Cars");
  var selectQueryString = "SELECT * FROM Models ORDER BY Year";
}
<!DOCTYPE html>
<html lang="en">
  ...
<tbody>
      @foreach (var row in db.Query(selectQueryString))
      {
        <tr>
          <td>@row.Year</td>
          <td>@row.Maker</td>
          <td>@row.Model</td>
        </tr>
      }
    </tbody>
  ...
</html>

我首先打开 Cars 数据库，然后在一个 foreach 循环中查询该连接。在循环中，我在每行显示一个结果。呈现该页面后，将页面发送到源代码视图，您将再次看到纯粹的 HTML。为了简洁起见，本示例的部分内容被省略了，但可以在名为 DataAccess.cshtml 的文件的在线源代码中看到这些省略的内容。

架设网站

如果您不把网站架设起来，您的网站就没什么用。在 Windows 平台上，架设网站离不开 IIS。有关 IIS 的更多信息，请访问 iis.net。 IIS 曾经是 Windows 操作系统中的一项功能，您的托管提供商或 IT 专业人员可以配置和使用它。 Windows 上的 Web 开发人员通常使用 IIS 或内置的 Visual Studio Web 服务器（称为 Cassini）。随着 WebMatrix 和 Visual Studio 2010 SP1 的发布，我们现在有了另一个选择：IIS Express。 IIS Express 集两者的优点于一身：既有 IIS 的功能，又有 Cassini 的简便。

默认情况下，IIS Express 随 WebMatrix 一起安装，但您也可以通过 WebPI 单独下载它。与完整版本的 IIS 不同，IIS Express 的安装方式与其他用户模式的程序相似。您可以在 C:\Program Files (x86)\IIS Express 找到它。它包含两个程序：iisexpress.exe 和 iisexpresstray.exe。前者是真正的 IIS Express，后者是在 Windows 系统通知区域运行的虚拟托盘。

启动 IIS Express 通常在命令行窗口 (cmd.exe) 中完成。您可以传递多个选项，例如路径、端口、名称、框架版本等等。若要查看所有命令，请键入： *> iisexpress.exe /?*如果我要在 WebMatrix 之外为我的新 WebMatrix 网站启动 Web 服务器，只需键入以下内容：

> iisexpress.exe /path:"c:\MySite" /port:81

然后您可以打开首选的 Internet 浏览器，浏览到 http://localhost:81，这样就会在 C:\MySite 架设起您的网站。

WebMatrix 为您隐藏了所有这些工作，但其功能毋庸置疑。单击“运行”之后，WebMatrix 将替您在系统托盘启动并配置 IIS Express。当您关闭 WebMatrix 时，IIS Express 也将关闭。

搜索相关性

现在，搜索相关性的重要性达到前所未有的程度。您不能只等着 Bing 或 Google 替您进行关联。为满足您的相关性要求，WebMatrix 提供一项名为搜索引擎优化 (SEO) 的报告功能。

单击 WebMatrix 左下角的报告选项卡就可以创建新的 SEO 报告。为创建报告，WebMatrix 将对您的网站爬网，寻找网站中与搜索引擎最相关的潜在区域。一旦 WebMatrix 完成对网站的爬网操作，它将给出详细的冲突列表，以及如何解决冲突的建议。请参见图 9 中根据本文中的演示代码得到的示例 SEO 报告。

图 9 SEO 报告

部署

您已经花了很多时间来完善您的网站。现在是部署它的时候了。WebMatrix 通过两个步骤完成部署：配置和部署。在 WebMatrix 功能区中，您可以找到“发布”按钮。配置部署设置的过程取决于您的托管提供商以及提供商所启用的功能。图 10 显示了发布设置对话框。WebMatrix 自身支持 FTP 和 WebDeploy。输入适当的设置并单击“发布”。

图 10 发布设置

没有托管提供商？单击“查找托管提供商”。这将带您转至 asp.net/webmatrix/hosts，您可以在这里选择托管提供商，这些提供商已经配置并认证为可以使用 WebMatrix。如果您已经拥有网站，WebMatrix 也可以包含该网站。同样在“发布”菜单中，您将找到“下载发布的网站”。解除部署的过程很简单。您为部署配置的各项设置都将被解除。配置您的发布设置后，您可以将当前的网站下载到本地进行编辑。编辑之后，就可以重新部署。

成长

在选择框架时，如果它可以根据您的需求和复杂度的增加而扩展，是不是很不错？多年来，ASP.NET 已经构建了 LEGO 组件来实现这一目的。今天，我们拥有全套工具，可以综合运用来满足我们的需求。在图 1 中，您已经看到一切是如何构建在 ASP.NET 以及 .NET 之上的。这意味着完成 WebMatrix 应用程序并将它迁移到 Visual Studio 是真正可行的。只需单击一个按钮。

请仔细查看 WebMatrix 功能区，您会发现在右上角有一个按钮可用于打开 Visual Studio。这将在 Visual Studio 中将您的网站作为 ASP.NET 网站项目打开。但它并不仅限于核心网站。您很有可能还有数据库。您可以将 SQL Compact 数据库移植到更高级的 SQL Server。使用数据库菜单中的“迁移”按钮，WebMatrix 将帮助您完成这个迁移过程。

总而言之，WebMatrix 是人人可用的工具，也是对 Visual Studio 的有效补充。如何利用 WebMatrix 将取决于您手上的工作，但不管怎样，它都是一项必备的工具。它能让您轻松选择应该利用哪些 ASP.NET 组件，也让迁移到 Visual Studio 和 SQL Server 变得轻松易行。帮助程序和新的布局子系统的推出也让重用成为可能。如果不想从头开始创建网站，您可以使用 WebMatrix 从 WebPI 中列出的现成应用程序（例如 Umbraco 或 WordPress）开始创建，然后部署到托管提供商。

很遗憾，还有许多功能我不能在本文中一一介绍，包括缓存、路由和调试。您可以在 bit.ly/IntroToWebMatrix 找到本文中使用的所有链接。

Clark Sell 是 Microsoft 在芝加哥之外的资深开发推广人员。他的博客位于 csell.net 上，播客位于 DeveloperSmackdown.com 上，也可以通过 twitter.com/csell5 关注他。

衷心感谢以下技术专家对本文的审阅：Erik Porter、Mark Nichols 和 Brandon Satrom