在WebMatrix中或是NuGet库中可以获得很多的Web Helper，下面我们来看看如何利用ASP.NET框架来进行这些Helper的开发。Helper在NuGet库中都是以被编译好的DLL文件的形式发布的，这些Web Helper存在的目的是把大量的常用、复杂的函数压缩进一个简单的文件中，在需要时，可以通过一个行简单的代码进行调用。一经执行，这些简单的代码会在你的页面中写出HTML代码来。

使用微软翻译部件

1、要得到微软翻译部件，请进入http://www.microsofttranslator.com/widget/：

2、在此你可以为你的页面进行一些细节上的设置。输入你的站点地址和默认的站点语言。还有三个翻译选项：

• Manual 在页面上生成一个小部件，让用户自主选择需要翻译转换的语言。
• Notify 侦测浏览器的语言和站点的语言是否相同，如果不同，询问用户是否自行翻译。这种情况下，页面上看不到部件的存在。
• Auto 侦测浏览器的语言和站点的语言是否相同，如果不同，将自动执行翻译。部件也不会在页面上显示。

3、将页面滚动到底端，会看到一个复选框来表示同意微软的条款，然后Generate Code（生成代码）：

4、复制这些HTML代码。在WebMatrix中从模板创建面包店程序，打开About.cshtml页面。

5、在代码底部的</p>之前，粘贴刚才的内容。

6、运行About页面：

现在我们可以来选择要进行翻译的目标语言了，来转到法语试试：

首先，Fourth Coffee是图片，这个翻译引擎不会将其进行翻译，如果希望也能进行转换，那么你需要在网站设计时对这点进行考虑。还有一点值得高兴的是，这个小部件支持对Twitter的翻译，因为一般的Twitter列表是以HTML和JavaScript形式被输出的。这也是应用Razor和Web Helper的好处。当然，如果你的Twitter是以编译为Flash的形式进行表现的，那么它将不能被翻译。

为这个部件创建一个Helper

使用CSHTML来创建Helper是非常容易的，支持C#和VB的Razor语法。必须要注意，只能在App_Code文件夹中来创建它们。

1、在文件工作区的项目名称上右键-新建文件夹，命名App_Code。

2、在App_Code文件夹上右键-新建文件。创建一个CSHTML文件，命名为Translator.cshtml。

3、进入这个文件，去掉所有的代码，然后键入以下内容：

@helper GetWidget(){
   
}

4、在大括号内粘入刚才微软翻译部件页面上获得的生成代码：

@helper GetWidget(){
<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2flocalhost%3a46021%2f">翻译此页</a><br />提供商 <a href="http://www.microsofttranslator.com">Microsoft® Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=manual&from=zh-CHS&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>
}

5、回到About.cshtml页面，将里面HTML代码替换如下：

@Translator.GetWidget()

6、重新查看页面，这个页面和之前的结果是完全一样的！

至此，我们完成了我们的第一个Helper！

使用Translator API来建立Helper

除了以上的方式，微软还提供了一套API来使用。

获得API秘钥

我们先去从Bing上获得一个秘钥。

1、使用Windows Live ID登录http://www.bing.com/developers/appids.aspx。

2、来添加一个秘钥，需要填写如下内容：

在填好所有内容后，会看到如下一个记录被生成了：

现在你拥有了一个Bing API秘钥。将这个号码记录好，一会儿使用它。

使用翻译API

在http://www.microsofttranslator.com/dev/上有API的所有使用方式。

这里有很多非常不错的文档和示例，包括了很多不同的接口方式：AJAX、SOAP、HTTP等。

1、我们将使用HTTP方式，选到这项，我们跳转到了MSDN上：

2、点击Translate Method链接，右边的页面会看到具体的介绍，而且页面下方还有一个C#的示例。

需要注意一定要将对应的地方填写自己的那个秘钥。

创建Helper

之前创建的Helper使用的是@helper语法格式，为了采用更为标准的编程方式，我们将采用@functions语法格式。

1、在Translator.cshtml文件中写下如下代码：

@functions{
    public static string GetTranslation(string texttotrans,
                                        string langfrom,
                                        string langto)
    {
       
    }
}

