ASP.NET Web Forms HTML 服务器控件是服务器可理解的 HTML 标签
HTML 服务器控件
ASP.NET 文件中的 HTML 元素,默认是作为文本进行处理的
要想让这些元素可编程,需向 HTML 元素中添加 runat="server" 属性
这个属性表示,该元素将被作为服务器控件进行处理
所有 HTML 服务器控件必须位于带有 runat="server" 属性的 <form> 标签内
ASP.NET 要求所有 HTML 元素必须正确关闭和正确嵌套
ASP.NET HTML 控件列表
HTML 服务器控件 | 描述 |
---|---|
HtmlAnchor | 控制 <a> HTML 元素 |
HtmlButton | 控制 <button> HTML 元素 |
HtmlForm | 控制 <form> HTML 元素 |
HtmlGeneric | 控制其它未被具体的 HTML 服务器控件规定的 HTML 元素,比如 <body>、<div>、<span> |
HtmlImage | 控制 <image> HTML 元素 |
HtmlInputButton | 控制 <input type="button">、<input type="submit"> 和 <input type="reset"> HTML 元素 |
HtmlInputCheckBox | 控制 <input type="checkbox"> HTML 元素 |
HtmlInputFile | 控制 <input type="file"> HTML 元素 |
HtmlInputHidden | 控制 <input type="hidden"> HTML 元素 |
HtmlInputImage | 控制 <input type="image"> HTML 元素 |
HtmlInputRadioButton | 控制 <input type="radio"> HTML 元素 |
HtmlInputText | 控制 <input type="text"> 和 <input type="password"> HTML 元素 |
HtmlSelect | 控制 <select> HTML 元素 |
HtmlTable | 控制 <table> HTML 元素 |
HtmlTableCell | 控制 <td> 和 <th> HTML 元素 |
HtmlTableRow | 控制 <tr> HTML 元素 |
HtmlTextArea | 控制 <textarea> HTML 元素 |
ASP.NET HtmlAnchor 控件
ASP.NET HtmlAnchor 控件用于控制 <a> 元素
在 HTML 中,<a> 元素用于创建超链接
超链接可链接到书签或其它网页
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
HRef | 链接的 URL |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容 特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本 特殊字符会被自动转换为 HTML 实体 |
Name | 锚的名称 |
OnServerClick | 当该链接被点击时被执行的函数的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Target | 要打开的目标窗口 |
Title | 由浏览器显示的标题(比如 img 元素的 title 属性) |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLAnchor
<script runat="server">
Sub Page_Load
link1.HRef="https://www.twle.cn"
link1.Target="_blank"
link1.Title="twle.cn"
link2.HRef="https://www.microsoft.com"
link2.Target="_blank"
link2.Title="Microsoft"
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8"/>
<form runat="server">
<a id="link1" runat="server">Visit twle.cn!</a>
<br>
<a id="link2" runat="server">Visit Microsoft!</a>
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlAnchor 控件(记得把控件嵌套在 HtmlForm 控件中)然后我们在事件句柄(事件句柄是一种针对给定事件来执行代码的子例程)中修改这个 HtmlAnchor 控件的 URL、target 和 titlePage_Load 事件是 ASP.NET 可理解的众多事件之一
ASP.NET HtmlButton 控件
ASP.NET HtmlButton 控件用于控制 <button> 元素
在 HTML 中,<button> 元素用于创建一个下压按钮
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容 特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本 特殊字符会被自动转换为 HTML 实体 |
OnServerClick | 当该按钮被点击时被执行的函数的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLButton
<script runat="server">
Sub button1(Source As Object, e As EventArgs)
p1.InnerHtml="You clicked the blue button!"
End Sub
Sub button2(Source As Object, e As EventArgs)
p1.InnerHtml="You clicked the pink button!"
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<button id="b1" OnServerClick="button1" style="background-color:#e6e6fa; height:25;width:100" runat="server">
Blue button!
</button>
<button id="b2" OnServerClick="button2" style="background-color:#fff0f5;height:25;width:100" runat="server">
Pink button!
</button>
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlButton 控件(记得把控件嵌套在 HtmlForm 控件中)接着,编写一个事件句柄(事件句柄是一种针对给定事件来执行代码的子例程),用来规定在按钮被点击时执行的动作
ASP.NET HtmlForm 控件
ASP.NET HtmlForm 控件用于控制 <form> 元素
在 HTML 中,<form> 元素用于创建表单
所有 HTML 服务器控件必须位于 HtmlForm 控件内部
在一个页面内,您只能使用一个 HtmlForm 控件
属性
属性 | 描述 |
---|---|
Action | URL 定义当表单提交时把数据送往何处 该属性总是设置为页面自身的 URL |
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
EncType | 用来编码表单内容的 MIME 类型 |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。 特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。 特殊字符会被自动转换为 HTML 实体 |
Method | 表单向服务器传送数据的方式 合法值有: "post" 和 "get"。默认是 "post" |
Name | 表单的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Target | 加载 URL 的目标窗口 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLForm
<script runat="server">
Sub submit(sender As Object, e as EventArgs)
if name.value<>"" then
p1.InnerHtml="Welcome " & name.value & "!"
end if
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter your name: <input id="name" type="text" size="30" runat="server" />
<br><br>
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlInputText 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,就会执行 submit 子例程这个 submit 子例程会向 p 元素写一条欢迎消息
ASP.NET HtmlGeneric 控件
ASP.NET HtmlGeneric 控件用于控制未被具体的 HTML 服务器控件规定的其他 HTML 元素,比如 <body> 、<div> 、<span> 、<font> 、<p> 等等
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLGeneric
<script runat="server">
Sub submit(sender As Object, e as EventArgs)
if name.value<>"" then
p1.InnerHtml="Welcome " & name.value & "!"
end if
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter your name: <input id="name" type="text" size="30" runat="server" />
<br><br>
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlInputText 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(标签)(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,会执行 submit 子例程submit 子例程会向 p 元素写一段欢迎消息
ASP.NET HtmlImage 控件
ASP.NET HtmlImage 控件用于控制 <img> 元素
在 HTML 中,<img> 元素用于显示图像
属性
属性 | 描述 |
---|---|
Align | 如何根据周围的元素排列图像。合法值有: top middle bottom left right |
Alt | 图像的简短描述 |
Attributes | 返回该元素的所有属性名称和值对 |
Border | 图像周围的边框的宽度 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
Height | 图像的高度 |
id | 控件的唯一 id |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Src | 要显示的图像的 URL |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Visible | 布尔值,指示该控件是否可见 |
Width | 图像的宽度 |
范例
HTMLImage
<script runat="server">
Sub Page_Load(Sender As Object,E As EventArgs)
image1.Src="/static/i/smiley.gif"
image1.Alt="Smiley"
image1.Border="3"
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8"/>
<form runat="server">
<img id="image1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlImage 控件(记得把控件嵌套在 HtmlForm 控件中)然后我们在一个事件句柄(事件句柄是一种针对给定事件来执行代码的子例程)中修改这个 HtmlImage 控件的 src、alt 和 border 属性Page_Load 事件是 ASP .NET 可理解的众多事件之一
HTMLImage 2
<script runat="server">
Sub choose_image(Sender As Object, e As EventArgs)
image1.Src = select1.Value
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<select id="select1" runat="server">
<option value="/static/i/smiley.gif">Smiley</option>
<option value="/static/i/angry.gif">Angry</option>
<option value="/static/i/stickman.gif">Stickman</option>
</select>
<input type="submit" runat="server" value="Display image"
OnServerClick="choose_image">
<br><br>
<img id="image1" src="smiley.gif" runat="server" width="32" height="32" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlImage 控件和一个 HTMLSelect 控件(记得把控件嵌套在 HtmlForm 控件中)然后我们基于用户的选择来修改 HtmlImage 控件的 src 属性在 HtmlSelect 控件中被选的值决定显示哪幅图像
ASP.NET HtmlInputButton 控件
ASP.NET HtmlInputButton 控件用于控制 <input type="button"> 、<input type="submit"> 和 <input type="reset"> 元素
在 HTML 中,这些元素用于创建命令按钮、提交按钮和重置按钮
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 元素的唯一 id |
Name | 元素的名称 |
OnServerClick | 当该按钮被点击时被执行的函数的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLInputButton
<script runat="server">
Sub submit(sender As Object, e as EventArgs)
if name.value<>"" then
p1.InnerHtml="Welcome " & name.value & "!"
end if
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter your name: <input id="name" type="text" size="30" runat="server" />
<br><br>
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlInputText 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,会执行 submit 子例程这个 submit 子例程会向 p 元素写一条欢迎消息
ASP.NET HtmlInputCheckBox 控件
ASP.NET HtmlInputCheckBox 控件用于控制 <input type="checkbox"> 元素
在 HTML 中,该元素用于创建复选框
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Checked | 布尔值,规定是否选中该元素 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
Name | 元素的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
事件
事件 | 描述 |
---|---|
ServerChange | 当控件状态改变时发生此事件 |
范例
HTMLInputCheckbox
<script runat="server">
Sub submit(Source As Object, e As EventArgs)
if red.Checked=True then
p1.InnerHtml="You prefer red!"
else
p1.InnerHtml="You prefer blue!"
end if
red.checked=false
blue.checked=false
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
What color do you prefer?
<br>
<input id="red" type="checkbox" runat="server" /> Red
<br>
<input id="blue" type="checkbox" runat="server" /> Blue
<br>
<input type="button" value="Submit" OnServerClick="submit" runat="server"/>
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlInputCheckBox 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,就会执行 submit 子例程这个 submit 子例程有两种响应方式:
如果 "red" 复选框被选中,则服务器会向 p 元素发送消息 "You prefer red!"
如果 "blue" 复选框被选中,则服务器会向 p 元素发送消息 "You prefer blue!"
ASP.NET HtmlInputFile 控件
ASP.NET HtmlInputFile 控件用于控制 <input type="file"> 元素,该元素用于向服务器上传文件
属性
属性 | 描述 |
---|---|
Accept | 可接受的 MIME 类型的列表 |
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 元素的唯一 id |
MaxLength | 该元素中所允许的最大字符数 |
Name | 元素的名称 |
PostedFile | 获取对由客户端指定的上载文件的访问 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Size | 元素的宽度 |
Style | 设置或返回被应用到控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
下面的代码,我们在 .aspx 文件中声明了一个 HtmlInputFile 控件,一个 HtmlInputButton 控件,以及三个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)
当提交按钮被触发时,会执行 submit 子例程
当文件本身被上传到服务器的 c 目录时,会在页面显示文件名和文件类型
<script runat="server">
sub submit(Sender as Object, e as EventArgs)
fname.InnerHtml=MyFile.PostedFile.FileName
clength.InnerHtml=MyFile.PostedFile.ContentLength
MyFile.PostedFile.SaveAs("c:uploadfile.txt")
end sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form method="post"enctype="multipart/form-data" runat="server">
<p>Select file to upload to server:<input id="MyFile" type="file" size="40" runat="server"></p>
<p><input type="submit" value="Upload!"OnServerclick="submit"runat="server"></p>
<p><div runat="server">FileName: <span id="fname" runat="server"/><br />ContentLength: <span id="clength" runat="server"/> bytes</div>
</p>
</form>
ASP.NET HtmlInputHidden 控件
ASP.NET HtmlInputHidden 控件用于控制 <input type="hidden"> 元素
在 HTML 中,该元素用于创建隐藏输入域
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 元素的唯一 id |
Name | 元素的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 隐藏域的值 |
Visible | 布尔值,指示该控件是否可见 |
事件
事件 | 描述 |
---|---|
ServerChange | 当该元素的内容被更改时发生此事件 |
范例
HTMLInputHidden
<script runat="server">
Sub submit(Source As Object, e As EventArgs)
hidden1.Value=string1.Value
p1.InnerHtml="Hidden value= " + hidden1.Value
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter some text: <input id="string1" type="text" size="25" runat="server" />
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<input id="hidden1" type="hidden" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlInputHidden 控件,一个 HtmlInputText 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当 submit 按钮被触发时,会执行 submit 子例程这个 submit 子例程会把隐藏域的值设置为输入域的值,并在 p 元素中显示隐藏域的值
ASP.NET HtmlInputImage 控件
ASP.NET HtmlInputImage 控件用于控制 <input type="image"> 元素
在 HTML 中,该元素用于创建使用图像的按钮,可代替常规的按钮
属性
属性 | 描述 |
---|---|
Align | 图像的对齐方式 |
Alt | 供显示的图像替代文本 |
Attributes | 返回该元素的所有属性名称和值对 |
Border | 元素周围的边框的宽度 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
Name | 元素的名称 |
OnServerClick | 当图像被点击时被执行的函数的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Src | 图像的源 |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLInputImage
<script runat="server">
Sub button1(Source As Object, e As ImageClickEventArgs)
p1.InnerHtml="You clicked the smiley button!"
End Sub
Sub button2(Source As Object, e As ImageClickEventArgs)
p1.InnerHtml="You clicked the angry button!"
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<p>Click on one of the images:</p>
<p>
<input type="image" src="/static/i/smiley.gif"
OnServerClick="button1" runat="server" width="32" height="32" />
</p>
<p>
<input type="image" src="/static/i/angry.gif"
OnServerClick="button2" runat="server" width="32" height="32" />
</p>
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlInputImage 控件和一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)
如果用户点击了第一个图像,则会执行 button1 子例程这个子例程会向 p 元素发送消息 "You clicked the smiley button!"
如果用户点击了第二个图像,则会执行 button2 子例程这个子例程会向 p 元素发送消息 "You clicked the angry button!"
ASP.NET HtmlInputRadioButton 控件
ASP.NET HtmlInputRadioButton 控件用于控制 <input type="radio"> 元素
在 HTML 中,该元素用于创建单选按钮
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Checked | 布尔值,规定该元素是否被选中 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 元素的唯一 id |
Name | 单选按钮组的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLInputRadiobutton
<script runat="server">
Sub submit(Source As Object, e As EventArgs)
if r1.Checked=True then
p1.InnerHtml="Your favorite color is red"
else
if r2.Checked=True then
p1.InnerHtml="Your favorite color is green"
else
if r3.Checked=True then
p1.InnerHtml="Your favorite color is blue"
end if
end if
end if
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<p>Select your favorite color:
<br>
<input id="r1" name="col" type="radio" runat="server">Red</input>
<br>
<input id="r2" name="col" type="radio" runat="server">Green</input>
<br>
<input id="r3" name="col" type="radio" runat="server">Blue</input>
<br>
<input type="button" value="Submit" OnServerClick="submit" runat="server"/>
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了三个 HtmlInputRadioButton 控件,一个 HtmlInputButton 控件,一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,会执行 submit 子例程submit 子例程有三种响应方式:
如果选择了带有 id="r1" 的单选按钮,则服务器向 p 元素发送消息 "Your favorite color is red"
如果选择了带有 id="r2" 的单选按钮,则服务器向 p 元素发送消息 "Your favorite color is green"
如果选择了带有 id="r3" 的单选按钮,则服务器向 p 元素发送消息 "Your favorite color is blue"
ASP.NET HtmlInputText 控件
ASP.NET HtmlInputText 控件用于控制 <input type="text"> 和 <input type="password"> 元素
在 HTML 中,这些元素用于创建文本域和密码域
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 元素的唯一 id |
MaxLength | 该元素中可允许字符的最大数目 |
Name | 元素的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Size | 元素的宽度 |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Type | 元素的类型 |
Value | 元素的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLInputText
<script runat="server">
Sub submit(sender As Object, e as EventArgs)
if name.value<>"" then
p1.InnerHtml="Welcome " & name.value & "!"
end if
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter your name: <input id="name" type="text" size="30" runat="server" />
<br><br>
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlInputText 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件(记得把控件嵌套在 HtmlForm 控件中)当提交按钮被触发时,会执行 submit 子例程这个 submit 子例程会向 p 元素写一条欢迎消息
ASP.NET HtmlSelect 控件
ASP.NET HtmlSelect 控件用于控制 <select> 元素
在 HTML 中,<select> 元素用于创建下拉列表
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
DataMember | 要使用的数据表格的名称 |
DataSource | 要使用的数据源 |
DataTextField | 要显示在此下拉列表中的数据源中的字段 |
DataValueField | 规定此下拉列表中每个可选项的值的数据源中的字段 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
Items | 下拉列表中的项目的列表 |
Multiple | 是否能同时选择多个项目 |
OnServerChange | 当被选项目被更改时被执行的函数的名称 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
SelectedIndex | 当前被选项目的索引号 |
Size | 下拉列表中可见项目的数目 |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Value | 当前被选项目的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLSelect
<script runat="server">
Sub choose_image(Sender As Object, e As EventArgs)
image1.Src = select1.Value
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<select id="select1" runat="server">
<option value="/static/i/smiley.gif">Smiley</option>
<option value="/static/i/angry.gif">Angry</option>
<option value="/static/i/stickman.gif">Stickman</option>
</select>
<input type="submit" runat="server" value="Display image"
OnServerClick="choose_image">
<br><br>
<img id="image1" src="smiley.gif" runat="server" width="32" height="32" />
</form>
范例中,我们在 .aspx 文件中声明一个 HtmlImage 控件和一个 HTMLSelect 控件(记得把控件嵌套在 HtmlForm 控件中)然后我们会根据用户的选择来修改 HtmlImage 控件的 src 属性在 HtmlSelect 控件中选择的值决定了显示哪幅图像
ASP.NET HtmlTable 控件
ASP.NET HtmlTable 控件用于控制 <table> 元素
在 HTML 中,<table> 元素用于创建表格
属性
属性 | 描述 |
---|---|
Align | 规定此表格的对齐方式 |
Attributes | 返回该元素的所有属性名称和值对 |
BGColor | 规定表格的背景颜色 |
Border | 规定边框的宽度。提示:设置 border="0" 可显示不带边框的表格! |
BorderColor | 规定边框的颜色 |
CellPadding | 规定单元格边框与内容之间的空白 |
CellSpacing | 规定单元格之间的空白 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
Height | 规定表格的高度 |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
Rows | 返回表示表格中所有行的 HtmlRowCollection 对象 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Visible | 布尔值,指示该控件是否可见 |
Width | 规定表格的宽度 |
范例
HTMLTable
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
Dim row,numrows,numcells,j,i
row=0
numrows=cint(rows1.Value)
numcells=cint(cells1.Value)
for j=1 to numrows
Dim r As New HtmlTableRow()
row=row+1
for i=1 to numcells
Dim c As New HtmlTableCell()
c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
next
t1.Rows.Add(r)
t1.Visible=true
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<p>Table rows:
<select id="rows1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>Table cells:
<select id="cells1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<input type="submit" value="Display Table" runat="server" OnServerClick="submit">
</p>
<table id="t1" border="1" runat="server" visible="false"/>
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlSelect 控件,一个 HtmlInputButton 控件,以及一个 HtmlTable 控件(记得把控件嵌套在 HtmlForm 控件中)用户可选择单元和行的数目当提交按钮被触发时,会执行 submit 子例程submit 子例程会根据用户的输入来生成表格
HTMLTable 2
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
dim i,j
table1.BGColor="yellow"
table1.BorderColor="red"
for i=0 To table1.Rows.Count-1
for j=0 To table1.Rows(i).Cells.Count-1
table1.Rows(i).Cells(j).InnerHtml="Row " & i
next
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<table id="table1" border="1" runat="server">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<br>
<input type="button" value="Change Contents" OnServerClick="submit" runat="server"/>
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlTable 控件和一个 HtmlInputButton 控件(记得把控件嵌套在 HtmlForm 控件中)当触发提交按钮时,会执行 submit 子例程submit 子例程会修改表格的背景颜色和边框颜色,它也会修改单元格的内容
ASP.NET HtmlTableCell 控件
ASP.NET HtmlTableCell 控件用于控制 <td> 和 <th> 元素
在 HTML 中,这些元素用于创建表格单元格和表头单元格
属性
属性 | 描述 |
---|---|
Align | 单元格内容的水平对齐方式 |
Attributes | 返回该元素的所有属性名称和值对 |
BGColor | 单元格的背景颜色 |
BorderColor | 边框的颜色 |
ColSpan | 该单元格应横跨的列数 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
Height | 该单元格的高度 |
id | 该控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
Nowrap | 布尔值,规定该控件内的文本是否换行 |
RowSpan | 该单元格应横跨的行数 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
VAlign | 单元格内容的垂直排列方式 |
Visible | 布尔值,指示该控件是否可见 |
Width | 单元格的宽度 |
范例
HTMLTable
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
Dim row,numrows,numcells,j,i
row=0
numrows=cint(rows1.Value)
numcells=cint(cells1.Value)
for j=1 to numrows
Dim r As New HtmlTableRow()
row=row+1
for i=1 to numcells
Dim c As New HtmlTableCell()
c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
next
t1.Rows.Add(r)
t1.Visible=true
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<p>Table rows:
<select id="rows1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>Table cells:
<select id="cells1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<input type="submit" value="Display Table" runat="server" OnServerClick="submit">
</p>
<table id="t1" border="1" runat="server" visible="false"/>
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlSelect 控件,一个 HtmlInputButton 控件,以及一个 HtmlTable 控件(记得把控件嵌套在 HtmlForm 控件中)用户可选择单元和行的数目当提交按钮被触发时,会执行 submit 子例程submit 子例程会根据用户的输入来生成表格
HTMLTable 2
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
dim i,j
table1.BGColor="yellow"
table1.BorderColor="red"
for i=0 To table1.Rows.Count-1
for j=0 To table1.Rows(i).Cells.Count-1
table1.Rows(i).Cells(j).InnerHtml="Row " & i
next
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<table id="table1" border="1" runat="server">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<br>
<input type="button" value="Change Contents" OnServerClick="submit" runat="server"/>
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlTable 控件和一个 HtmlInputButton 控件(记得把控件嵌套在 HtmlForm 控件中)当触发提交按钮时,会执行 submit 子例程submit 子例程会修改表格的背景颜色和边框颜色,它也会修改单元格的内容
ASP.NET HtmlTableRow 控件
ASP.NET HtmlTableRow 控件用于控制 <tr> 元素
在 HTML 中,<tr> 元素用于创建表格行
属性
属性 | 描述 |
---|---|
Align | 行的对齐方式 |
Attributes | 返回该元素的所有属性名称和值对 |
BGColor | 行的背景颜色 |
BorderColor | 边框的颜色 |
Cells | 返回该行中的单元格 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
Height | 行的高度 |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。特殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
VAlign | 行中单元格的垂直排列方式 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLTable
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
Dim row,numrows,numcells,j,i
row=0
numrows=cint(rows1.Value)
numcells=cint(cells1.Value)
for j=1 to numrows
Dim r As New HtmlTableRow()
row=row+1
for i=1 to numcells
Dim c As New HtmlTableCell()
c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
next
t1.Rows.Add(r)
t1.Visible=true
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<p>Table rows:
<select id="rows1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>Table cells:
<select id="cells1" runat="server">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<input type="submit" value="Display Table" runat="server" OnServerClick="submit">
</p>
<table id="t1" border="1" runat="server" visible="false"/>
</form>
范例中,我们在 .aspx 文件中声明了两个 HtmlSelect 控件,一个 HtmlInputButton 控件,以及一个 HtmlTable 控件(记得把控件嵌套在 HtmlForm 控件中)用户可选择单元和行的数目。当提交按钮被触发时,会执行 submit 子例程submit 子例程会根据用户的输入来生成表格
HTMLTable 2
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
dim i,j
table1.BGColor="yellow"
table1.BorderColor="red"
for i=0 To table1.Rows.Count-1
for j=0 To table1.Rows(i).Cells.Count-1
table1.Rows(i).Cells(j).InnerHtml="Row " & i
next
next
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
<table id="table1" border="1" runat="server">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<br>
<input type="button" value="Change Contents" OnServerClick="submit" runat="server"/>
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlTable 控件和一个 HtmlInputButton 控件(记得把控件嵌套在 HtmlForm 控件中)当触发提交按钮时,会执行 submit 子例程submit 子例程会修改表格的背景颜色和边框颜色,它也会修改单元格的内容
ASP.NET HtmlTextArea 控件
ASP.NET HtmlTextArea 控件用于控制 <textarea> 元素
在 HTML 中,<textarea> 元素用于创建文本域
属性
属性 | 描述 |
---|---|
Attributes | 返回该元素的所有属性名称和值对 |
Cols | 文本域的列数 |
Disabled | 布尔值,指示是否禁用该控件。默认是 false |
id | 控件的唯一 id |
InnerHtml | 设置或返回该 HTML 元素的开始标签和结束标签之间的内容。殊字符不会被自动转换为 HTML 实体 |
InnerText | 设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体 |
Name | 文本域的唯一名称 |
OnServerChange | 当该文本域的内容被修改时被执行的函数的名称 |
Rows | 文本域的可见行数 |
runat | 规定该控件是一个服务器控件。必须被设置为 "server" |
Style | 设置或返回被应用到该控件的 CSS 属性 |
TagName | 返回元素的标签名 |
Value | 文本域的值 |
Visible | 布尔值,指示该控件是否可见 |
范例
HTMLTextarea
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
p1.InnerHtml = "<b>You wrote:</b> " & textarea1.Value
End Sub
</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<form runat="server">
Enter some text:<br>
<textarea id="textarea1" cols="35" rows="6" runat="server" />
<input type="submit" value="Submit" OnServerClick="submit" runat="server" />
<p id="p1" runat="server" />
</form>
范例中,我们在 .aspx 文件中声明了一个 HtmlTextarea 控件,一个 HtmlInputButton 控件,以及一个 HtmlGeneric 控件当触发提交按钮时,会执行 submit 子例程这个 submit 子例程会向 p 元素发送消息 "You wrote: " 以及用户在文本框中输入的文本