第二章（4）HTML控件

来源：互联网发布：软件演化生命周期模型编辑：程序博客网时间：2024/06/06 06:38

摘要：本章介绍了服务器端的html控件，虽然它们的功能都可以以简单的html语言来实现，但是在asp.net中依然提供了对它们的实现。以html语言书写和以服务器端控件的实现在思维方式上已经有了很大的不同，对于html语言而言，只是一种标识；而对服务器端html控件而言，却已演变成为一段程序，一个对象。

ASP.NET基础教程-第二章（4）HTML控件

HTML控件在服务器端是可见的，所以我们可以根据它来按照我们的意愿来编写。HTML控件表现为一些可见的控件。
2.4.1 HtmlButton
HtmlButton server control 就象HTML4.0中的<button>一样，但是这与<Input type="button">不一样的，我们看下面的例子button.aspx：

响应按钮事件：

button2，我们增加了鼠标事件：

<button id=Button2 onServerClick="Button2_OnClick" style="font: 8pt
verdana;background-color:lightgreen;border-color:black;height=30;width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'"
runat="server">
Click me too!
</button>

点击button2，并把鼠标移到它的上面：

第二节 HtmlForm
一个HtmlForm Control必须要处理PostBack请求，一个Web Form只有一个<form>标记。Form.aspx中form的表示：

<form id=ServerForm runat=server>
<button id=Button1 runat="server"
onServerClick="Button1_OnClick">Button1</button>

  
<span id=Span1 runat=server />
<p>
<button id=Button2 runat="server"
onServerClick="Button2_OnClick">Button2</button>
  
<span id=Span2 runat=server />
</form>
响应鼠标按钮事件：

Sub Button1_OnClick(sender As Object, e As EventArgs)
Span1.InnerHtml = "It is Button1"
End Sub
Sub Button2_OnClick(sender As Object, e As EventArgs)
Span2.InnerHtml = "It is Button2"
End Sub

看如下结果：

点击两个按钮，同时显示信息：

2.4.2 HtmlImages
我们通过一个<img src="">这个标记来显示图片：

我们根据ID号为<img >提供图片来源：

Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Image1.Src="images/" & Select1.Value
End Sub
建立一个选择控件来与用户的交互：

选择面部表情文件:
<select id="Select1" runat="server">
<option Value="4.gif">4</option>
<option Value="5.gif">5</option>
<option Value="6.gif">6</option>
<option Value="7.gif">7</option>
<option Value="8.gif">8</option>
<option Value="9.gif">9</option>
</select>
<input type="submit" runat="server" Value="提交"
OnServerClick="SubmitBtn_Click">

我们运行如下：

选择相应的文件号，点击按钮，图片就显示出来。

2.4.3 TextArea
象在HTML中的一样，在asp.net中的TextArea也是一个多行输入框。TextArea的宽度由他的Cols属性决定，长度由Rows属性决定。

Textarea.aspx中定义输入：

我们用TextArea1.Value取得输入的值。具体如下(textarea.aspx)：

<html>
<head>
<script language="VB" runat="server">
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Span1.InnerHtml = "下面是你所写的 : <br>" & TextArea1.Value
End Sub
</script>
</head>
<body bgcolor="#ccccff">
<h3><font face="Verdana">.NET->HtmlTextArea</font></h3>
<form runat=server>
<font face="Verdana" size="-1">
写吧: <br>
<textarea id="TextArea1" cols=40 rows=4 runat=server />
<input type=submit value="Submit" OnServerClick="SubmitBtn_Click" runat=server>

2.4.4 InputHidden
我们可以用隐藏输入控件来处理一些我们要传送而又不想在页面上显示出来的信息，例如在电子商务网站中，我们向银行网关接口传送我们的订单信息，我们就可以用隐藏输入控件来处理。

我们下面的例子用不可见的值来取得输入值，再把不可见值显示出来。

Inputhidden.aspx隐藏输入控件：

初始值为"隐藏的字符"，在我们第一次点击按钮时候显示出来，我们的方法：

Sub SubmitBtn_Click(sender As Object, e As EventArgs)

HiddenValue.Value = StringContents.Value
End Sub
这个方法把输入值赋给不可见的控件。我们完整的代码如下(hidden.aspx)：

<html>
<head>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
If IsPostBack Then
Span1.InnerHtml="隐藏值: <b>" & HiddenValue.Value & "</b>"
End If
End Sub
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
HiddenValue.Value = StringContents.Value
End Sub
</script>
</head>
<body>
<h3><font face="Verdana">.NET->HtmlInputHidden</font></h3>
<form runat=server>
<input id="HiddenValue" type=hidden value="隐藏的字符" runat=server>
请输入: <input id="StringContents" type=text size=40 runat=server>
<p>
<input type=submit value="确定" OnServerClick="SubmitBtn_Click" runat=server>
<p>
<span id=Span1 runat=server>显示隐藏的字符</span>
</form>
</body>
</html>

我们输入InputHidden，便点击按钮，则显示出默认的隐藏值。

2.4.5 HtmlTable
HtmlTable服务控件能让你轻松的创建你的表格的行和列，也可以按照程序的模式自动生成表格。

我们的例子展示了这个特性：

这就是在asp.net中，表格的表示。做两个Select控件来让用户选择表格的属性：

<p>
行:
<select id="Select1" runat="server">
<option Value="1">1</option>
<option Value="2">2</option>
<option Value="3">3</option>
<option Value="4">4</option>
</select>
<br>
列:
<select id="Select2" runat="server">
<option Value="1">1</option>
<option Value="2">2</option>
<option Value="3">3</option>
<option Value="4">4</option>
</select>
在用户提交的时候，实际上我们示对页面进行了刷新，即在Page_Load方法里面处理，具体如下(htmltable.aspx)：