熟悉C#语言的会知道这是返回一个string的函数，附带3个参数。

2、我们来放置一些初始化代码：

string appId = "------写你自己刚刚生成的秘钥-------";
string translatedText = "";
string uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?appId=" + appId + "&text=" + texttotrans + "&from=" + langfrom + "&to=" + langto;

3、接下来向翻译服务发出请求：

HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);
WebResponse response = request.GetResponse();
4、现在你已经得到响应，余下的操作就是读取内容了。服务返回的是XML，所以下面的代码能够去除XML的标记：

using (Stream stream = response.GetResponseStream())
{
    System.Runtime.Serialization.DataContractSerializer dcs = new System.Runtime.Serialization.DataContractSerializer(texttotrans.GetType());
    translatedText = (string)dcs.ReadObject(stream);
}
5、现在已经有了翻译后的文本了，可以提交返回了：

添加好return translatedText;

文件中的整体代码如下：

@helper GetWidget(){
    <div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2flocalhost%2f">翻译此页</a><br />提供商 <a href="http://www.microsofttranslator.com">Microsoft® Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=manual&from=zh-CHS&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>
}
@functions{
    public static string GetTranslation(string texttotrans,
                                        string langfrom,
                                        string langto)
    {
        string appId = "--------你自己的秘钥-----------";
        string translatedText = "";
        string uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?appId=" + appId + "&text=" + texttotrans + "&from=" + langfrom + "&to=" + langto;
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);
        WebResponse response = request.GetResponse();
        using (Stream stream = response.GetResponseStream())
        {
            System.Runtime.Serialization.DataContractSerializer dcs = new System.Runtime.Serialization.DataContractSerializer(texttotrans.GetType());
            translatedText = (string)dcs.ReadObject(stream);
        }
    return translatedText;
    }
}

使用Helper

调用的方式是@HelperName.FunctionName(参数表)。HelperName就是文件的名字(Translator)，FunctionName就是GetTranslation。调用代码大致如下：

@Translator.GetTranslation("Hello, I am Scott", "en", "zh-cn")

在About页面中加入如下代码：

<p>@Translator.GetTranslation("Hello, I am Scott", "en", "zh-cn")</p>

然后我们会发现这个页面的变化:

现在我们使用纯C#代码来实现了翻译功能！

我们也展示了在WebMatrix使用C#语言和Razor的@helper和@function标签来进行包封。

接下来的步骤就是在Microsoft Visual Studio来创建这个Helper的DLL文件，可以把它打包并发布到NuGet里。

创建数据库

1、使用空网站模板创建一个站点程序。

2、在数据库工作区中点击新数据库。

3、WebMatrix使用站点的名称来默认创建了一个.sdf文件的数据库。此时数据库中还没有任何的东西。我们来新建一张表格，点击 新表 按钮。

新建表列是非常容易的，使用 新列 即可。

4、新建第一列命名id，分别指定此列为 标识 和 主键。

指定标识意味着这列数据会自动使用唯一的标号来填充数据记录，数据库默认每记录自增1，以0为起始，所以第一条记录分配的值是1，第二条分配2，以此类推。

5、接下来继续添加，姓名（name）、网名（nickname）、住址（address）三列。

6、点击保存，表名存储为contacts即可。

7、双击这张表，可以浏览表的内容，但是没有任何数据库。看到这张像电子表格一样的界面你立刻会意识到它支持直接的编辑。

8、在id列中不用键入任何信息，它会自动填充，你可以去填写其他的内容项。如果没有些人内容的表格自动呈现NULL的内容，表明数据格内没有数据。

由上面可见在WebMatrix中创建数据库并利用继承界面来填充数据是多么的容易。

在代码中使用数据库

最标准的使用数据库的方式就是利用SQL查询。WebMatrix也是支持查询的：

1、我们利用CSHTML来渲染一个从数据库获得数据的页面。代码如下：

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "数据库操作";
    var db = Database.Open("Demo");
    var query = "SELECT name FROM Contacts";
}
@foreach (var item in db.Query(query)){
    <p><span>@item.name</span></p>
}

