Visual Studio 中添加控件

使用Visual Studio添加控件Visual Studio(与)对Web开发的底层技术做了包装。

正如您在之前章节看到的，Web开发要追溯到20世纪70年代中期的"终端-主机"时代。

不过，现在终端变成了复杂的浏览器，计算平台变成了Web服务器(或Web场)，并且用户遍及全球。

客户端浏览器与服务器进行一次交互，客户端收到的只是服务器状态的一个快照。

这是因为构建Web用户界面的标记语言是以非连接协议为基础的。

在Visual Studio中构建应用程序非常像是在开发桌面应用程序。

使用Visual Studio，开发者不必花大量时间录入ASP风格的代码。

"设计器"是以可视方式设计Web UI 的理想工具。

为学习如何使用Visual Studio，下面我们使用服务器端控件来开发一个简单的页面。

该页面看起来与前面给出的示例页面差不多。

使用Visual Studio构建一个页面1.在Visual Studio中，新建一个"空Web应用程序"。

将该项目命名为ControlsORama，如下图所示。

2.添加默认页面。

在项目节点上右击，依次选择"添加"-""|"新建项"命令。

在"添加新项"对话框列出的模板中，选择"Web窗体"，将其命名为Default.aspx，并单击"确定"按钮。

Visual Studio会打开Default.aspx标记的编辑窗口。

单击编辑框口底部的"设计"选项卡，将当前视图切换至"设计"视图(见下图)。

Visual Studio生成的页面包含一个HTML <div>标签。

在"设计器"中修改页面元素后，为查看Visual Studio生成的代码，可以单击设计窗口底部的"源"选项卡。

Visual Studio还提供了一个贴心的"拆分"视图，可以同时看到"设计"和"源"视图的内容。

在"设计"视图中输入的文本会显示在页面顶部。

单击虚线框的内部，然后输入Page in Visual Studio。

下图展示了插入文本后的"设计"视图。

3.编辑页面上文本的格式。

为此，我们需要查看页面的属性。

将文本选中，并在之上右击，选择"属性"命令。

在"属性"窗口中选择Style属性。

此时，对应的值字段会显示一个省略号按钮( )。

单击该按钮会打开"修改样式"对话框。

在这个对话框中，我们可以修改<div>的属性，其中包括字体样式和大小。

按下图所示设置font-family、font-size和font-weight的值，并单击"确定"按钮。

4.单击Visual Studio左侧的"工具箱"选项卡来打开"工具箱"窗口，如下图所示。

5.插入一个换行标记(<br/>)，从"工具箱"中拖放一个Label控件到页面上，然后按下图所示选择它。

(Visual Studio的"设计器"会在该标签的上端添加一个小标记，这有助于在开发者选择它时在"设计器"中辨别它。

)6.查看该标签控件的属性并编辑其内容。

如果"属性"窗口未被显示，可以在该标签上右击，然后从快捷菜单中选择"属性"命令。

该控件的"属性"窗口如下图所示。

读者可以随意修改该标签的外观。

本示例的标签控件使用的是小号的Times New Roman字体，其文本内容为Type in me:。

7.从"工具箱"拖放一个TextBox控件到页面上，将其置于Label控件旁边。

在这个TextBox后面，插入一个换行标签(<br/>)。

8.接下来，从"工具箱"拖放一个DropDownList到页面上。

下图展示了这个下拉列表控件在"设计器"中的样式。

在将该控件拖放到页面上后，Visual Studio便允许我们通过如图所示的快捷菜单来为DropDownList添加项。

单击"DropDownList任务"菜单上的"编辑项"选项。

此时会打开"ListItem集合编辑器"，如下图所示。

每次单击"添加"按钮，"ListItem集合编辑器"都会向DropDownList的集合中添加一个新项。

在添加并选择一项后，可以对其显示的名称(Text属性)进行编辑。

也可以添加一个与文本对应的值。

例如，在库存跟踪应用程序中，可以将Text属性设置为产品名，而将Value属性设置为企业内部的产品编码。

这两个属性都可以在运行时获取。

按下图所示在这个DropDownList中添加一些项目。

添加完毕后单击"确定"按钮。

9.在页面中添加一个按钮。

首先，在DropDownList控件后面添加一个换行标签(<br/>)。

然后，从"工具箱"拖放一个Button到页面上。

此时的页面如下图所示。

修改按钮的Text属性，为其添加一个有意义的描述。

在继续构建这个页面之前，让我们先来看一下Visual Studio生成的源代码。

Visual Studio会在代码中为Label、TextBox、DropDownList和Button控件分别添加一个成员变量(通过控件标记中的runat=server便可以看出)。

此时，.aspx文件的内容(从<form>标签开始)应与清单3.5所列代码类似。

清单3.5 Default.aspx文件最终的标记1.<form id="form1"runat="server">2.<div style=3."font-family: 'Times New Roman', Times,serif; font-size: 14pt; font-weight: bold">4. Page in Visual Studio<br/>5.<asp:Label ID="Label1"runat="server"Text="Type in me:"></asp:Label>6.<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox>7.<br/>8.<asp:DropDownList ID="DropDownList1"runat="server">9.<asp:ListItem>Item 1</asp:ListItem>10.<asp:ListItem>Item 2</asp:ListItem>11.<asp:ListItem>Item 3</asp:ListItem>12.<asp:ListItem>Item 4</asp:ListItem>13.<asp:ListItem>Item 5</asp:ListItem>14.<asp:ListItem>Item 6</asp:ListItem>15.</asp:DropDownList>16.<br/>17.<asp:Button ID="Button1"runat="server"Text="Click Me"/>18.</div>19.</form>需要注意的是，所有在服务器端运行的标签都有ID属性。

这是在运行时区分不同控件的标识符。

我们稍后会用到它。

10.最后，为使按钮真正发挥作用，需要在页面中为其添加事件处理程序，以便在该按钮被单击后作出响应。

添加事件处理程序最简单的方法是在"设计"视图双击该按钮。

Visual Studio会为按钮的单击事件生成一个处理程序，并显示在"源"视图中。

此时便可以添加响应按钮单击事件的代码了。

11.在按钮的事件处理程序中添加清单3.6所示代码。

清单3.6 按钮的事件处理程序1.protected void Button1_Click(object sender, EventArgs e)2. {3. Response.Write("Hello. Here's what youtyped into the text box: <br/>");4. Response.Write(this.TextBox1.Text);5.6. Response.Write("<br/>");7. Response.Write("And the selected item is: <br/>");8. Response.Write(this.DropDownList1.SelectedItem.Text);9. }这段响应按钮单击事件的代码使用Response对象向输出流发送了一些文本。

Response.Write的输出是客户端浏览器最先读取的文本，因此这些文本会显示在页面的顶端。

需要注意的是，这段处理程序使用了页面类中的TextBox1成员变量。

这说明我们能够以编程方式在运行时调用控件。

下图展示了该页面在浏览器中的效果。

注意，Response.Write输出的文本会被插入到所有控件之前。

为测试页面上的控件，可以在"调试"菜单中选择"开始执行(不调试)"。

为查看所有服务器端控件生成的HTML，可以查看发送给浏览器的源文件。

(如果使用Internet Explorer，则依次在命令栏中单击"页面"-""|"查看源文件"命令)打开源文件后，应看到清单3.7所示的代码。