<html>
<head>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
Dim numrows As Integer
Dim numcells As Integer
Dim i As Integer = 0
Dim j As Integer = 0
Dim Row As Integer = 0
Dim r As HtmlTableRow
Dim c As HtmlTableCell

' 产生表格
numrows = CInt(Select1.Value)
numcells = CInt(Select2.Value)
For j = 0 To numrows-1
r = new HtmlTableRow()
If (row Mod 2 <> 0) Then
r.BgColor = "Gainsboro"
End If
row += 1
For i = 0 To numcells-1
c = new HtmlTableCell()
c.Controls.Add(new LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
Next i
Table1.Rows.Add(r)
Next j
End Sub
</script>
</head>
<body>
<h3><font face="Verdana">.NET->HtmlTable</font></h3>
<form runat=server>
<font face="Verdana" size="-1">
<p>
<table id="Table1" CellPadding=4 CellSpacing=0 Border="1" runat="server" />
<p>
行:
<select id="Select1" runat="server">
<option Value="1">1</option>
<option Value="2">2</option>
<option Value="3">3</option>
<option Value="4">4</option>
</select>
<br>
列:
<select id="Select2" runat="server">
<option Value="1">1</option>
<option Value="2">2</option>
<option Value="3">3</option>
<option Value="4">4</option>
</select>
<input type="submit" value="产生表格" runat="server">
</font>
</form>
</body>
</html>

选择并提交，我们的表格就出来了：

2.4.6 HtmlGenericControl
HtmlGenericControl提供一个服务器控件，用来执行那些不直接的表现出来的未知的Html Control 标识。

例子文件Gerecolor.aspx：

<html>
<head>
<script language="VB" runat="server">
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Body.Attributes("bgcolor") = ColorSelect.Value
End Sub
</script>
</head>
<body id=Body runat=server>
<h3><font face="Verdana">.NET->HtmlGenericControl</font></h3>
<form runat=server>
<p>
Select a background color for the page: <p>
<select id="ColorSelect" runat="server">
<option>White</option>
<option>Wheat</option>
<option>Gainsboro</option>
<option>LemonChiffon</option>
</select>
<input type="submit" runat="server" Value="Apply" OnServerClick="SubmitBtn_Click">
</form>
</body>
</html>
我们的运行结果如下：

选择你所要的颜色，则面背景颜色就会改变。
2.4.7 HtmlInputButton
其实我们在上面的应用的时候就大概的应用过这个控件的，现在我们专门来讲讲它。这个控件有几个功能，可以是普通的按钮来响应一般的事件；可以是Submit按钮；也可以是Reset按钮。
2.4.7.1一般性的按钮
这个控件不是响应表单中通常的Submit或者Reset事件的，而是响应我们为他定制的的事件(button.aspx)。

<html>
<head>
<script language="VB" runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
Span1.InnerHtml = "你点击了这个按钮！"
End Sub
</script>
</head>
<h3><font face="Verdana">.NET->HtmlInputButton->button</font></h3>
<form runat=server>
<p>
<input type=button value="Button1" onServerClick="Button1_Click" runat="server">
  
<span id=Span1 runat=server />
</form>
</body>
</html>

点击按钮，如下：

2.4.7.2 Submit与Reset
对这两个属性大家肯定很熟悉的了，在这里我们简单的介绍一下。在asp.net中，对这两个按钮，我们也用到了<input type= 这个标示，只是我们在后面加上runat="server"，表示我们这个按钮在asp.net的框架之内，我们必须写方法来响应这个事件。如果没有runat="server"这个修饰，我们可以把这个控件当作普通的html按钮，不用写法响应事件，如：

这是一个标准的html表示，我们在asp.net中的表示：

<input type=submit value="提交" OnServerClick="SubmitBtn_Click" runat=server>
我们在按钮按下时候响应事件SubmitBtn_Click，具体如下(button2.aspx)：

<html>
<head>
<script language="VB" runat="server">
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
If Password.Value = "saidy2001" Then
Span1.InnerHtml = "密码正确！"
Else
Span1.InnerHtml="密码错误！"
End If
End Sub
' Sub ResetBtn_Click(sender As Object, e As EventArgs)
' Name.Value = ""
' Password.Value = ""
'End Sub

</script>
</head>
<BODY BGCOLOR="#CCCCFF">
<h3><font face="Verdana">.NET->Submit and Reset</font></h3>
<form runat=server>
输入名字: <input id="Name" type=text size=40 runat=server>
<p>
输入密码: <input id="Password" type=password size=40 runat=server> (密码是：
saidy2001)
<p>
<input type=submit value="提交" OnServerClick="SubmitBtn_Click" runat=server>
<input type=reset value="重写" OnServerClick="ResetBtn_Click" runat=server>
<p>
<span id="Span1" style="color:red" runat=server></span>
</form>
</body>
</html>

看到如下的效果：

输入名字和提示的密码，如下：

2.4.8 小结

本章介绍了服务器端的html控件，虽然它们的功能都可以以简单的html语言来实现，但是在asp.net中依然提供了对它们的实现。以html语言书写和以服务器端控件的实现在思维方式上已经有了很大的不同，对于html语言而言，只是一种标识；而对服务器端html控件而言，却已演变成为一段程序，一个对象。两者的区别不仅仅是，一个后缀名为.html，另一个为.aspx。html文件依赖于服务器端对标识的解释执行，html控件却可以被编译执行，两者在效率上的差异不言而喻。

转自：http://www.lezhu99.com/6.html

0 0