2、运行后，页面大致如下，因为我们的_Layout.cshtml中的内容可能会有不同：

向数据库中添加数据

1、向页面中添加HTML表单元素：

<form method="post">
    <p>姓名</p>
    <input type="text" name="name" />
    <p>昵称</p>
    <input type="text" name="nickname" />
    <p>地址</p>
    <input type="text" name="address" />
    <input type="submit" value="提交" />
</form>

2、然后添加动态代码：

@{

var name = Request["name"];
var nickname = Request["nickname"];
var address = Request["address"];

}

3、因为采用了Post的提交方式所以我们加上If(IsPost){}来处理Post过来的页面响应。

4、利用SQL中的INSERT命令来向数据库中添加新的记录：

INSERT INTO Contacts(name, nickname, address) VALUES('老任', '考拉叔叔', '音乐学院美女集中营')

而我们在代码中可以采用“占位符”来替代具体要赋值的内容，大致如下：

INSERT INTO Contacts(name, nickname, address) VALUES(@0, @1, @2)

@0代表第一个参数，@1代表第二个，@2代表第三个。

所以我们来看看代码中是如何来设置的：

if(IsPost){
    var insertQ = "INSERT INTO Contacts(name, nickname, address) VALUES(@0, @1, @2)";
    db.Execute(insertQ, name, nickname, address);
}
5、执行页面看到效果大体如下：

6、提交后的页面结果：

哦，我们发现已经在数据库中添加好了一条记录。而这条记录恰恰是从我的网页上发出的。

编辑数据

上面我们已经添加了一条记录，如果更新一条已经存在的记录呢？

我要确定下一条要编辑的数据记录，然后告诉数据库我们要编辑它，然后让数据库知道我们要编辑的记录最好给它一个明确的信息，一般我们采用告知数据库主键的形式来确定！这里就是id这个列！

1、在之前的查询代码上我们只把姓名显示出来了：

var query = "SELECT name FROM Contacts";

现在我们需要把主键的值也检索出来，修改如下：

var query = "SELECT id, name FROM Contacts";

2、更新HTML代码如下：

@foreach (var item in db.Query(query)){
    <p><span>@item.name</span><a href="edit.cshtml?id=@item.id">编辑</a></p>
}

刷新浏览器会得到如下的结果：

查看一下源代码大致如下：

<p><span>孟祥元</span><a href="edit.cshtml?id=1">编辑</a></p>
<p><span>顾颉刚</span><a href="edit.cshtml?id=2">编辑</a></p>
<p><span>陈晨</span><a href="edit.cshtml?id=3">编辑</a></p>
<p><span>老任</span><a href="edit.cshtml?id=4">编辑</a></p>

3、现在我们开始来做这个编辑页面，创建一个edit.cshtml。

4、我们也在页面上添加好姓名、昵称、地址这些HTML信息：

<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" />
        <p>昵称</p>
        <input type="text" name="nickname" />
        <p>地址</p>
        <input type="text" name="address" />
        <input type="submit" value="提交" />       
    </form>
</div>

5、然后需要在服务端代码中制作好取得对应id记录的方法：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
   
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
}
<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" value="@name" />
        <p>昵称</p>
        <input type="text" name="nickname" value="@nickname" />
        <p>地址</p>
        <input type="text" name="address" value="@address" />
        <input type="submit" value="保存" />       
    </form>
</div>

以上代码返回一个从URL的id参数返回的SQL查询结果，使用QuerySingle方法可以查询一个单一的记录。通过Trim方法可以将结果的前后空格去掉。

6、保存页面，浏览列表也，点击编辑链接，将会转到如下页面：

我们得到了如上的页面，正好是根据我们提供的id内容返回的所有数据。

7、目前还没有办法做保存更新功能，接下来的事情会像之前做提交新数据一样的简单，如此我们可以彻底完成edit.cshtml代码：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
   
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
   
    if(IsPost){
        name = Request["name"];
        nickname = Request["nickname"];
        address = Request["address"];
        var updateQ = "UPDATE Contacts SET name = @0, nickname = @1, address = @2 WHERE id = @3";
        db.Execute(updateQ, name, nickname, address, id);
        Response.Redirect("~/data.cshtml");
    }
}
<div id="edititem">
    <form method="post">
    <p>姓名</p>
        <input type="text" name="name" value="@name" />
        <p>昵称</p>
        <input type="text" name="nickname" value="@nickname" />
        <p>地址</p>
        <input type="text" name="address" value="@address" />
        <input type="submit" value="保存" />       
    </form>
