Visual Studio 中添加控件.docx
- 文档编号:5781333
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:13
- 大小:349.30KB
Visual Studio 中添加控件.docx
《Visual Studio 中添加控件.docx》由会员分享,可在线阅读,更多相关《Visual Studio 中添加控件.docx(13页珍藏版)》请在冰豆网上搜索。
VisualStudio中添加控件
使用VisualStudio添加控件
VisualStudio(与ASP.NET)对Web开发的底层技术做了包装。
正如您在之前章节看到的,Web开发要追溯到20世纪70年代中期的"终端-主机"时代。
不过,现在终端变成了复杂的浏览器,计算平台变成了Web服务器(或Web场),并且用户遍及全球。
客户端浏览器与服务器进行一次交互,客户端收到的只是服务器状态的一个快照。
这是因为构建Web用户界面的标记语言是以非连接协议为基础的。
在VisualStudio中构建应用程序非常像是在开发桌面应用程序。
使用VisualStudio,开发者不必花大量时间录入ASP风格的代码。
"设计器"是以可视方式设计WebUI的理想工具。
为学习如何使用VisualStudio,下面我们使用服务器端控件来开发一个简单的页面。
该页面看起来与前面给出的示例页面差不多。
使用VisualStudio构建一个页面
1.在VisualStudio中,新建一个"ASP.NET空Web应用程序"。
将该项目命名为ControlsORama,如下图所示。
2.添加默认页面。
在项目节点上右击,依次选择"添加"-""|"新建项"命令。
在"添加新项"对话框列出的模板中,选择"Web窗体",将其命名为Default.aspx,并单击"确定"按钮。
VisualStudio会打开Default.aspx标记的编辑窗口。
单击编辑框口底部的"设计"选项卡,将当前视图切换至"设计"视图(见下图)。
VisualStudio生成的ASP.NET页面包含一个HTML
在"设计器"中修改页面元素后,为查看VisualStudio生成的代码,可以单击设计窗口底部的"源"选项卡。
VisualStudio还提供了一个贴心的"拆分"视图,可以同时看到"设计"和"源"视图的内容。
在"设计"视图中输入的文本会显示在页面顶部。
单击虚线框的内部,然后输入PageinVisualStudio。
下图展示了插入文本后的"设计"视图。
3.编辑页面上文本的格式。
为此,我们需要查看页面的属性。
将文本选中,并在之上右击,选择"属性"命令。
在"属性"窗口中选择Style属性。
此时,对应的值字段会显示一个省略号按钮(
)。
单击该按钮会打开"修改样式"对话框。
在这个对话框中,我们可以修改
按下图所示设置font-family、font-size和font-weight的值,并单击"确定"按钮。
4.单击VisualStudio左侧的"工具箱"选项卡来打开"工具箱"窗口,如下图所示。
5.插入一个换行标记(
),从"工具箱"中拖放一个Label控件到页面上,然后按下图所示选择它。
(VisualStudio的"设计器"会在该标签的上端添加一个小标记,这有助于在开发者选择它时在"设计器"中辨别它。
)
6.查看该标签控件的属性并编辑其内容。
如果"属性"窗口未被显示,可以在该标签上右击,然后从快捷菜单中选择"属性"命令。
该控件的"属性"窗口如下图所示。
读者可以随意修改该标签的外观。
本示例的标签控件使用的是小号的TimesNewRoman字体,其文本内容为Typeinme:
。
7.从"工具箱"拖放一个TextBox控件到页面上,将其置于Label控件旁边。
在这个TextBox后面,插入一个换行标签(
)。
8.接下来,从"工具箱"拖放一个DropDownList到页面上。
下图展示了这个下拉列表控件在"设计器"中的样式。
在将该控件拖放到页面上后,VisualStudio便允许我们通过如图所示的快捷菜单来为DropDownList添加项。
单击"DropDownList任务"菜单上的"编辑项"选项。
此时会打开"ListItem集合编辑器",如下图所示。
每次单击"添加"按钮,"ListItem集合编辑器"都会向DropDownList的集合中添加一个新项。
在添加并选择一项后,可以对其显示的名称(Text属性)进行编辑。
也可以添加一个与文本对应的值。
例如,在库存跟踪应用程序中,可以将Text属性设置为产品名,而将Value属性设置为企业内部的产品编码。
这两个属性都可以在运行时获取。
按下图所示在这个DropDownList中添加一些项目。
添加完毕后单击"确定"按钮。
9.在页面中添加一个按钮。
首先,在DropDownList控件后面添加一个换行标签(
)。
然后,从"工具箱"拖放一个Button到页面上。
此时的页面如下图所示。
修改按钮的Text属性,为其添加一个有意义的描述。
在继续构建这个页面之前,让我们先来看一下VisualStudio生成的源代码。
VisualStudio会在代码中为Label、TextBox、DropDownList和Button控件分别添加一个成员变量(通过控件标记中的runat=server便可以看出)。
此时,.aspx文件的内容(从
需要注意的是,所有在服务器端运行的ASP.NET标签都有ID属性。
这是在运行时区分不同控件的标识符。
我们稍后会用到它。
10.最后,为使按钮真正发挥作用,需要在页面中为其添加事件处理程序,以便在该按钮被单击后作出响应。
添加事件处理程序最简单的方法是在"设计"视图双击该按钮。
VisualStudio会为按钮的单击事件生成一个处理程序,并显示在"源"视图中。
此时便可以添加响应按钮单击事件的代码了。
11.在按钮的事件处理程序中添加清单3.6所示代码。
清单3.6 按钮的事件处理程序
1.protected void Button1_Click(object sender, EventArgs e)
2. {
3. Response.Write("Hello. Here's what you
typed into the text box:
");
4. Response.Write(this.TextBox1.Text);
5.
6. Response.Write("
");
7. Response.Write("And the selected item is:
");
8. Response.Write(this.DropDownList1.SelectedItem.Text);
9. }
这段响应按钮单击事件的代码使用Response对象向输出流发送了一些文本。
Response.Write的输出是客户端浏览器最先读取的文本,因此这些文本会显示在页面的顶端。
需要注意的是,这段处理程序使用了页面类中的TextBox1成员变量。
这说明我们能够以编程方式在运行时调用控件。
下图展示了该页面在浏览器中的效果。
注意,Response.Write输出的文本会被插入到所有控件之前。
为测试页面上的控件,可以在"调试"菜单中选择"开始执行(不调试)"。
为查看所有服务器端控件生成的HTML,可以查看发送给浏览器的源文件。
(如果使用InternetExplorer,则依次在命令栏中单击"页面"-""|"查看源文件"命令)打开源文件后,应看到清单3.7所示的代码。
注意,Response.Write输出的文本位于输出流的最顶端。
清单3.7 运行Default.aspx后得到的HTML
1.Hello. Here's what you typed into the text box:
Hello world
2.And the selected item is:
Item 4
3.
4.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
5. "http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6.
7.
8.
//www.w3.org/1999/xhtml">
9.
10.
11.
12.
39.
40.
注意,浏览器所显示的是纯HTML--是ASP.NET通过页面的呈现模型生成的,但浏览器不会对此有察觉。
布局技巧
在构建上一页面时,您可能会发现它采用的是流布局。
即每次将控件拖放到页面上,"设计器"总会将其置于其他控件的后面。
某些版本的VisualStudio采用的默认行为与之不同。
VisualStudio2003对页面上的元素采用的是绝对定位(就像在开发富客户端或标准的Windows应用程序一样)。
虽然VisualStudio2010没有在"设计器"直接提供设置定位方式的选项,但可以通过应用于整个页面或页面中某个元素的样式来进行设置。
为对页面添加新的样式,请确保当前窗口显示的是"设计器",然后在VisualStudio的主菜单中依次单击"格式"-""|"新建样式"命令。
此时会打开"新建样式"对话框(见下图)。
为通过样式来设置布局,在对话框左侧的"类别"列表中选择"定位"。
请注意设置定位方式的组合框。
在这里设置的样式可以应用于页面上的多个元素,只要这些元素通过CssClass属性引用样式类别名称即可。
不同的定位设置会使页面产生不同的布局方式。
为理解不同定位方式,可以在此尝试一下。
第7章中讨论母版页时会更深入地探讨有关样式的话题。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Visual Studio 中添加控件 添加 控件