1.7.6设计区 VWD界面的中间部分是设计区(DesignSurface)。开发人员将在这里完成向ASP.NET2.0页面添加内容的大部分工作。可以在Design视图和Source视图之间切换，前者在一个类似浏览器的窗口中显示页面的直观效果，后者显示页面的代码(如图1-4所示)。通常，在Design视图中完成大多数任务要容易和迅速一些，因为它支持较多的拖放功能。如果需要进行细微的修改，而这些修改无法使用VWD的拖放界面完成，那么可以切换到Source视图。
图1-4
当在Design视图中向页面添加控件时，会弹出一个CommonTasksMenu(常见任务菜单)。这个最小化菜单包含了控件的大多数最常用的设置特性。并不是所有的控件都带有智能任务面板(常见任务菜单)，但如果有的话，可以通过控件右上角的黑色三角图标(如图1-5所示)打开和关闭该面板。
图1-5
设计区的很多默认设置可以通过菜单Tools- >Options修改。当程序员在VWD中打开页面进行编辑的时候，这些选项会改变页面的外观。这些设置并不会改变Web站点的访客看到的页面外观。可以选择在Design视图或Source视图下创建新页面，以及选择智能任务面板的自动打开功能。可以修改Tab键和缩进(indent)包含的空格数量，这有助于使得项目符合公司有关页面代码的规范。
在设计区的底部有一个导航工具，它在大型、复杂的文档中很有用。通过阅读导航标记可以知道插入条(光标)当前位于何处。当前的设置将突出显示，如图1-6所示。也可以单击某个标记，从而在设计区选中该标记的所有内容。
图1-6
从很多方面看，设计区都非常类似于字处理器。但是VWD还提供了两种用于查看页面的视图(Design和Source)以及在页面中导航的增强工具。下一节讨论VWD怎样帮助开发人员在页面中添加功能。
1.7.7工具箱 VWD在工具箱中提供了ASP.NET服务器端控件集，以便于将这些控件拖放到页面上。第3章将详细讨论各种服务器端控件以及它们的使用方法；这里只需要大概了解怎样使用工具箱就可以了。要显示工具箱，可以选择菜单View- >Toolbox或按下Ctrl+Alt+X。随后，可以拖动它的标题栏将其移动到新的位置。在向不同位置拖动工具箱时，将显示一个罗盘图标，允许将工具箱向上、向下、向左或向右拖动，或者拖放到另一个窗口的上面。如果希望最大化设计区的面积，则可以将SolutionExplorer和Toolbox叠放在一起。
工具箱由一些面板组成，其中一些相似的控件组织在面板上。可以展开面板显示工具，也可以折叠面板以节约空间。在安装VWD时可以改变工具箱所包含的控件，但是一个典型的工具箱包含以下几个面板：
●Standard，包含大多数ASP.NET2.0服务器端控件。
●Data，包含数据源和数据绑定控件。
●Validation，如果用户输入在可接受的值的范围之外，则该面板所包含的控件将拒绝用户的输入。
●Navigation，包含菜单和breadcrumb等导航控件。
●Login，包含身份验证控件。
●WebParts，包含站点中可由用户重新安排或隐藏的比较大的组件。
●HTML，包含常用的(非ASP)标记。
●General，可由用户定制的工具组。
图1-7显示了可能出现在屏幕上的工具箱。
单击面板的加号图标将展开一组可用的控件列表。图1-8显示了将Login和Standard面板展开的工具箱。
图1-7
图1-8
General面板一开始是空的。在创建了页面的一部分之后，可以选中该页面并将其拖放到General面板，从而创建一个可复用的工具。如果希望复制一组已调整好格式的控件到其他页面，则这个工具将非常有用。
在工具箱标题栏的右边有一个图钉图标，如图1-9所示。单击该图标，它将变为水平方向，意味着在没有用到工具箱时它将自动隐藏起来，而仅仅显示标题栏。
图1-9
提示：
工具箱的外观在使用过程中是变化的。例如，每个面板的标题在选中它们时改变。
当鼠标移动到工具箱的标题栏上时，工具箱将弹出来供开发人员使用。如图1-10所示。
图1-10
在下面的“试一试”部分，将练习使用VWD的Design和Source视图，以及工具箱的功能。
(1)在VWD中继续编辑Mishaps页面。
(2)切换到Design视图。在工具箱中展开HTML面板并滚动到该面板的底部。将HorizontalRule控件从工具箱拖放到页面上(任意两个段落之间)。
(3)下一个目标是在History页面的底部添加一个日历控件。打开工具箱的Standard面板并找到ASP.NET的日历控件。将其拖放到页面上(双击该工具将执行同样的操作)。单击选中该控件并注意其右上角指向右边的小箭头图标。单击该图标显示智能任务面板。单击AutoFormat，选择一种格式，并单击Apply。注意观察使用VWD的对话框界面一次性地修改众多显示标准是多么容易。
(4)在VWD中打开History页面。以Design视图查看该页面。将光标移动到以<%@Page… >开始的标记之前。注意导航向导(在设计面板的底部)显示当前光标位于<Page >标记中。单击<Page >标记，将选中设计面板内该标记的所有内容。
操作回顾
如您所见，工具箱提供向页面拖放各种元素的功能，就像拖放HTML控件HorizontalRule一样，而不是输入元素的标记。即使是像日历这样复杂的结构也可以拖放到页面上。将控件添加到页面之后，可以使用智能任务面板对其进行修改。
1.7.8属性窗口 一个对象，例如Web页面、服务器端控件ListBox或者一个到数据源的连接，都具有很多属性(properties)。属性是一组设置，决定着对象的外观和操作。在早期的ASP版本中，很多目标的实现都需要编写大量复杂的代码。然而，在ASP.NET2.0中，Microsoft已预先编写了大部分的代码并将这些代码封装在服务器端控件中。属性决定了如何执行行为。对象的属性可能非常简单，例如BackColor，也可能非常复杂，例如EnablePaging。同样，赋予属性的值可以非常简单，例如一个简单的BLUE值，也可以非常复杂，例如一个多行的SQL语句。可以在Source视图中直接输入属性的值，也可以使用Properties窗口为属性赋值，如图1-11所示。
图1-11
可以按下F4或选择View- >Properties菜单显示属性窗口。属性显示在多个面板中，可以展开或折叠这些面板(类似于工具箱)。例如，在图1-11中，顶部的3个面板就是展开的。在属性窗口的顶部有一个下拉列表框，其中包含了当前打开页面上的所有控件。下面的两个图标用于按类型或按字母顺序排列属性。闪电图标将使得属性窗口显示事件(在第6章讨论)而不是属性。属性窗口左边的列表中显示属性名称，右边的列表中显示属性的当前值。窗口的底部有一个文本框，显示当前选中属性的帮助信息。
修改属性的基本技术是选择一个对象，通常是一个控件，然后找到需要修改的属性并对其进行设置。可以在Design视图中单击对象从而选中该对象，或者在Source视图中将插入条放置在对象中。另一种方法是在属性窗口顶部的下拉列表框中选择对象。一种常见的错误是，在没有实际选中某个对象之前就试图修改其属性。这实际上修改的是原来已选中的对象的属性。
有多种方式可以修改一个属性的值。如果属性所允许的值数量有限(例如false和true)，则可以双击属性的名称从而在这些值之间切换。如果可选的值比较多，但数量仍然有限，那么将这些值保存在一个下拉列表中。有些属性具有很多选项，在属性值的右边有一个椭圆形的按钮，单击该按钮将弹出一个对话框，可以从中选择所需的值。最后，有些属性可以接收字符串，所以它们的值保存在文本框中。如果能在属性值中进行选择或者切换，那么最好不要用输入的方式为该属性赋值。在修改完成之后，必须按下Enter或Tab键，或者单击其他属性，才能最终设定属性的值。此时Design视图将显示出所作的修改。
也可以在Source视图中直接输入属性的值。将插入条放置在某个标记内并单击空格键以调用IntelliSense显示一组在插入条处可以插入的属性。输入属性名的前一个或前两个字母，然后输入一个等号。IntelliSense功能将显示属性的所有合法值(如果数量有限的话)，再次输入所需属性值的前一个或前两个字母。按下空格键结束输入。注意，如果可能属性值的范围不是有限的，则没有值列表。例如，值为SQL语句的属性就没有IntelliSense功能，开发人员必须输入SQL语句。
1.7.9错误列表窗口 在程序出现问题时，主要有两种方法可以查看该问题。首先是发送到浏览器的页面错误报告，其次是VWD中的ErrorList窗口。
如果Web.config文件中包含下面阴影部分的代码，那么ASP.NET2.0将把与页面相关的错误报告发送到浏览器(如图1-12所示)。
图1-12
<system.web >
<compilationdebug="true" >
</compilation >
注意，在第一次运行(F5)页面的时候，Web.config中默认的设置是<compilationdebug="true"strict="false"explicit="true"/ >。
由于默认为true，因此在没有特殊设置的情况下调试开关是打开的。所以下面的示例中debug=true并没有改变默认设置。当然，通过将调试开关设置为true，可以帮助开发小组中其他可能会查看设置的程序员：
<system.web >
<compilation ></compilation >
如果页面上存在致命错误，那么运行该页面时浏览器中将显示一个以黄色和白色为主色调的页面。在黄色部分的下面是引发错误的文件名称和该文件中包含错误的行号。所有错误的情况都一样，具体的错误可能只是与该行号相关，但这应该是一个很好的线索。注意，在部署站点的时候，应该将Web.config文件中的debug命令设置为false以提高性能，并减少提供给黑客的信息。第15章将深入讨论错误处理。
识别错误的第二种方法是在VWD内部使用ErrorList窗口，如图1-13所示。默认情况下，这个窗口只有在运行页面的时候才会显示出来。可以通过菜单View- >ErrorList强行显示该窗口。该窗口显示在将页面转换成MSIL时遇到的所有问题。
图1-13
注意在ErrorList窗口的顶部有3个图标：Errors、Warnings和Messages，单击这些图标将显示在编译页面时创建的不同项列表。隐藏某个类型的项并没有把它们从列表中删除；这样做只是使得列表比较短而已。从左边开始的第二列标识错误发生的顺序。
错误(Error)使得整个页面，或者页面的某个部分运行失败。这包括，例如，引用不存在的对象。
警告(Warning)是一些在编译页面时VWD可以解决的问题(例如，缺少结束标记)。
消息(Message)是程序员包含在代码中的文本，当IIS编译页面时这些消息会显示出来。
在查看项列表的时候可以单击某个列的标题进行排序。如果按住Shift键单击另一个列标题，这将使得在第一个列中具有相同值的数据项按照第二列的值再次进行排序。另外，通过拖动列标题之间的分隔线可以调整每列的大小，或者通过左右拖动列名称来重新排序。双击某个数据项可以将光标定位到导致该消息产生的代码行。
在下面的“试一试”部分中，将练习修改History页面上的一个图片控件的属性。接着制造一些错误并观察结果。
(1)在Design视图中打开History页面。在SolutionExplorer中，打开Images文件夹并将名为logo-yellow的jpeg文件拖放到History页面的顶端。VWD将自动创建一个图片，并将该图片的源地址设置为前面的jpeg文件。
(2)单击该图片从而选中它，然后切换到Properties窗口(或按下F4打开该窗口)。将图片的高度从447修改成100并按下Enter设定该值。您将看到，所作的修改将在设计面板中立刻反映出来。
(3)现在从Source视图中修改属性。找到<img >控件并找到其中的高度属性。将该属性的值从100修改为300。单击绿色箭头(或按F5)运行页面以查看结果。
(4)关闭浏览器并返回到Source视图。找到<img >标记并将光标定位在height=“300”的闭引号后面，单击空格键。这将调用IntelliSense工具显示所有在这个位置可以使用的属性列表。按下t键然后按下i键从而使列表移动到Title属性。按下等号(=)关闭IntelliSense工具并输入“WroxLogoInYellow”，注意输入的内容包括开引号和闭引号。运行页面，在浏览器中将鼠标移动到图片上时，可以看到刚才创建的标题。关闭浏览器。
(5)接下来引入一个非致命(non-fatal)错误。在Source视图中打开History页面并找到页面顶部的<h1 >标记。将<h1 >标记修改成<H1xx >并运行页面。在浏览器中，可以看到“WroxUnited-apottedhistory”文本没能以一号标题的样式显示。关闭浏览器并切换回VWD观察ErrorsList窗口。如果该窗口不可见，则使用菜单View→ErrorList显示ErrorList窗口。可以看到在列表中有两个错误。第一个错误指出不支持第3行的“h1xx”。第二个错误指出第4行的</h1 >闭标记没有匹配的开标记。
(6)最后引入一个致命错误。在Source视图中，滚动到页面顶端并将第一行的Language=“VB”修改成Language=“Esperanto”，然后运行页面。注意前面的等于号两端都没有空格。
(7)在本书的各个章节中，将练习解决各种各样的错误。目前，只需删除<img >标记、将<h1xx >恢复为正确的<h1 >标记并将语言修改回VB即可。
(8)保存页面。
操作回顾 在此使用了三种修改属性的方法。第一种是在Design视图下工作并在Properties窗口中输入新的属性值。接下来是在源代码中直接手动输入属性值。最后，使用IntelliSense工具为一个已经存在的控件添加属性。
可以观察到两种类型的错误：致命的和非致命的。如果是第一种错误，那ASP.NET2.0仍然可以显示页面，即使错误的标记<h1xx >使得文本以默认样式而不是一号标题样式显示。虽然页面可以显示，但是返回VWD可以看到ＥrrorList窗口记录了两条错误消息。通过将编程语言修改成一种不支持的语言，引入了一个更加严重的错误。ASP.NET2.0无法克服这个错误，因此看到了两个结果：在浏览器中显示带有错误排查信息的错误页面，在VWD中错误列表显示多条错误。
1.7.10VWD的数据库浏览器
当开始处理数据的时候(在第7章和后面的章节中)，可以使用VWD中的工具获得数据源的信息。这些信息包括具体的表名称和列名称。实际上，将在本书的后续章节中看到，可以把表列拖放到设计区，VWD会自动设置恰当的控件显示表列中的数据。目前，只需了解在SolutionExplorer中双击AccessMDB的名称就可以在Access中打开该文件(假设已安装了Access)。对于SQLServer数据库(如本书所示)，可以使用工具DatabaseExplorer更详细地查看数据库并修改其中的数据和属性。附录D中详细讨论了这些功能。
Microsoft在2.0版本中对ASP.NET做了很大的改动。最大的好处是，以前需要编写客户代码才能完成的任务现在只需向页面拖放预建好的控件即可。这些预建控件包括用户登录工具、导航工具、数据库连接工具、数据显示工具、创建一致的站点外观的工具、以及向用户提供定制选项。开发人员现在可以更快速地开发更加健壮的动态页面。除此之外，Microsoft还简化了2.0版本的部署，并提高了它的性能。与旧版的ASP一样，代码只在服务器上执行(也就是指编译动态页面)，发送给浏览器的只有标准HTML代码。因此，ASP.NET2.0和所有的浏览器都兼容。
Microsoft为使用ASP.NET2.0创建页面提供了3个工具。其中的一个是本书所用的VisualWebDeveloperExpress(VWD)。VWD可以显示站点页面的组织情况，并帮助开发人员创建新页面或修改已经存在的页面。VWD还附带了一个轻量级的Web服务器Cassini，用于测试页面。在创建页面之后可以单击Run图标，VWD将启动Cassini、打开浏览器、编译页面并将该页面发送到浏览器。本章还讨论了以下内容：
●VWD提供多种查看和处理页面的方式。可以通过选项卡在Design视图(显示页面的外观)和Source视图(显示页面的标记和源代码)之间切换。
●在创建新站点或添加页面时，VWD提供向导和模板帮助开发人员完成常见的设置。本章介绍了如何使用模板创建新页面，接着介绍了工具箱。工具箱中包含了很多预建对象，这些对象在以后各章创建页面时都是学习的重点。为了组织工具箱，各种工具按组存放在不同的面板中。
●另一个窗口显示当前选中对象的属性。例如，可以选中一个文本框，然后查看它的大小、背景色和其他各种属性。本书的后续章节将详细讨论ASP.NET2.0支持的各种对象的属性。
●在VWD中执行Run命令时将编译页面，开发人员可以获取编译过程的反馈信息。致命错误、潜在问题的警告信息都将被列举出来。双击某个错误可以将光标定位到产生该错误的代码行。
本章主要是介绍ASP.NET2.0以及怎样使用VWD创建第一个页面。第2章继续介绍ASP.NET2.0的一些功能，这些功能控制着页面的外观。
(1)解释.NET2.0Framework、ASP.NET2.0、VWD和IIS之间的差别。
(2)列举Cassini和IIS之间的差别。
(3)在拖动工具栏的标题栏时它将定位到屏幕上的某个位置并重新调整大小。怎样才能把标题栏拖放到预定的位置？
(4)怎样将位于C:\MyPhotos的.jpg文件复制到站点中以便在页面上显示该图片？
(5)您希望为站点添加一个子文件夹，但AddItems菜单中没有Folder选项。这是为什么？
(6)Microsoft编写了大量的代码以简化程序员创建页面的工作。程序员实际上是怎样使用这些代码的？
(7)为什么在Toolbox的General面板中没有任何工具？
eQ0R購*N`SMO&{-N<