</div>

8、在页面上做一些改动，然后执行保存：

9、点击保存按钮我们会发现这些变化在data.cshtml：

删除数据记录

1、正如编辑页面上的链接一样，我们需要做一个删除页面，将链接添加进去：

@foreach (var item in db.Query(query)){
    <p><span>@item.name</span><a href="edit.cshtml?id=@item.id">编辑</a><a href="delete.cshtml?id=@item.id">删除</a></p>
}
2、运行这个页面：

3、添加一个命名为delete.cshtml的页面，HTML代码如下：

<div id="delete">
    <form method="post">
        <p>确定删除如下内容么？</p>
        <p>姓名</p>
        <input type="text" name="name" />
        <p>昵称</p>
        <input type="text" name="nickname" />
        <p>地址</p>
        <input type="text" name="address" />
        <input type="checkbox" name="delete" value="confirm"/>我确定要删除这条记录。
        <input type="submit" value="提交" />
    </form>
</div>

4、添加好服务器代码如下：

@{
    Layout = "~/_Layout.cshtml";
    var id = Request["id"];
    var query = "";
    var db = Database.Open("Demo");
    var name = "";
    var nickname = "";
    var address = "";
    if(id.IsEmpty()){
        Response.Redirect("data.cshtml");
    }
    else{
        query = "SELECT * FROM Contacts WHERE id = @0";
        var item = db.QuerySingle(query, id);
        name = item.name.Trim();
        nickname = item.nickname.Trim();
        address = item.address.Trim();
    }
    if(IsPost){
        var confirm = Request["delete"];
        if(confirm == "confirm"){
            var deleteQ = "DELETE FROM Contacts WHERE id = @0";
            db.Execute(deleteQ, id);
        }
        Response.Redirect(@Href("~/data.cshtml"));
    }
}
<div id="delete">
    <form method="post">
        <p>确定删除如下内容么？</p>
        <p>姓名:@name</p>
        <p>昵称:@nickname</p>
        <p>地址:@address</p>
        <input type="checkbox" name="delete" value="confirm"/>我确定要删除这条记录。
        <input type="submit" value="提交" />
    </form>
</div>

7、运行页面：

至此，删除的操作也完成了！

报告工作区

报告区主要是用来执行你的站点运行报告的。目前的WebMatrix 1.0版中报告区仅提供了有关SEO方面的报告。这份报告有如主流的搜索引擎对你的站点所做的观察。

你是否考虑过什么一个叫做A的网上书店在Google或Bing上排名第一，而一个叫做B的书店却要排在100名的网页位置来显示？现在看来SEO是影响你的网站在搜索引擎中排位的非常重要的因素。如果你的站点中存在一些违法搜索引擎所期待的规则，那么你的站点在它那里只能得到很可怜的分数，所以排位很低。

很多公司花费了数以千万的费用来请专家检测他们的站点来提高自己站点在搜索引擎中的排位。这些专家帮助找到并修正那些对已知搜索引擎违反规则的地方。利用WebMatrix的SEO报告界面可以做同样的事情——但是它是免费的。

要运行SEO违规报告，请打开报告工作区，点击功能区上的新建按钮。

点击新建按钮后，会发现有一个特殊的对话框，有基础设置和高级设置界面。

点击确定后，WebMatrix会爬行你网站的所有页面，寻找SEO的违规行为。当进程彻底结束后，WebMatrix会显示一份已经找到的问题的详细报告，里面包含了所有违规页面的URL，违规页面的数量等等。

也许你并不知道每个URL到底触犯了什么内容，点击一条URL则会在旁边显示具体的问题所在和建议。

就此你可以比较好的修正这些问题了。另外，每个违规的相信屏幕上提供了一个链接“编辑此页”直接来编辑这个页面。还有一个链接“查看更多详细信息”，可以更为详细的来了解，将打开一个详细信息对话框提供你去检查标头、冲突、单词分析等内容。

