《第三章Web窗体》由会员分享，可在线阅读，更多相关《第三章Web窗体（38页珍藏版）》请在金锄头文库上搜索。
1、第3章 Web 窗体教学提示：教学提示：Web窗体窗体(WebForm)表示一表示一个个Web页面，页面，ASP.NET的的Web窗体页面窗体页面架构是一个可升级的公用语言运行程序模架构是一个可升级的公用语言运行程序模型。型。【本章教学目的本章教学目的】n了解与掌握利用可视化编程方法来制作了解与掌握利用可视化编程方法来制作Web窗体；窗体；n掌握可视化掌握可视化Web窗体页面的设计方法及窗体页面的设计方法及编制有关程序语句。编制有关程序语句。3.1 Web 窗体概述nASP.NET中的中的Web窗体窗体(WebForm)就是就是指一个网页指一个网页,编制一个编制一个Web窗体也就是编制窗体也就
2、是编制一个网页。一个网页。n不同于不同于HTML文件。文件。n后缀名为后缀名为aspx，编译后可直接调用执行。，编译后可直接调用执行。3.2 ASP与ASP.NET区别n1、代码存储方式不同、代码存储方式不同n2、支持的语言不同、支持的语言不同n3、执行机制不同、执行机制不同n一般一般ASP程序和网页的程序和网页的HTML混合在一起，混合在一起，这就使得程序看上去相当的杂乱，修改与更这就使得程序看上去相当的杂乱，修改与更新都十分不方便；新都十分不方便；nASP页面是有脚本语言解释执行的，受到脚页面是有脚本语言解释执行的，受到脚本语言自身条件的限制，在编写本语言自身条件的限制，在编写ASP程序的
3、程序的时候不得不调用时候不得不调用COM组件来完成一些功能；组件来完成一些功能；所以，微软推出了所以，微软推出了ASP.NET 3.3 ASP .NET可视化Web窗体编制n采用可视化的方式采用可视化的方式,充分利用充分利用.NET2005众多的控件、完善的功能来进行编程。众多的控件、完善的功能来进行编程。n好处好处：这样可以大大提高编程效率，充：这样可以大大提高编程效率，充分体现出分体现出ASP.NET的优越性。的优越性。n点击点击“MicrosoftVisualStudio.NET”图标，屏幕出现如下画面：图标，屏幕出现如下画面：3.3 ASP .NET可视化Web窗体编制3.3 ASP
4、.NET可视化Web窗体编制依次单击上端菜单的依次单击上端菜单的【文件文件】-【新建新建】-【网站网站】,屏幕出现如下画面：屏幕出现如下画面：3.3 ASP .NET可视化Web窗体编制n选择上图的选择上图的ASP.NET网站网站n对话框中选择对话框中选择“文件系统文件系统”，n语言：选择语言：选择VisaulC#;n位置输入：位置输入：d:2008；3.3 Web窗体源程序编制界面3.3 Web窗体可视化编制界面3.3 ASP .NET可视化Web窗体编制n工具箱工具箱n解决方案解决方案n工具栏工具栏n模式模式n运行运行n环境设置环境设置n添加新项添加新项n格式格式n布局布局nWeb窗体的生
5、命周期n初始化页面加载-事件处理资源清理nEg.简单的问候显示。*明白什么是事件*3.5 ASP.NETWeb窗体制作基础窗体制作基础n使用使用ASP.NET编制编制Web窗体重要的方法是掌握各窗体重要的方法是掌握各种控件的使用，熟练各种控件的运用与设置是掌种控件的使用，熟练各种控件的运用与设置是掌握握ASP.NET编程的关键所在。编制编程的关键所在。编制Web窗体的基窗体的基本步骤：本步骤：n首先将所需要的控件拖放到首先将所需要的控件拖放到Web窗体中，对控件窗体中，对控件的属性进行各种设置；的属性进行各种设置；n然后进行后台编程，也就是对相应的然后进行后台编程，也就是对相应的.cs文件进行
6、文件进行程序语句的插入；程序语句的插入；n进行进行运行调试。进行进行运行调试。n重要指令npagencontrolnRegisternOutputCacheWeb 窗体实例制作3.5.1图片变化图片变化要求：要求：建立一个新的建立一个新的Web窗体，通过按钮控制窗体，通过按钮控制图片是否显示。图片是否显示。操作步骤：操作步骤：从工具箱中拖放从工具箱中拖放“ImageBtton”(图图形按钮形按钮)控件到窗体中，然后右点击该控件，选控件到窗体中，然后右点击该控件，选择属性，在选择属性中的择属性，在选择属性中的“ImageUrl”，然后，然后选定在相应文件夹中的图形文件，如下图：选定在相应文件夹中
7、的图形文件，如下图：3.5.1 图片变化图片变化3.5.1 图片变化图片变化n然后双击然后双击“开关开关”按钮，进入按钮，进入cs文件的编程操文件的编程操作界面，在相应的位置输入以下语句：作界面，在相应的位置输入以下语句：nprotectedvoidButton1_Click(objectsender,EventArgse)nnImageButton1.Visible=!ImageButton1.Visible;nn完成后按完成后按“F5”进行编译，点击进行编译，点击“开关开关”按钮，按钮，可以看到图形消失，再按一次又出现的效果。可以看到图形消失，再按一次又出现的效果。3.5.1 图片变化图片
8、变化n第一个按钮操作完成之后，可以进行余下的按钮编第一个按钮操作完成之后，可以进行余下的按钮编程操作，方法相同，在双击上图中程操作，方法相同，在双击上图中“图片图片”在相应在相应的位置输入以下语句：的位置输入以下语句：nprotectedvoidImageButton1_Click(objectsender,ImageClickEventArgse)nnif(ImageButton1.ImageUrl=1.jpg)nImageButton1.ImageUrl=2.jpg;nelsenImageButton1.ImageUrl=1.jpg;n完成后按完成后按F5编译，点击图形可以看到变化的图编译
9、，点击图形可以看到变化的图形显示。形显示。 3.5.2网页中表格的生成n操作步骤：操作步骤：建立一个新的建立一个新的Web窗体，窗体，从工具箱中拖放二个从工具箱中拖放二个“Label”（标（标签）、二个签）、二个“TextBox”(输入框输入框)与与一个一个“Table”（表格）控件。并在（表格）控件。并在其属的其属的“Text”进行如书中进行如书中63页图页图3-18的设置，完成后点击的设置，完成后点击“确定确定”按钮，按钮，输入以后语句：输入以后语句： 1行1列 1行2列 1行3列 2行1列 2行2列 2行3列 3.5.2网页中表格的生成protectedvoidButton1_Click
10、(objectsender,EventArgse)Response.Write();for(inta=1;aConvert.ToInt16(TextBox2.Text)+1;a+)Response.Write();for(intb=1;bConvert.ToInt16(TextBox1.Text)+1;b+)Response.Write(+a.ToString()+行行+b.ToString()+“列列);Response.Write();Response.Write();3.5.2网页中表格的生成n通过编译后可以得到输入表格的行与列通过编译后可以得到输入表格的行与列数字，此处没有加输入验证（
11、验证控件数字，此处没有加输入验证（验证控件在第在第5章阐述），所以应该整数，然后按章阐述），所以应该整数，然后按确定就可以产生相应行与列数的表格。确定就可以产生相应行与列数的表格。此例说明，通过程序也可以产生此例说明，通过程序也可以产生HTML标记语句。标记语句。设置字体颜色的变化n操作步骤：操作步骤：建立一个新的建立一个新的Web窗体，从工具箱窗体，从工具箱的标准控件栏目中选取一个的标准控件栏目中选取一个Label（标签）与（标签）与DropDownList（下拉（下拉菜单）控件并进行相应的属性设置。菜单）控件并进行相应的属性设置。如书中如书中65页中图页中图3-19所示：所示： 设置字体颜
12、色的变化n根据书中图3-20、3-21、3-22、3-23所示的步骤完成设置，单击该选项后进入相应的cs文件编辑界面，由于字体颜色变化涉及到Drawing命名空间内容，所以在文件开始部位加入using System.Drawing;语句，然后在DropDownList1选择事件中插入以下语句：设置字体颜色的变化nprotectedvoidDropDownList1_SelectedIndexChanged(objectsender,EventArgse)nnLabel1.ForeColor=Color.FromName(DropDownList1.SelectedValue.ToString(
13、);nn完成后回到完成后回到DropDownList1属性设置对话框，选择其中属性设置对话框，选择其中AutoPostBack选项，将其设置为选项，将其设置为True，它的作用是每当选择，它的作用是每当选择了下拉菜单中的一个选项之后，即刻触发了下拉菜单中的一个选项之后，即刻触发DropDownList1中中事件的发生，见书中图事件的发生，见书中图3-23所示。运行后字体的颜色会随着在所示。运行后字体的颜色会随着在下拉菜单中不同的选择即时变化下拉菜单中不同的选择即时变化3.5.3记事日历n建立一个能显示当天日程安排与记事的日历，建立一个能显示当天日程安排与记事的日历，首先建立一个新的首先建立一个
14、新的Web窗体，从工具箱中拖放窗体，从工具箱中拖放一一“Calendar”(日历日历)控件，二个控件，二个“Label”控控（标签）件，一个（标签）件，一个“TextBox”（输入）与二个（输入）与二个“Button”（按钮）控件置于页面适当位置，（按钮）控件置于页面适当位置，并将按钮的并将按钮的“Text”属性改为属性改为“编辑编辑”与与“提提交交”；如下图所示：；如下图所示：3.5.3记事日历3.5.3记事日历n完成后将完成后将“TextBox”与与“提交提交”按钮的按钮的“Visible”属性属性改为改为false。双击编辑页面空白处，输入以下语句：。双击编辑页面空白处，输入以下语句：n
15、protectedvoidPage_Load(objectsender,EventArgse)nnif(!IsPostBack)nnCalendar1.SelectedDate=DateTime.Today;nCalendar1_SelectionChanged(this,null);nn3.5.3记事日历n这是页面运行时的初始过程这是页面运行时的初始过程nif(!IsPostBack)语句中！是否定意思，语句中！是否定意思，IsPostBack是否为提交后返回，因此此是否为提交后返回，因此此语句是页面第一次加载时所执行的操作。语句是页面第一次加载时所执行的操作。所以所以IsPostBack指
16、判断该指判断该Web窗体是窗体是否为响应客户端而发的。该语句在以后的否为响应客户端而发的。该语句在以后的编程中会经常用到，所以一定要加深理解。编程中会经常用到，所以一定要加深理解。3.5.3记事日历n随后按照书上第随后按照书上第67至至68页所提示的操作并输页所提示的操作并输入相应的语句。整个程序完成之后，执行时入相应的语句。整个程序完成之后，执行时可以显示出当日的活动安排，并且还可以在可以显示出当日的活动安排，并且还可以在以前或将来的日期中输入各种信息以便记录以前或将来的日期中输入各种信息以便记录与提示。该程序功能的还可以有多种方法实与提示。该程序功能的还可以有多种方法实现，如使用现，如使用
17、“Calendar”(日历日历)控件的其他控件的其他功能及不采用建立文本文件的方法而使用数功能及不采用建立文本文件的方法而使用数据库来记录日程数据等。据库来记录日程数据等。3.5.3记事日历n该程序主要是运用该程序主要是运用ASP.NET来建立文件与文件来建立文件与文件的读写操作。的读写操作。ASP.NET对文件的操作是很方便对文件的操作是很方便的，还可使用的，还可使用File.MoveFileInfo.MoveTo来来重命名或移动文件；使用重命名或移动文件；使用File.CopyFileInfo.CopyTo来复制文件；使来复制文件；使用用FileInfo.Length来获取文件的字节数；使
18、来获取文件的字节数；使用用File.GetAttributes来获取文件的属性；使来获取文件的属性；使用用File.SetAttributes来设置文件属性；使用来设置文件属性；使用CreateDirectoryDirectory来创建目录。来创建目录。计算器的制作n建立一个新的建立一个新的Web窗体，从工具箱中拖窗体，从工具箱中拖放一个放一个“Panel”(容器容器)控件置于页面中控件置于页面中央，并设置容器的背景与边框属性，然后央，并设置容器的背景与边框属性，然后“TextBox”（输入）控件，（输入）控件，16个个“Button”（按钮）控件置于容器中的适（按钮）控件置于容器中的适当位置
19、，并将按钮的当位置，并将按钮的“Text”属性中的字属性中的字体内容与大小进行适当的设置；如书上体内容与大小进行适当的设置；如书上69页图页图3-26所示：所示：计算器的制作n随后按照书上第随后按照书上第69至至70页所提示的操作页所提示的操作并输入相应的语句。整个程序完成之后，并输入相应的语句。整个程序完成之后，就可以运行这个小小的计算器了。就可以运行这个小小的计算器了。n通过以上几个实例可以看出，使用通过以上几个实例可以看出，使用ASP.NET来编制程序并不复杂，充分利来编制程序并不复杂，充分利用系统提供的控件，然后进行一些简单的用系统提供的控件，然后进行一些简单的语句输入就可以编制出种种
20、有用的程序。语句输入就可以编制出种种有用的程序。3.6ASP.NET编程调试与对错误的处理编程调试与对错误的处理n在制作在制作Web窗体时不可避免地会出现错误，如何尽窗体时不可避免地会出现错误，如何尽快地找出错误的语句是解决的关键。首先在编程过快地找出错误的语句是解决的关键。首先在编程过程中要学会使用程中要学会使用Ctrk+J的帮助提示，如果在编制过的帮助提示，如果在编制过程中按了程中按了Ctrk+J没有反应，很大可能就是已输入的没有反应，很大可能就是已输入的编程语句有错误，所以应该仔细检查一下。编程语句有错误，所以应该仔细检查一下。n进行编译时如遇到错误，则会中断编译而在屏幕下进行编译时如遇
21、到错误，则会中断编译而在屏幕下端出现错误列表的提示，表中会指出在什么文件中端出现错误列表的提示，表中会指出在什么文件中第几行，第几列出现什么类型的错误，点击提示行第几行，第几列出现什么类型的错误，点击提示行光标将自动转到程序语句中的错误所在行供修改。光标将自动转到程序语句中的错误所在行供修改。3.6ASP.NET编程调试与对错误的处理编程调试与对错误的处理n如果遇到较复杂的错误，一下子改正不了，或不清如果遇到较复杂的错误，一下子改正不了，或不清楚错误的原因，可以采用跟踪执行，方法是在适当楚错误的原因，可以采用跟踪执行，方法是在适当的语句上设置中断点，将光标停留在选定的语句行，的语句上设置中断点
22、，将光标停留在选定的语句行，然后按然后按F9，这时程序行的左边会出现一个橙红色的，这时程序行的左边会出现一个橙红色的园球标记，说明程序运行到该语句将暂停，然后可园球标记，说明程序运行到该语句将暂停，然后可以按一下以按一下F10来执行下一句程序行，可以通过不断来执行下一句程序行，可以通过不断按按F10进行跟踪整个程序的运行过程，以此来找到进行跟踪整个程序的运行过程，以此来找到错误所在，或者优化程序行。在跟踪过程中，屏幕错误所在，或者优化程序行。在跟踪过程中，屏幕的左下端会出现一个自动窗口，显示即时的各种变的左下端会出现一个自动窗口，显示即时的各种变量等赋值的数据，可以清楚地看到程序是怎么执行量等
23、赋值的数据，可以清楚地看到程序是怎么执行的。的。3.6ASP.NET编程调试与对错误的处理编程调试与对错误的处理n为了快速找到程序错误处所在，也可以通过为了快速找到程序错误处所在，也可以通过插入程序行的方法，如在适当的位置插入插入程序行的方法，如在适当的位置插入Response.Write(变量变量)；与；与Response.End（）；二语句，第一句语句是显示所指定的（）；二语句，第一句语句是显示所指定的变量的值，第二句是停止运行整个程序。可变量的值，第二句是停止运行整个程序。可以通过将这二句程序行插入到程序的各个部以通过将这二句程序行插入到程序的各个部位，以此来查找有错的程序行并纠正。位，以此来查找有错的程序行并纠正。 本 章 小 结n本章初步讲解了本章初步讲解了WebForm即即ASP窗体窗体的编程方法，这是最基本的编程基础，的编程方法，这是最基本的编程基础，学好使用学好使用C#来实现来实现ASP.NET制作制作Web页面，对本章所阐述的实例一定要页面，对本章所阐述的实例一定要有比较充分的理解，以进一步学习好以有比较充分的理解，以进一步学习好以后几章的内容。后几章的内容。
