asp、html常用控件及属性.doc

资源描述

第二章控件一 HTML控件 1.常用的HTML控件控件名称实现方法文本框　 <input type=text ..> 文本区 <textarea ..> .. </textarea> 单选按钮 <input type=redio ..> 复选按钮 <input type=checkbox ..> 列表框 <select ..><option ..>..</option>..</select> 提交按钮 <input type=submit ..> 重置按钮 <input type=reset ..> 普通按钮 <input type=button ..> 密码文本框 <input type=password ..> 隐藏文本框 <input type=hidden ..> 2.HTML控件的属性 (1).Attributes：用来设置HTML控件的属性例： … Body1.Attributes(“BackGround”)=”1.gif” … <HTML> <BODY id=body1 runat=server/> … (2).Disable:用于文字或按钮型的HTML控件，若此属性设置为TRUE则该属性被显示为灰色，表示当前标记不可用。 (3).InnerHtml和InnerText:用于设置<标记></标记>之间的HTML文本的格式，前者显示如：测试；后者显示:<font size=5>测试</font> 如： … Body1.InnerHtml="<font size=5>测试</font>" Body2.InnerText="<font size=5>测试</font>" … 二 HTML服务器控件 1.HTML服务器控件名称空间结构 1).HTML服务器控件属性System.Web.UI.HTMLControls名称空间。结构如下： 2).HtmlControl类的属性属性说明 Id 惟一标识 Disabled True/False　禁用/可用 Visible True/False 定义可见性 TagName 显示HTML标记符名称，如button，a,form等 Style 为HTML控件设置CSS样式属性 3).HtmlContainerControl类的属性属性说明 InnerHtml 获取或设置HMTL服务器控件的开/闭标记符之间的HTML格式的字符串 InnerText 获取或设置HMTL服务器控件的开/闭标记符之间的纯文件格式的字符串 4).HtmlInputControl类的属性属性说明 Name 控件名称 Type 控件类型 Value 控件的值 2.控件 1).控件实例控件名实例 HTML标识表示 HtmlAnchor <a runat="server" id=唯一标识 href=地址 name=名称 OnServerClick=事件函数 target=目标框架(_blank、_parent、_self、_top) title=提示文字 >显示文字</a> <a> HtmlButton <button runat="server" id=唯一标识 OnServerClick=事件函数 OnMouseOver=事件函数 OnMouseOut=事件函数 >显示</button> <button . . . OnMouseOver=" this.style .backgroundColor ='yellow'" > HtmlForm <form runat="server" id=唯一标识 method="post|get" ></form> <form> HtmlGenericControl <div|body|font|span|others runat="server" id=唯一标识 >显示</ div|body|font|span|others > < div|body|font |span|others > HtmlImage <img runat="server" id=唯一标识 alt=显示文本 Align=top|middle|bottom|left|right Border=边框宽度 Height=高度 width=宽度 Src=文件名 /> <img> HtmlInputImage <input runat="server" id=唯一标识 type=image src=图片路径名 align=水平位置 width=宽度 OnMouseOver=事件函数 OnMouseOut=事件函数 OnServerClick=事件函数 /> 说明： OnMouseOver:鼠标正在移过这个控件 OnMouseOut:鼠标已经移过这个控件 <input type=image> HtmlInputButton <input runat="server" id=唯一标识 type=button|submit|reset OnServerClick=事件名 value="显示" /> <input type=button> <input type=submit> <input type=reset> HtmlInputCheckBox <input runat="server" id=唯一标识 type=checkbox checked />男 <input type=checkbox> HtmlInputFile <input runat="server" id=唯一标识 type=file accept=image/* | multipart/form-data maxlength=大小 size=控件宽度 postedfile=文件/> HtmlInputHidden <input runat="server" id=唯一标识 type=hidden value=数据 /> <input type=hidden> HtmlInputRadioButton <input runat="server" id=唯一标识 type=radio name=实例名称 checked /> <input type=radio> HtmlInputText <input runat="server" type=text|password id=唯一标识 maxlength=输入最大字符串 size=控件宽度 value=默认文本 /> <input type=text> <input type=password> HtmlSelect <select runat="server" id=唯一标识 OnServerChange=事件函数 DateSource=数据源名称 DataTextField=文本字段名称 DataValueField=值字段名称 Multiple Items=选项ListItems集合 SelectedIndex=选项索引 Size=选项个数 Value=选项值 > <option value=值1>显示1</option> <option value=值2>显示2</option> </select> <select> HtmlTable <table runat="server" id=唯一标识 align=left|center|right bgcolor=颜色 border=边框粗细 bordercolor=边框颜色 cellpadding= cellspacing= height=高度 rows=行数 width=宽度 > <tr><td></td>..</tr> .. </table> <table> HtmlTableRow <tr runat="server" align=水平位置 bgcolor= bordercolor= height= cells= valign=垂直位置 > <td>..</td> .. </tr> <tr> HtmlTableCell <td|th runat="server" align=水平位置 bgcolor= bordercolor= colspan= height= nowrap= rowspan= valign=垂直位置 width= ></td | /th> <td> HtmelTextArea <textarea runat="server" id=唯一标识 cols=宽度 rows=行数 name=名称 value=初始文本 OnServerChange=事件函数 ></textarea> <textarea> 2).控件分类 (1)HtmlSelect控件成员说明 DataSource DataTextField DataValueField 允许把列表绑定到任何数据源上。如果正在绑定到一个具有一个以上字段的数据源上，可以把一个字段绑定到选项文本，别一个字段绑定到每个选项的隐藏值属性中 Size 显示的项目数。当设置为1时，HtmlSelect控件将变成一个下拉列表 Multiple 为True时，用户一次可以选择一个以上的列表项。要在控件声明中指定这一点，应包括multiple属性。一个多选择列表控件将自动成为一个列表框，而不是一个下拉列表 SelectedIndex 以0开始的索引数，指示或设置当前选定的项目，如dim SelectIndex as string= selectObject.SelectedIndex 可以获得当前选中的索引值；而selectObject.Items(SelectIndex)).value可以得到当前选中元素的value SelectedIndices 一组选定的索引数。当启用多项选择时，可以使用它 Items 提供描述列表中所有项的System.Web.UI.Webcontrols.ListItem对象的一个集合。可以检查每项的Selected属性，弄清楚它当前是否被选中。可以使用Text和Value项，获取或设置在所选项的文本或值属性中的信息例： <script language=vb runat=server> sub myclick(sender as object,e as eventArgs) response.write(mySelect.Items(0).text) mySelect.Items.Add("第五") mySelect.Items.Add("第六") mylabel.text=CStr(mySelect.Items(0).Selected) end sub </script> <form runat=server> <button id=myButton runat=server type=button onServerclick=myclick> <img src=1.gif><hr><b>按钮</b> </button> <br><br><br> <select id=mySelect size=3 multiple=true runat=server> <option value=001>第一</option> <option value=002>第二</option> <option value=003>第三</option> <option value=004>第四</option> </select> <br><br><br> <asp:label id=mylabel runat=server text="等待"/> </form> (2)HtmlTable控件 (i).基本格式：即由HtmlTableRow和HtmlTableCell元素组成 <table id=唯一标识runat=server ……> <tr> <td></td> </tr> </table> (ii).HtmlTable成员成员说明 Align 相对于页面的表的对齐特性（左、顶或右）或者相对于页面内容的一个表的对齐特性（顶、中、底） BgColor 表中所有单元格的背景颜色 Border 以像素计的边框宽度（默认值-1，意味着没有边框） BorderColor 作为一个彩色代码或名称（例如“红色”）的边框颜色 Cellpadding 在单元格和它的内容之间的空白，以像素计 CellSpacing 表中单元格之间的空白，以像素计 Height和Width 表的高度和宽度，以像素计。也可以指定一个百分数，方法是给控件标记中的数追加一个百分号。百分数与浏览器窗口的高度或宽度相关 Rows 提供描述表中各个<tr>元素的HtmlTableRow对象的一个集合。可以使用方法，例如Add，Insert和Remove来动态地配置一个表 (iii).HtmlTableRow成员成员说明 Align，BgColor和BorderColor 对各个行来说，这些样式属性与对应的HtmlTable属性对整修表所具有的效果相同 Height 以像素计的行高，它可能被表的高度所限制 Valign 行的垂直对齐特性，可以是中间、顶部、底部或基线对齐 Cells 提供描述表中各个<td>和<th>（表的标题）元素的HtmlTableCell对象的一个集合。可以使用方法，例如：Add,Insert和Remove来动态地配置一个表的行 (iv).HtmlTableCell成员成员说明 Align，BgColor和BorderColor 对各个单元格来说，这些样式属性与对应的HtmlTable属性对整修表所具有的效果相同 Height和Width 单元格的高度和宽度，它可能被行的高度所限制 Valign 单元格的垂直对齐特性，可以是中间、顶部、底部或基线对齐 NoWrap 默认值是False。如果为True，框中的广西将不自动换行，但是列将被重新调整尺寸以容纳它 RowSpan和ColSpan 指定一个单元格可以跨多少行或多少列。这个设置允许一个单元格占有很大的区域 (v).例：动态创建HtmlTable <html> <head><title>HTML中Table控件的使用</title> <script language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) If not Page.IsPostBack then MySelect1.Items.Add("1") MySelect1.Items.Add("2") MySelect1.Items.Add("3") MySelect1.Items.Add("4") MySelect2.Items.Add("1") MySelect2.Items.Add("2") MySelect2.Items.Add("3") MySelect2.Items.Add("4") End If End Sub Sub btnTable_Click(sender As Object,e As EventArgs) Dim i,j,NumOfRow,NmOfCell As Integer Dim MyTableRow,MyTableCell As Object NumOfRow=(MySelect1.Value) NmOfCell=(MySelect2.Value) Dim myimg as Image=new image() ‘等于 Dim myimg as Image myimg=new image() 二句 myimg.imageurl="1.gif" for j = 1 to NumOfRow MyTableRow = new HtmlTableRow() for i = 1 to NmOfCell MyTableCell = new HtmlTableCell() MyTableCell.InnerHtml = ("第" & j & "行, 第" & i & "列<img src=1.gif>") MyTableCell.Controls.Add(myimg) MyTableRow.Cells.Add(MyTableCell) Next MyHtmlTable.Rows.Add(MyTableRow) Next End Sub </script> <body> <form runat="server"> <table id="MyHtmlTable" runat="server" CellPadding=4 CellSpacing=1 Border="1" BorderColor="blue" /><p> 行数: <select id="MySelect1" runat="server" /><br> 列数: <select id="MySelect2" runat="server" /> <input type="submit" value="生成新表格" runat="server" OnServerClick="btnTable_Click"> </form> </body> </html> (vi).例:遍历HtmlTable 所有行：0～Table1.Rows.Count-1 所有单元格：0～Table1.Rows[i].Cells.Count-1 单元格内容：0～Table1.Rows[i].Cells[j].InnerHtml (3)HtmlButton控件 <Form Runat="Server"> <Button Id="Button1" Runat="Server" OnServerClick="Button1_Click"> <img src=1.gif><hr><b>按钮</b> </Button> </Form> <Script Language="VB" Runat="Server"> Sub Button1_Click(Sender As Object,e As EventArgs) Button1.Style("BackGround-Color")="Red" Button1.Style("Color")="Blue" Button1.InnerText="我是按钮，你点击了我" End Sub </Script> (4) HtmlAnchor控件 <A Id="Anchor1" Runat="Server">这是超级链接</A> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object, e As Eventargs) Anchor1.Href="" Anchor1.Target="_blank" Anchor1.Title="小提示" End Sub </Script> (5) HtmlImage控件 <Img Id="Image1" Runat="Server"/> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object, e As EventArgs) Image1.Src="flower.jpg" Image1.Alt="这是图片" Image1.Width="400" Image1.Height="300" Image1.Border="2" End Sub </Script> (6). HtmlGenericControl控件 <Script Language="VB" Runat="Server"> MySpan.InnerText="我的Span控件" </Script> <Span ID="MySpan" Runat="Server"/> (3).HMTL服务器控件的事件事件提供它的控件 OnServerClick HtmlAnchor,HtmlButton,HtmlForm ,HtmlInputButton,HtmlInputImage OnServerChange HtmlInputCheckBox,HtmlInputHidden, HtmlInputRadioButton,HtmlSelec, HtmlTextArea,HtmlIputText [InputCheckBox]事例： <html> <script language="vb" runat=server> Dim strtemp as String Sub buttonclick(Sender as object,E as EventArgs) Strtemp="你选了：<br>" If chk1.Checked then strtemp=strtemp+"跑步<br>" If chk2.Checked then strtemp=strtemp+"体操<br>" End Sub </script> <body> <form runat="server"> 请选择您喜爱的运动：<br> <input type=checkbox runat=server id="chk1">跑步<br> <input type=checkbox runat=server id="chk2">体操<br> <button runat=server onserverclick="buttonclick">提交</button><br> <%=strtemp%> </form> </body> </html> [InputFile]事例: <html> <script language="vb" runat=server> Sub uploadfile(sender As Object,E As System.EventArgs) Butimage.PostedFile.SaveAs("c:\upload.jpg") End Sub </script> <body> <form runat="server" enctype="multipart/form-data"> <input type=file accept="img/jpeg" runat=server id=butimage/><br> <input type=button id=yesbutton onserverclick="uploadfile" runat=server value="提交"/><br> </form> </body> </html> 三.Web服务器控件 I.System.Web.UI.WebControls名称空间结构 II.Web服务器控件的基本属性属性说明 AccessKey 定义控件的加速键。比如，指定控件的AccessKey属性值为W,用户可以通过按Alt+W来访问该控件。并不是所有的浏览器都支持这个属性 Attributes 控件属性集合。只能在编程时，而不能在声明一个控件时指定这个属性 BackColor 控件的背景色。取值可以用颜色的英文名字，如yellow，也可以用十六进制表示，如 BorderWidth 控件的边界的宽度，单位为pixel。一些较早的浏览器不支持这个属性 BorderStyle 控件边界的样式。可能的取值有：NotSet,None,Dotted,Dashed,Solid,Double,Groove,Ridge,Inset和OutSet CSSClass 控件使用的样式表类 CSSStyle 控件使用的样式表类型的属性的集合。只能在编程时，而不能在声明一个控件时指定这个属性。如果在控件中已经使用了定义外观样式的属性（BackColor），那么在CSSStyle中相应属性就会被覆盖 Enabled 指定控件能否被用户访问，取值为Boolean型 Font-Bold 指定控件上的广西是否为加粗显示，取值为Boolean型，默认值为False Font-Italic 指定控件上的文本是否为斜体显示，取值为Boolean型，默认值为False Font-Name 指定控件上的文本的字体。一些浏览器不支持为单个的控件设置字体 Font-Names 控件上文本字体的一个列表，用于浏览器做优先选择。如果浏览器不能识别指定的字体，则选择列表中的下一个字体 Font-Overline 指定控件上文本的上方是否有一根线段，取值为Boolean型，默认值为False Font-size 字号的大小，取值从1到7 Font-Strikeout 指定控件上文本的中间是否有一根线段穿过，取值为Boolean型，默认值为False Font-Underline 指定控件上文本的下方是否有一根线段，取值为Boolean型，默认值为False Forecolor 指定控件上文本的颜色。一些较早的浏览器不支持此属性 Height 控件的高度，单位为pixel。IE4.0及以上版本支持此属性 TabIndex 指定用户按Tab键时经过控件的顺序，默认值为0。如果这个控件的这个属性具有相同值，则顺序为声明这些控件时的顺序 Tooltip 指定当用户鼠标停留在控件上时显示的提示文字。不是所有的浏览器都支持这个属性 Width 控件的绝对宽度，默认的单位为字符数，也可以使用pixel（100px）或者百分比形式(如40%) III.一些控件的支持Style对象的属性类型属性说明基本类型 styleobject-BackColor 控件的背景色，取值可以用颜色的英文名字 styleobject-BorderColor 控件的边框颜色 styleobject-BorderStyle 控件的边框样式，可能的取值有：NoSet,None,Dtted,Dashed,Solid,Double, Groove,Ridge,Inset和OutSet styleobject-BorderWidth 控件的边框宽度，单位为pixel styleobject-CssClass 控件使用的样式表类 styleobject-Font-Bold 指定控件上的文本是否为加粗显示，取值为Boolean型，默认值为False styleobject-Font-Italic 指定控件上的文本是否为斜体显示，取值为Boolean型，默认值为False styleobject-Font-Name 指定控件上的文本的字体 styleobject-Font-Names 控件上文本字体的一个列表，用于浏览器做优先选择。如果浏览器不能识别指定字体，则选择列表中的下一个字体 styleobject-Font-Overline 指定控件上文本的上方是否有一根线段，取值为Boolean型，默认值为False styleobject-Font-size 字号的大小，取值从1到7 styleobject-Font-Strkeout 指定控件上文本的中间是否有一根线段穿过，取值为Boolean型，默认值为False styleobject-Font-Underline 指定控件上文本的下方是否有一根线段，取值为Boolean型，默认值为False styleobject-Forecolor 指定控件上文本的颜色 styleobject-Height 控件的绝对高度 styleobject-Width 控件的绝对宽度 styleobject.IsEmpty 判断对象是否为空。只能在编程时使用该属性数据表格页面导航类型 PagerStyle-Mode 指定页面导航标志使用的模式，可取值有NextPrev和NumericPages。默认值为NextPrev PagerStyle-NexPageText 指定导航标志的导航到下一页按钮使用的文本 PagerStyle-PageButton-Count 当PagerStyle-Mode属性的取值为NumericPages时，指定在导航标志中显示的页的数量 PagerStyle-Position 指定页面导航标志相对于其关联控件的位置，可取值为Bottom,Top和TopAndDottom PagerStyle-PrevPageText 指定导航标志的导航到上一页的按钮使用的文本 PagerStyle-Visible 指定页面导航标志是否可见，取值为Boolean型，默认值为True 表格项目类型 styleobject-HorizontalAlign 指定对象包含内容的水平排列方式，可取值有Center,Justify,Left,NotSet和Top。默认值为NotSet styleobject-VerticalAlign 指定对象包含内容的竖直排列方式，可取值有Bottom,Middle,NotSet和Top，默认值为NotSet styleobject-Wrap 指定对象的内容超过对象宽度时是否可以换行显示，默认值为True IV.Web服务器控件的基本事件事件对应的Web控件 Click,Command Button,ImageButton TextChange TextBox CheckChanged CheckBox,RadioButton SelectIndexChanged DropDownList,ListBox,CheckBoxList ,RadioButtonList V.基本控件和数据控件与Html标识对应关系类名 Html标识表示 Button <input type=button>, <input type=submit> CheckBox <input type=checkbox> HyperLink <a> Image <img> ImageButton <input type=image> Label <span> LinkButton,literal 带有<img>标记的<a> Panel,PlaceHolder <div> RadioButton <input type=radio> Table,TableCell <table><td><th> TableRow <tr> TextBox <input type=text>, <input type=password><textarea> DropDownList <select> ListBox <select size=N>,N是一次可见的行数 CheckboxList 一个列表或带有多个 <input type=checkbox>的<table> RadioButtonList 一个列表或带有多个 <input type=radio>的<table> VI.控件分类１．用于文本输入和显示的内部控件 (1).TextBox (类似文本输入框) <asp:textbox options></asp:textbox> 或者： <asp:textbox options/> 属性/事件名取值说明 Id 任意字符串 ID标识 Runat Server 该控件是服务器控件 AutoPostBack True/False 是否允许自动回传事件到服务器 Columns 数字本控件的宽度 MaxLength 数字最多输入字符数(TextMode<>MultiLine) Rows 数字行数(TextMode=MultiLine) Text 字符串初始化文本 TextMode MultiLine/Password 显示模式 MultiLine:多行输入文本 Password:密码文本不设置表示单行文本 Wrap True/False 是否允许自动换行(TextMode=MultiLine) OnTextChanged 处理事件的方法名当控件内部的文本发生变化时回传到服务器的事件处理方法例： <Form Id="Form1" Runat="Server"> <ASP:Textbox Id="T1" AutoPostBack="True" OnTextChanged="T1_Changed" Runat="server" /><p> <ASP:Label Id="Label1" Runat="Server"

展开阅读全文