ASP.NET(VB.NET)学习笔记--第二章.控件(1/3)
2010-07-18 17:20
483 查看
第二章.控件
一.HTML控件
1.常用的HTML控件
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类的属性
3).HtmlContainerControl类的属性
4).HtmlInputControl类的属性
2.控件
1).控件实例
2).控件分类
(1)HtmlSelect控件
例:
<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成员
(iii).HtmlTableRow成员
(iv).HtmlTableCell成员
(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="http://www.microsoft.com"
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服务器控件的事件
[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>
一.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 ..> |
(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样式属性 |
属性 | 说明 |
InnerHtml | 获取或设置HMTL服务器控件的开/闭标记符之间的HTML格式的字符串 |
InnerText | 获取或设置HMTL服务器控件的开/闭标记符之间的纯文件格式的字符串 |
属性 | 说明 |
Name | 控件名称 |
Type | 控件类型 |
Value | 控件的值 |
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> |
(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来动态地配置一个表 |
成员 | 说明 |
Align,BgColor和BorderColor | 对各个行来说,这些样式属性与对应的HtmlTable属性对整修表所具有的效果相同 |
Height | 以像素计的行高,它可能被表的高度所限制 |
Valign | 行的垂直对齐特性,可以是中间、顶部、底部或基线对齐 |
Cells | 提供描述表中各个<td>和<th>(表的标题)元素的HtmlTableCell对象的一个集合。可以使用方法,例如:Add,Insert和Remove来动态地配置一个表的行 |
成员 | 说明 |
Align,BgColor和BorderColor | 对各个单元格来说,这些样式属性与对应的HtmlTable属性对整修表所具有的效果相同 |
Height和Width | 单元格的高度和宽度,它可能被行的高度所限制 |
Valign | 单元格的垂直对齐特性,可以是中间、顶部、底部或基线对齐 |
NoWrap | 默认值是False。如果为True,框中的广西将不自动换行,但是列将被重新调整尺寸以容纳它 |
RowSpan和ColSpan | 指定一个单元格可以跨多少行或多少列。这个设置允许一个单元格占有很大的区域 |
<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="http://www.microsoft.com"
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 |
<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>
相关文章推荐
- ASP.NET(VB.NET)学习笔记--第二章.控件(2/3)
- ASP.NET(VB.NET)学习笔记--第二章.控件(3/3)
- ASP.NET(VB.NET)学习笔记--第五章.ASP.NET的其他Web控件
- 《Programming ASP.NET》学习笔记(MultiView和View控件)
- 《Programming ASP.NET》学习笔记(FormView控件)
- ASP.NET(VB.NET)学习笔记--第六章.访问数据库(3/3)
- 《Programming ASP.NET》学习笔记(AdRotator控件)
- 《Programming ASP.NET》学习笔记(GridView控件)
- ASP.NET(VB.NET)学习笔记--第三章.ASP.NET常用的内置对象
- ASP.NET(VB.NET)学习笔记--第四章.命名空间
- asp.net教程:vb.net入门——MonthCalendar 控件的使用
- [VB / ASP.NET] FileUpload控件,档案上传
- 《Programming ASP.NET》学习笔记(Calendar控件)
- ASP.NET动态新增/减少控件的实现(VB)
- 《Programming ASP.NET》学习笔记(控件)
- ASP.NET(VB.NET)学习笔记--第六章.访问数据库(1/3)
- 《Programming ASP.NET》学习笔记(基本控件)
- 《Programming ASP.NET》学习笔记(Repeater控件)
- 《Programming ASP.NET》学习笔记(FileUpload控件)
- 《Programming ASP.NET》学习笔记(DataList控件)