报告区会自动保存每份你检测过的SEO报告，以备检查每次的状态。当然，你也可以删除之前创建的报告。

数据库工作区

数据库工作区专门负责对Web程序使用的数据库进行创建、编辑、更新和删除的操作。默认创建SDF类型的SQL Sever Compact数据库，但你不会只限制于此类型。比如，你正在使用MySQL数据库，或者在Web应用库中选择安装了使用MySQL数据库的程序，你这时仍然可以在WebMatrix中来维护数据库，而没必要再开启一个单独的数据库编辑器。

正如其它的工作区一样，数据库工作区也拥有自己独特的功能区布局。

我们看到在左半区同样也包含了一恶搞网站功能区。同时还能看到其它三个功能区：数据库组，用来创建或链接数据库也可以创建表格；查询组，用来定义和执行查询（利用特定的命令来检索指定的数据）；SQL Server组，用来提供把SQL Server Compact版的数据库迁升到全功能版的SQL Server数据库。最后这个组同事提供了一个一键式安装按钮，来允许你升级到免费版的SQL Server Express。

创建数据库

新数据库按钮运行创建新数据库。点击后，一个命名为<站点名>.sdf的数据库被添加到了工作区中。比如，使用入门网站这个模板来创建一个入门站点，点击新数据库按钮将创建一个叫做 入门网站.sdf 的数据库文件。

中文版中默认创建一个入门网站.sdf文件要是英文版的会创建一个叫做Start Site.sdf的文件。虽然数据库文件名很让人混淆，但是不用太担心。计算机完全能够识别它们之间的差别。不用使两个名字相近的文件同时存在一个目录下确实不是个很好的习惯。可能注意到一点，在数据库界面上无法删除数据库文件。因为这数据库就是一个完整的文件，所以我们可以在文件界面区来彻底删除它。当然，你可以去删除表、列或其他产物。

使用表格

数据库通常是有很多独立的表格组成的，每张表中包含了一系列相关的数据。比如，有一个卖书的站点。你可以用一个表来保存所有销售的书的数据，而再有一张专门负责保存各种已发生的交易数据的表，还有第三张表来存储所有的注册人员数据。如果要把以上所有的数据存放在同一张表格中可想是多么的混乱。

可以使用新表按钮来为当前数据库中创建一个表格。点击按钮后会发现表格编辑界面中有让你为表中的列定义列名、列的类型、是否允许空值的选项。

比如，一张包含具体联系人的表中可能会有string类型的姓列和名列，还有一个integer类型的年龄列等等。

在表中编辑数据

如果你在数据库区双击一张表格时，WebMatrix会以数据视图中打开表格，非常像一张电子表格界面，可以用来添加和修改数据。编辑器会按照表列所定义的类型来校验你输入表格中的数据。比如，有一列被定义为int类型，而你试图在表格中输入一个string类型的数据，WebMatrix则会发出一个警示。下图展示了在数据视图编辑器中输入一个非法类型的数据后提示一个错误的发生，然后你可以马上根据提示来进行修正。

查询数据

WebMatrix可以对SQL（Structured Query Language结构化查询语言）进行编辑和执行。SQL是对数据库进行查询管理的标准途径。

在WebMatrix你可以执行查询，来传递给数据库并显示结果。

虽然这个例子很微小，但是实际上SQL的力量十分强大，执行效率很高。比如，网上书店里有10000个产品，用户要检索出自己需要的内容，这时我们可以利用一个SQL查询来检索数据结果，然后将结果返回给程序使用。比如找到了50本对应的书籍，我们可以只把书记的名称返回到程序中，而不是把10000本书的数据信息都返回，这样可以让终端用户降低数据下载的体积，而且如此一来程序的性能非常良好并且让用户感觉更加友好。

数据库服务就是为了优化SQL的，所以这种类型的执行是非常快的。因为明智的选择使用了SQL，你可以让你的数据库执行更多的数据任务，而不是在ASP.NET或PHP代码或是在客户端的JavaScript中来处理大量的数据集。

