单元三Web服务器控件

单元三Web服务器控件单元描述——在ASP.NET中，有些常用的功能已经封装成控件，用户可以直接使用，在制作网页时，会大量使用到控件，像文本框、按钮等等。任务一ASP.NET控件简介任务二基本Web服务器控件任务三数据验证控件任务分解本单元任务目标清楚HTML控件和Web服务器控件的区别；学会常用Web服务器控件的使用；学会数据验证控件的使用；将单元一中所创建的以学号后三位命名的网站导入，在该网站下创建名称为unit03的文件夹，在该文件下进行相应的操作。操作准备一、ASP.NET中控件的分类在ASP.NET中，可提供以下三类控件：1、HTML控件：运行在客户端，直接被客户端浏览器解释，可使用JavaScript脚本触发HTML控件事件。一般来说，标准的HTML标签动态控制其属性、使用方法、接收事件，必须使用其他的程序语言来控制标签，这对于使用程序设计来说很不方便，ASP.NET在这方面开发了新的技术，即将HTML标签对象化，使程序可以直接控件HTML标签，对象化后的HTML标签称为HTML控件。任务一ASP.NET控件简介任务描述：了解控件的分类，清楚HTML控件和Web服务器控件的区别。HTML控件是以HTML标记为基础衍生出来的控件，HTML控件不能运行在服务器端，只能在客户端通过JavaScript等程序语言来控件，这限制了对输出页面的控制，所以有时需要把HTML控件转换成服务器控件。HTML服务器控件比HTML控件多了一个属性：（1）runat=“server”：表示在服务器端执行；以上属性的作用是使控件可以服务器端作为一个对象使用。HTML服务器控件只是使编程更简单，在功能上没有超越HTML标记。HTML控件：inputid=“dengyutype=buttonvalue==/HTML服务器控件：inputid=dengyutype=buttonvalue==runat=server/2、Web服务器控件：运行在服务器端，在服务器端运行后生成静态代码传输给浏览器。Web服务器控件比HTML服务器控件具有更多的内置功能，是为超越HTML标记而诞生的。Web服务器控件包含三类控件：（1）一般的窗体类型控件：如按钮、文本框等；（2）特殊用途的控件：如日历、广告；（3）数据验证控件和数据访问控件。新增的控件及控件新增的功能，可将原来开发人员的许多烦琐工作都由控件完成。Web控件类都被放置在System.Web.UI.WebControls命名空间下。即在ASP.NET中，所有控件都是基于对象Object，而所有的Web控件则包含在System.Web.UI.WebControls下面。3、用户控件：在ASP.NET中，服务器控件并不能涵盖每一种情况，根据应用程序的需要，用户可以自定义控件。定义用户控件所使用的编程技术与用于编写Web窗体页的技术相同，用户控件用文件扩展名.ascx来标识。任务1_1：在网站下创建一外名称为renwu1_1的网页文件，要求实现输入两数相加求和的功能。如下图所示：即在前两个文本框中输入数字，当单击“=”时在第三个文本框中显示两数的和。要求：分别利用HTML控件和Web服务器控件实现，从中体会HTML控件和Web服务器控件的区别。提示：1、JavaScript中：parseInt()函数：可解析一个字符串，并返回一个整数。2、getElementById()：用于访问某个节点的最简单方法，一般用法：例：网页中有一个id为test的元素，则：document.getElementById(“test”).style.display=“none”;使用Convert命令进行显式转换命令结果Convert.ToBoolean(val)val转换为boolConvert.ToByte(val)val转换为byteConvert.ToChar(val)val转换为charConvert.ToDecimal(val)val转换为decimalConvert.ToDouble(val)val转换为doubleConvert.ToInt16(val)val转换为shortConvert.ToInt32(val)val转换为intConvert.ToInt64(val)val转换为longConvert.ToSByte(val)val转换为sbyteConvert.ToSingle(val)val转换为floatConvert.ToString(val)val转换为stringConvert.ToUInt16(val)val转换为ushortConvert.ToUInt32(val)val转换为uintConvert.ToUInt64(val)val转换为ulong任务2_1：设计并制作注册页面。如下图所示：任务二基本Web服务器控件基本Web服务器控件主要包括：1、可提供显示文本功能的Label控件；2、可提供提交或链接功能的3种类型的按钮控件：（1）标准命令按钮：Button控件；（2）图形化按钮：ImageButton控件；（3）超级链接样式按钮：LinkButton控件；3、可提供输入或选择功能的控件：（1）文本框：TextBox控件；（2）下拉列表：DropDownList控件；（3）列表框：ListBox控件；（4）复选框：CheckBox控件；（5）复选框列表：CheckBoxList控件；（6）单选按钮：RadioButton控件；（7）单选按钮列表：RadioButtonList控件；4、可作为其他控件的容器的panel控件。5、特殊用途的控件：（1）AdRotator控件（2）Wizard控件（3）Calendar控件（4）Image控件（5）FileUpload控件一、Label控件1、作用：用来在Web页上显示文本。2、声明Label控件的语法如下：asp:Labelid=“控件名称”runat=“server”初始显示的文本/asp:Label可引用编程方式在运行时操作服务器控件的对象模型。3、Label控件的常用属性：（1）Text：指定Label控件显示的文字；（2）BackColor：设置控件的背景颜色；（3）BorderColor：设置控件的边框颜色；（4）BorderWidth：设置控件的边框宽度；（5）BorderStyle：设置控件的边框样式；①Notset：默认值；②None：没有外框；③Dotted：外框为虚线，点较小；④Dashed：外框为虚线，点较大；⑤Solid：外框为实线；⑥Double：外框为实线，但厚度是Solid的两倍；⑦Groove：在对象四周出现3D凹陷式的外框；⑧Ridge：在对象四周出现3D突起式的外框；⑨Inset：对象呈陷入状；⑩Outset：对象成突起状。（6）Font：设置控件的字体信息；①Bold：设为True则会变为粗体；②Italic：设为True则会变为斜体；③Name：设为何种字型；④Size：设定字体大小；⑤Strikeout：设为True则会出现删除线；⑥Underline：设为True则会出现底线；（7）ForeColor：设置控件的前景颜色，即设置文字的颜色；（8）Enabled：设置控件是否可用；（9）AccessKey：用来指定键盘的快速键，此属性内容可指定为数字或字母，当按下Alt+“所设定的值”时，表示选择该控件。（10）TabIndex：用来设定当用户按下Tab键时，Web控件接收焦点的顺序，如果属性没有设定就是默认值零；如果Web控件的属性值一样，则以Web控件设置的顺序来决定。（11）ToolTip：用于设置文字小提示；（12）Visible：用于设置控件的可见性；二、Button控件1、Button控件：标准命令按钮，使用此控件可在Web页上创建普通按钮。2、作用：用于接收用户的Click事件，并执行相对应的事件程序来完成程序的处理。3、声明Button控件的语法如下：asp:ButtonId=“控件名称”runat=“server”Text=“按钮上的文字”/asp:Button4、Button按钮的常用属性任务2_2：创建网页文件renwu2_1,利用Lable控件和Button控件实现如下内容：要求实现如下功能：1、当单击“红色”按钮时，Label控件的内容颜色设置为红色，“红色”按钮变为灰色不可用状态，，“黑色”按钮变为可用状态；2、当单击“黑色”按钮时，Label控件的内容颜色设置为黑色，“黑色”按钮变为不可用状态，“红色”按钮变为可用状态。3、设置“红色”按钮的文字小提示为：“单击该按钮，文本颜色变为红色”，并查看效果；4、设置“红色”按钮的快捷键为“Alt+R”，“黑色”按钮的快捷键为“Alt+B“，并尝试其效果；5、设置上图中三个控件当用户按下Tab键时接收焦点的顺序为Label控件、“红色”按钮，“黑色”按钮，并且尝试其效果。获取颜色的几种方式：1、使用ARGB(alpha,red,green,blue)颜色值上述的每个值为一个从0到255的整数。alpha：表示颜色的透明度，值为255时表示完全不透明；red：表示红色，值为255时表示为纯红色；greeen：表示绿色，值为255时表示为纯绿色；blue：表示蓝色，值为255时表示为纯蓝色；例：Color.FromArgb(255,0,255,0);2、使用颜色的枚举值，可供挑选的颜色名有140个。3、使用HTML颜色名，可以使用ColorTranslator把字符串转换成颜色值。例：ColorTranslator.FromHtml(“blue”);任务2_3：创建网页文件renwu2_2，分别以三种方式设置文本框的背景色，效果如下图所示：其中，颜色值自定。三、LinkButton控件1、作用：用于在Web页上显示超级链样式的按钮控件。外观与HyperLink控件相同，但功能与Button控件相同。2、声明LinkButton控件的语法如下：asp:LinkButtonid=“控件名称”runat=“server”控件的文本内容/asp:LinkButton3、LinkButton控件的常用属性：四、ImageButton控件1、作用：功能与Button控件相同，ImageButton控件通过ImageUrl属性可将一个图形指定为按钮。2、声明ImageButton控件的语法如下：asp:ImageButtonid=“控件名称”ImageUrl=“指这图片”runat=“server”/asp:ImageButton3、ImageButton控件的常用属性：（1）ImageUrl：指定按钮的图片；五、TextBox控件1、作用：让用户输入文本。2、声明TextBox控件的语法如下：asp:TextBoxid=“控件名称”runat=“server”/asp:TextBox3、TextBox控件的常用属性：（1）TextMode：TextBox的类型；（2）MaxLength：设置控件中的最大字符数值；（3）Rows和Columns：当TextMode为Multiline时，可设置文本框的行数和列数；（4）AutoPostBack：自动提交，如果设为true那么你在改变他的值的时候就会重新加载一次页面；例如一个TextBox其值改变后就会重新加载页面。默认情况下为false.4、获取TextBox控件的值：控件名称.Text实现功能：当输入两个数值后，单击相应的按钮，则显示相应的运算结果。练习：六、DropDownList控件1、作用：用于创建单一选择的下拉列表控件。2、声明DropDownList控件的语法如下：asp:DropDownListid=“控件名称”runat=“server”asp:ListItem选项一/asp:ListItemasp:ListItem选项二/asp:ListItem…………/asp:DropDownList3、Drop