Visual Studio 中添加控件.doc

使用Visual Studio添加控件Visual Studio(与ASP.NET)对Web开发的底层技术做了包装。正如您在之前章节看到的，Web开发要追溯到20世纪70年代中期的终端-主机时代。不过，现在终端变成了复杂的浏览器，计算平台变成了Web服务器(或Web场)，并且用户遍及全球。客户端浏览器与服务器进行一次交互，客户端收到的只是服务器状态的一个快照。这是因为构建Web用户界面的标记语言是以非连接协议为基础的。在Visual Studio中构建应用程序非常像是在开发桌面应用程序。使用Visual Studio，开发者不必花大量时间录入ASP风格的代码。设计器是以可视方式设计Web UI的理想工具。为学习如何使用Visual Studio，下面我们使用服务器端控件来开发一个简单的页面。该页面看起来与前面给出的示例页面差不多。使用Visual Studio构建一个页面1.在Visual Studio中，新建一个ASP.NET空Web应用程序。将该项目命名为ControlsORama，如下图所示。2.添加默认页面。在项目节点上右击，依次选择添加-|新建项命令。在添加新项对话框列出的模板中，选择Web窗体，将其命名为Default.aspx，并单击确定按钮。Visual Studio会打开Default.aspx标记的编辑窗口。单击编辑框口底部的设计选项卡，将当前视图切换至设计视图(见下图)。Visual Studio生成的ASP.NET页面包含一个HTML 标签。在设计器中修改页面元素后，为查看Visual Studio生成的代码，可以单击设计窗口底部的源选项卡。Visual Studio还提供了一个贴心的拆分视图，可以同时看到设计和源视图的内容。在设计视图中输入的文本会显示在页面顶部。单击虚线框的内部，然后输入Page in Visual Studio。下图展示了插入文本后的设计视图。3.编辑页面上文本的格式。为此，我们需要查看页面的属性。将文本选中，并在之上右击，选择属性命令。在属性窗口中选择Style属性。此时，对应的值字段会显示一个省略号按钮( )。单击该按钮会打开修改样式对话框。在这个对话框中，我们可以修改的属性，其中包括字体样式和大小。按下图所示设置font-family、font-size和font-weight的值，并单击确定按钮。4.单击Visual Studio左侧的工具箱选项卡来打开工具箱窗口，如下图所示。5.插入一个换行标记()，从工具箱中拖放一个Label控件到页面上，然后按下图所示选择它。(Visual Studio的设计器会在该标签的上端添加一个小标记，这有助于在开发者选择它时在设计器中辨别它。)6.查看该标签控件的属性并编辑其内容。如果属性窗口未被显示，可以在该标签上右击，然后从快捷菜单中选择属性命令。该控件的属性窗口如下图所示。读者可以随意修改该标签的外观。本示例的标签控件使用的是小号的Times New Roman字体，其文本内容为Type in me:。7.从工具箱拖放一个TextBox控件到页面上，将其置于Label控件旁边。在这个TextBox后面，插入一个换行标签()。8.接下来，从工具箱拖放一个DropDownList到页面上。下图展示了这个下拉列表控件在设计器中的样式。在将该控件拖放到页面上后，Visual Studio便允许我们通过如图所示的快捷菜单来为DropDownList添加项。单击DropDownList任务菜单上的编辑项选项。此时会打开ListItem集合编辑器，如下图所示。每次单击添加按钮，ListItem集合编辑器都会向DropDownList的集合中添加一个新项。在添加并选择一项后，可以对其显示的名称(Text属性)进行编辑。也可以添加一个与文本对应的值。例如，在库存跟踪应用程序中，可以将Text属性设置为产品名，而将Value属性设置为企业内部的产品编码。这两个属性都可以在运行时获取。按下图所示在这个DropDownList中添加一些项目。添加完毕后单击确定按钮。9.在页面中添加一个按钮。首先，在DropDownList控件后面添加一个换行标签()。然后，从工具箱拖放一个Button到页面上。此时的页面如下图所示。修改按钮的Text属性，为其添加一个有意义的描述。在继续构建这个页面之前，让我们先来看一下Visual Studio生成的源代码。Visual Studio会在代码中为Label、TextBox、DropDownList和Button控件分别添加一个成员变量(通过控件标记中的runat=server便可以看出)。此时，.aspx文件的内容(从标签开始)应与清单3.5所列代码类似。清单3.5 Default.aspx文件最终的标记1. 2. 4. PageinVisualStudio5. 6. 7. 8. 9. Item110. Item211. Item312. Item413. Item514. Item615. 16. 17. 18. 19. 需要注意的是，所有在服务器端运行的ASP.NET标签都有ID属性。这是在运行时区分不同控件的标识符。我们稍后会用到它。10.最后，为使按钮真正发挥作用，需要在页面中为其添加事件处理程序，以便在该按钮被单击后作出响应。添加事件处理程序最简单的方法是在设计视图双击该按钮。Visual Studio会为按钮的单击事件生成一个处理程序，并显示在源视图中。此时便可以添加响应按钮单击事件的代码了。11.在按钮的事件处理程序中添加清单3.6所示代码。清单3.6 按钮的事件处理程序1. protectedvoidButton1_Click(objectsender,EventArgse) 2. 3. Response.Write(Hello.Hereswhatyoutypedintothetextbox:); 4. Response.Write(this.TextBox1.Text); 5. 6. Response.Write(); 7. Response.Write(Andtheselecteditemis:); 8. Response.Write(this.DropDownList1.SelectedItem.Text); 9. 这段响应按钮单击事件的代码使用Response对象向输出流发送了一些文本。Response.Write的输出是客户端浏览器最先读取的文本，因此这些文本会显示在页面的顶端。需要注意的是，这段处理程序使用了页面类中的TextBox1成员变量。这说明我们能够以编程方式在运行时调用控件。下图展示了该页面在浏览器中的效果。注意，Response.Write输出的文本会被插入到所有控件之前。为测试页面上的控件，可以在调试菜单中选择开始执行(不调试)。为查看所有服务器端控件生成的HTML，可以查看发送给浏览器的源文件。(如果使用Internet Explorer，则依次在命令栏中单击页面-|查看源文件命令)打开源文件后，应看到清单3.7所示的代码。注意，Response.Write输出的文本位于输出流的最顶端。清单3.7 运行Default.aspx后得到的HTML1. Hello.Hereswhatyoutypedintothetextbox:Helloworld2. Andtheselecteditemis:Item4 3. 4. 6. 7. 8. 9. 10. 11. 12. 13. 14. 16. 17. 18. 20. 21. 23. PageinVisualStudio24. Typeinme:25. 26. 27. 28. Item129. Item230. Item331. Item432. Item533. Item634. 35. 36. 37. 38. 39. 40. 注意，浏览器所显示的是纯HTML-是ASP.NET通过页面的呈现模型生成的，但浏览器不会对此有察觉。布局技巧在构建上一页面时，您可能会发现它采用的是流布局。即每次将控件拖放到页面上，设计器总会将其置于其他控件的后面。某些版本的Visual Studio采用的默认行为与之不同。Visual Studio 2003对页面上的元素采用的是绝对定位(就像在开发富客户端或标准的Windows应用程序一样)。虽然Visual Studio 2010没有在设计器直接提供设置定位方式的选项，但可以通过应用于整个页面或页面中某个元素的样式来进行设置。为对页面添加新的样式，请确保当前窗口显示的是设计器，然后在Visual Studio的主菜单中依次单