文件工作区

正如这个名称所示，文件工作区主要用来管理站点找中的全部文件用的，包括含有HTML标签的文件、代码、图片、样式、数据库或任何其它的文件。当你选中了文件工作区时，你会发现功能区也发生了改变，这次所提供的操作更像是直接面对文件进行的。

左边的网站部分是针对管理站点的。使用这些功能可以让你查看机器上的所有站点，发布网站，在安装的任何浏览器下来浏览网站并且可以启动、停止或重置你的IIS Express。

功能区的其余部分基本都是无需解释的，提供了如剪切、粘贴、拷贝和其他的一些操作快捷按钮。只有Visual Studio那个按钮比较值得注意，如果已经安装了微软的Visual Studio，这个按钮会出发启动它的运行，并同时打开当前的工程。如果机器上没有安装Visual Studio，这个按钮将会让你选择是否要安装一个免费但是功能强大的Microsoft Visual Web Developer 2010 Express，可以开放网站、应用程序和基于Silverlight的富网络应用程序。

创建新文件

新建按钮下面的箭头中也提供了新建文件夹的功能。如果是新建文件的话，会弹出一个对话框：

这里对每种独立文件类型都提供了基本内容的快速生成。

• HTML：标准的超文本标记语言，用来相互独立的小区域描述一个页面文件，这些区域是用以<>为标签的语言对内容进行的组织和分割。比如，页面的主体被放到了<body>区，而这个部分中又可以包含<p>标签来表示段落、<a>标签来表示超链接等。
• CSS：标准的样式表，用来定义HTML中信息的样式。HTML标签中可以直接为每个标签纳入样式描述，但是这会给页面带来大量重复性代码。比如，你想对站内标准的段落标签（<p>）使用同样字形和字号，可以为每一个出现的标签都标注上同样的代码，又或者使用一个CSS文件，在这个CSS文件中只需要定义一次即可达到同样的效果。而且，如果以后你想修改段落的样式，那么也只需要对这一处进行修改即可。
• JScript：一个包含JavaScript代码的文件。JavaScript是一种浏览器可以解释的程序设计语言。因为浏览器可以执行JavaScript代码，所以这样提供了一种方式让编写的代码在最终用户的浏览器上执行，而不需要在你自己的服务器上来运行了。
• CSHTML：这是WebMatrix使用的一种很新的文件。主要用来在服务器端生成出客户浏览器可以接收的HTML代码。CSHTML使用微软的C#语言，这也是这个类型名称的由来。
• ASPX(C#)：使用ASPX作为扩展名的由ASP.NET框架所支持的页面文件。ASPX的意思是Active Server Pages eXtended。这种文件和CSHTML非常类似，但是同时提供了对ASP和ASP.NET的向后兼容。
• TXT：简单的文本文件。
• XML：XML的意思是 eXtensible Markup Language（可扩展标记语言），这种标记语言在定义数据时与HTML非常类似。但是XML不像HTML只能使用预先定好的标签内容，它允许你使用任何创造的标签来定义数据。比如，<name>考拉</name>在XML中定义了一个姓名，但是你也可简单的写一个<xyzzy>考拉</xyzzy>来定义，只要你让自己的程序能识别这个<xyzzy>标签的内容是姓名的意思就可以了。当然，正常来看还是<name>标签更利于代码的阅读。

WebMatrix一个非常便利的特征就是创建页面，它会创建一个能让文件工作的最基本信息。比如你在新建一个HTML页面时没必要完全从一个空页面开始，你可以得到如下代码来开始工作：

任何新建的文件都会在WebMatrix设计器中直接打开，并允许编辑。你会发现它支持语法彩色，这使得代码的阅读和修改更为容易。

WebMatrix为你的站点包含了4个不同的集成设计工作区。每个工作区都可以通过屏幕左边的标签来访问。注意一下，选择了不同的标签，窗口顶部的功能区也会随之而变化。

• 网站：这个工作区提供了管理站点本身所需要的工具，包含了站点运行的URL，在本机硬盘上的位置等等。
• 文件：这个工作区中可以访问站点内用到的所有源文件和数据库文件。并且它提供了多种文件的语法高亮显示的功能，包含ASP.NET，HTML，CSS和PHP，助你完成代码编写。
• 数据库：这个工作区下提供了创建、编辑和管理数据库的工具。
• 报告：这个工作区下主要提供了WebMatrix的工作站点下的SEO报告。

下面我们来一一了解一下：

网站工作区

在选择了网站标签后，我们将看到类似如下界面：

工作环境大体被拆分为三个区域。最上面是功能区，提供一些快速执行的命令和功能。左边既可以看到切换到其他工作区的标签按钮，也能看到当前工作区下一些常用功能区块命令。

顶端功能区

先来看到顶端的功能区，其中提供了一些列相关命令来管理网站。

我的网站：提供了一个与欢迎界面上我的网站一样的功能，列出所有用WebMatrix创建的网站。它的使用非常简洁，可以随时简单的切换到这些个项目中去。

发布按钮，仔细看发现下面还有一个箭头，这是非常标准的微软Office界面风格。

这一部分也体现了WebMatrix的设计理念：一体化（ALL-IN-ONE）设计、点到点（end-to-end）解决从获取代码到发布站点到Internet上。作为发布流程中的一部分，你可能会配置你的设置或在网上寻找一个Web主机来宿主你的网站。WebMatrix把这些功能都整合在一个地方上了。

运行按钮下面也包含了菜单，让你可以选择浏览器来浏览你的网站。依据你在Windows系统里安装的所有浏览器，大体菜单如下，大家可能会有不同：

运行按钮中包含了系统中所有的浏览器启动选项，你可以选择多种的浏览器来测试你站点在不同浏览器下的表现，下面显示了用Opera来浏览站点的情况：

在运行按钮的右边还有三个小的按钮：启动、停止和重新启动。这些功能控制内建的IIS Express，运行一个站点时IIS Express服务如果是停止的，将会自动启动。

当你手动启动服务的时候，你需要注意接下来发生的一些列事情。首先，WebMatrix用户界面会更新显示当前的服务状态，这个会显示在窗口底端的提示条。

另外，系统通知区会提示IIS Express在运行。你可以右键这个图标来管理你的站点。

最后在功能区上的一个按钮就是请求按钮，点击它可以在你的工作区打开请求管理工具。

管理站点的请求

你同样可以通过单击左边的请求按钮来访问站点的请求管理工作区，它和功能区的请求功能是完全一样的。这些请求是从浏览器发出来向你的站点获取内容的。无论何时你启动浏览器来测试站点，你都会生成一条对默认页面的请求，然后依次轮询发出对站内各种文件的请求，比如对图像或样式文件的请求。

开启这个界面后，你会发现在功能区上又多出一个请求标签来。

这个可以观察请求的功能对于检修站点一般性错误是非常有用的。比如，对于一个Web开发者来说最常遭遇的经典错误就是“缺失图片”，这个情况经常发生在一个创建好的站点中使用了HTML的<IMG>标签来指定一个图片。此标签包好一个src属性来明确图片文件的真实路径。如果这个属性所指示的内容是错误的，那么浏览器是不会渲染出这个图片的，取而代之的是渲染一个默认的“失损”图片。你可以利用请求查看工具来快速降低这种错误的发生。

如前图所示请求标签下包含了一个叫做 仅错误 的功能按钮，可以起到过滤监视结果的作用，只显示错误结果，而没必要同时显示出那么多的正确请求结果。另一个过滤项是忽略图像请求，来过滤掉对于失损图片错误的捕捉。

所有追踪的结果都被列表于主工作区内，如下图所示。每条请求记录都包含了你发出的HTTP请求状态，用一个小图片来表示；HTTP谓词是用来表示发出的动作的（GET或是POST）；URL是被请求的资源地址；请求完成所经过的时间（毫秒）和一个时间戳。

这里只是显示了一些最表面的请求信息，但是你可以选择任何一条请求结果来获得有关此请求的更详细的信息。比如，我们这里看到一条记录，它在状态列中是一个“信息”的图标，我就非常好奇它是什么意思呢，所以我选择了这一行。

工作区在右边更新显示出了我选择的条目的相信内容。

在详细信息中给你展示了更多你想关心的内容。比如，你可以了解到304.0信息表示这个请求的资源是没有从服务器下载的，因为它已经存在于浏览器的缓存中了。

除详细信息外，这部分视图中还提供了一些你可能解决相应请求的问题的建议。举例来说：我们会发现404.0信息（用一个红×来表示的）表示请求是失败的。当我们选中这行时，会看到如下：

看到详细信息面板，你会很快发现请求的文件（favicon.css）是找不到的。每款Web浏览器都会去寻找favicon.ico文件，然后将它作为站点图标来显示，我们应该为每个站点都建立一个独特的favicon.ico文件。我们无需在页面内指定它的位置，浏览器会默认去站点根目录来寻找。比如在http://www.microsoft.com/web 这个站上一个M型的图片显示在了地址栏的前端。

你看到这个图标是因为微软的站点管理员把这个favicon.ico文件放到了站点的根目录下。如果这个文件存在浏览器则自动的将它显示出来。入门网站这个示例是包含对应的图标文件的，为了得到之前的错误报告，我只是简单的把那个文件删掉了而已。

管理站点设置

当你在左边的屏幕上选择设置这项时，你将看到站点设置区域，在这里有你好多在本机运行站点时需要配置的条目。

在上面你可以设置WebMatrix运行站点时的URL。这个URL一般典型的特征是类似http://localhost:<NUMBER>的语法。在上图中被设置为http://localhost:8439。这个号码是本地Web服务解析界面的端口号。一般情况下大多数服务器都会使用经典的80作为端口，这也是HTTP协议运行页面文件的标准TCP/IP端口。但是，作为开发机器上面可能会存在很多的站点，所以WebMatrix给每一个站点分配上一个独立的端口号来确保他们在IIS Express服务器上的运行。如果你不想让机器来自动分配号码（比如8439），你也可以很容易的来修改它。

启用SSL 有些站点在处理敏感信息时会启用HTTPS（安全HTTP）协议，比如EMail或银行的签名密码。这种协议使用了安全的加密服务，这种服务在服务器和浏览器上均存在。SSL（Secure Sockets Layer）页面需要由服务器提供一个经由独立认证系统校验的证书。这有点儿类似我们人凭借一本护照去往一个新的国度，你需要所在居住国家来签发一本有效的护照来证明你的规定身份。

我们可以看一个验证页面的有效实例：

我们可以看到浏览器地址栏中是HTTPS协议（不是HTTP），浏览器也是在标识你正在向微软站点发送敏感信息内容作为身份验证。

这个SSL协议确保了这种安全的浏览页面方式。与WebMatrix一起提供的IIS Express服务可以支持SSL，所以如果你需要提供一个基于SSL的安全方式，你可以选中启用SSL这个复选框。在此之后，单击标题栏上的保存按钮来保存设置。

当启动SSL时你的站点必须必须拥有证书来进行身份验证，由于你还没有证书，所以你可能会遇到一些运行时的错误。而每种浏览器会以不同的方式来处理这些问题。

管理默认页面 最后这项设置在设置页面的下面，它是让你管理默认页面的。这里列出了当一个URL没有指明访问的文件名时服务器将返回的默认文件名。服务器会安装列表自上而下的顺序返回第一个存在的文件，如果在列表里都没找到将返回一个错误。

看到上面的实例，站点启动的URL是http://localhost:8439。当你发出这个请求时，请注意它里面并没有表明要访问的明确文件名。服务器将会在请求的文件夹中寻找到Default.cshtml是一个默认页面，所以将它作为请求的响应页面返回。你可以利用这个设置来添加或删除默认页面名称。举例来说，你可以创建一个新的页面命名foo.html，并把这个文件名添加到默认页面列表中。列表项有上移、下移按钮来调节默认页面在列表中的位置。把foo.html移动到默认页面的最上面，当用户访问你站点时没有明确指出访问文件名时将默认调用foo.html这个页面了。如果这个文件不存在，将继续向下寻找后面的默认页面名称，比如Default.htm等。服务器只会返回寻找到的列表中的第一个文件。