ASP.NET 2.0中的Web和HTML服务器控件
2006-07-24 17:13:00 来源:WEB开发网除了代码和标记之外,asp.net 2.0页面还可以包含服务器控件,它们是可编程的服务器端对象,典型情况下表现为页面中的UI元素(例如文本框或图像)。服务器控件参与页面的执行过程,并给客户端生成自已的标记呈现内容。服务器控件的优势在于,它让开发者从简单的积木式的组件中获取复杂的呈现方式和操作行为,极大地减少了生成动态Web页面所需要编写的代码量;另外一个优势是,定制它们的呈现方式和行为非常简单。服务器控件所暴露的属性可以通过宣告式(在标记中)或编程(在代码中)设置。服务器控件(和页面控件本身)还暴露了一些事件,开发者可以处理这些事件,在页面执行的过程中,或者响应向服务器发回页面的客户端操作(Postback)的时候,所需来执行的特定操作。服务器控件还简化了保留状态信息的问题,它会自动地在多个成功的“发回” 操作之间保留值。
服务器控件是在.aspx文件中使用自定义标记或固有的HTML标记声明的,它包含了runat="server"属性值。固有的HTML标记是由System.Web.UI.HtmlControls名字空间中的一个控件来处理的。没有显式地映射到某个控件的标记会被指定为System.Web.UI.HtmlControls.HtmlGenericControl类型。
下面的例子使用了四个服务器控件:<form runat=server>、<asp:textbox runat=server>、<asp:dropdownlist runat=server>和<asp:button runat=server>。在运行的时候这些服务器控件自动地生成HTML内容。
<form action="intro4_vb.aspx" method="post" runat=server>
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
</h3>
<asp:button text="Lookup" runat="server"/>
</form>
请注意:这些服务器控件自动地保留了往返于服务器之间的客户端所输入的值。这些控件状态并非存储在服务器上(它们存储在往返于请求之间的<input type="hidden">窗体字段中)。它不需要客户端脚本。
除了支持标准的HTML输入控件之外,ASP.NET还允许开发者在页面中使用丰富的定制控件。例如,下面的例子演示了如何使用<asp:adrotator>控件在页面上动态地显示滚动广告。
<form action="intro5_vb.aspx" method="post" runat="server">
<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
</h3>
<asp:button text="Lookup" runat="server"/>
</form>
处理服务器控件事件
每个ASP.NET服务器控件都能够暴露一个对象模型,它包含了属性、方法和事件。ASP.NET开发者可以使用这个对象模型清晰地修改页面、与页面交互操作。
下面的例子演示了ASP.NET页面开发者如何处理<asp:button runat=server>控件的OnClick事件来改变<asp:label runat=server>控件的Text属性的。
<html>
<head>
<link rel="stylesheet"href="intro.CSS">
</head>
<script language="VB" runat=server>
Sub SubmitBtn_Click(Sender As Object, E As EventArgs)
Message.Text = "Hi " & HttpUtility.HtmlEncode(Name.Text) & ", you selected: " & Category.SelectedItem.Text
End Sub
</script>
<body>
<center>
<form action="intro6_vb.aspx" method="post" runat="server">
<asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="Category" runat=server>
<asp:listitem >psychology</asp:listitem>
<asp:listitem >business</asp:listitem>
<asp:listitem >popular_comp</asp:listitem>
</asp:dropdownlist>
</h3>
<asp:button text="Lookup" runat="server"/>
<p>
<asp:label id="Message" runat="server"/>
</form>
</center>
</body>
</html>
这个简单的例子与前面演示的“Intro3”示例功能相当。请注意,在这个新的基于服务器控件的例子中,代码变得非常清晰和简单了。我们以后还将看到,ASP.NET页面框架组件也暴露了大量的页面层次的事件,在页面的处理过程中,你可以编写在特定时间执行的代码。这些事件包括Page_Load和Page_Render。
使用服务器控件
ASP.NET服务器控件是在页面中使用包含runat="server"属性的宣告式标记来定义的。下面的例子声明了三个<asp:label runat="server">服务器控件,并定义了每个控件的文本和样式属性。
<html>
<body>
<h3><font face="Verdana">Declaring Server Controls</font></h3>
This sample demonstrates how to declare the <asp:label> server control and
manipulate its PRoperties within a page.
<p>
<hr>
<asp:label id="Message1" font-size="16" font-bold="true" forecolor="red" runat=server>This is Message One</asp:label>
<br>
<asp:label id="Message2" font-size="20" font-italic="true" forecolor="blue" runat=server>This is Message Two</asp:label>
<br>
<asp:label id="Message3" font-size="24" font-underline="true" forecolor="green" runat=server>This is Message Three</asp:label>
</body>
</html>
操作服务器控件
你可以用编程的方式,通过提供ASP.NET服务器控件的id属性来识别服务器控件;还可以在运行时刻,使用这个id指针来编程操作该服务器控件的对象模型。例如,下面的例子演示了页面开发者如何在Page_Load事件中编程设置<asp:label runat="server">控件的Text属性。
<html>
<script language="VB" runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Message.Text = "You last accessed this page at: " & DateTime.Now
End Sub
</script>
<body>
<h3><font face="Verdana">Manipulating Server Controls</font></h3>
This sample demonstrates how to manipulate the <asp:label> server control within
the Page_Load event to output the current time.
<p>
<hr>
<asp:label id="Message" font-size="24" font-bold="true" runat=server/>
</body>
</html>
处理控件的事件
ASP.NET服务器控件也可以暴露和引发服务器事件,以供页面开发者处理。页面开发者可以通过宣告式地给每个控件编写事件来实现这项功能(在这种情况下,事件的属性名称表明事件的名称,属性的值表明被调用的方法的名称)。例如,下面的代码示例演示了如何给按钮控件编写OnClick事件。
<html>
<script language="VB" runat="server">
Sub EnterBtn_Click(Sender As Object, E As EventArgs)
Message.Text = "Hi " & Name.Text & ", welcome to ASP.NET!"
End Sub
</script>
<body>
<h3><font face="Verdana">Handling Control Action Events</font></h3>
<p>
This sample demonstrates how to access a <asp:textbox> server control within the "Click" event of a <asp:button>, and use its content to modify the text of a <asp:label>.
<p>
<hr>
<form action="controls3.aspx" runat=server>
<font face="Verdana"> Please enter your name:
<asp:textbox id="Name" runat=server/>
<asp:button text="Enter" runat=server/>
<p>
<asp:label id="Message" runat=server/>
</font>
</form>
</body>
</html>
处理多个服务器事件
事件处理程序为页面开发者在ASP.NET页面中构造逻辑提供了一条清晰的途径。例如,下面的例子演示了如何在一个页面上处理四个按钮事件。
<html>
<script language="VB" runat="server">
Sub AddBtn_Click(Sender As Object, E As EventArgs)
If Not (AvailableFonts.SelectedIndex = -1)
InstalledFonts.Items.Add(New ListItem(AvailableFonts.SelectedItem.Value))
AvailableFonts.Items.Remove(AvailableFonts.SelectedItem.Value)
End If
End Sub
Sub AddAllBtn_Click(Sender As Object, E As EventArgs)
Do While Not (AvailableFonts.Items.Count = 0)
InstalledFonts.Items.Add(New ListItem(AvailableFonts.Items(0).Value))
AvailableFonts.Items.Remove(AvailableFonts.Items(0).Value)
Loop
End Sub
Sub RemoveBtn_Click(Sender As Object, E As EventArgs)
If Not (InstalledFonts.SelectedIndex = -1)
AvailableFonts.Items.Add(New ListItem(InstalledFonts.SelectedItem.Value))
InstalledFonts.Items.Remove(InstalledFonts.SelectedItem.Value)
End If
End Sub
Sub RemoveAllBtn_Click(Sender As Object, E As EventArgs)
Do While Not (InstalledFonts.Items.Count = 0)
AvailableFonts.Items.Add(New ListItem(InstalledFonts.Items(0).Value))
InstalledFonts.Items.Remove(InstalledFonts.Items(0).Value)
Loop
End Sub
</script>
<body>
<h3><font face="Verdana">Handling Multiple Control Action Events</font></h3>
<p>
This sample demonstrates how to handle multiple control action events raised from
different <asp:button> controls.
<p>
<hr>
<form action="controls4.aspx" runat=server>
<table>
<tr>
<td>
Available Fonts
</td>
<td>
<!-- Filler -->
</td>
<td>
Installed Fonts
</td>
</tr>
<tr>
<td>
<asp:listbox id="AvailableFonts" width="100px" runat=server>
<asp:listitem>Roman</asp:listitem>
<asp:listitem>Arial Black</asp:listitem>
<asp:listitem>Garamond</asp:listitem>
<asp:listitem>Somona</asp:listitem>
<asp:listitem>Symbol</asp:listitem>
</asp:listbox>
</td>
<td>
<!-- Filler -->
</td>
<td>
<asp:listbox id="InstalledFonts" width="100px" runat=server>
<asp:listitem>Times</asp:listitem>
<asp:listitem>Helvetica</asp:listitem>
<asp:listitem>Arial</asp:listitem>
</asp:listbox>
</td>
</tr>
<tr>
<td>
<!-- Filler -->
</td>
<td>
<asp:button text="<<" runat=server/>
<asp:button text="<" runat=server/>
<asp:button text=">" runat=server/>
<asp:button text=">>" runat=server/>
</td>
<td>
<!-- Filler -->
</td>
</tr>
</table>
</form>
</body>
</html>
执行页面导航(第一种情况)
在实际的Web应用程序中,多个页面之间的导航是常见的。下面的例子演示了如何使用<asp:hyperlink runat=server>控件导航到另外一个页面(同时传递了自定义的查询字符串参数)。接着这个例子演示了如何轻易地在目标页面上得到这些查询字符串参数。
<html>
<script language="VB" runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Dim RandomGenerator As Random
RandomGenerator = New Random(DateTime.Now.Millisecond)
Dim RandomNum As Integer
RandomNum = RandomGenerator.Next(0, 3)
Select RandomNum
Case 0:
Name.Text = "Scott"
Case 1:
Name.Text = "Fred"
Case 2:
Name.Text = "Adam"
End Select
AnchorLink.NavigateUrl = "controls_navigationtarget_vb.aspx?name=" & System.Web.HttpUtility.UrlEncode(Name.Text)
End Sub
</script>
<body>
<h3><font face="Verdana">Performing Page Navigation (Scenario 1)</font></h3>
<p>
This sample demonstrates how to generate a HTML Anchor tag that will cause the client to
navigate to a new page when he/she clicks it within the browser.
<p>
<hr>
<p>
<asp:hyperlink id="AnchorLink" font-size=24 runat=server>
Hi <asp:label id="Name" runat=server/> please click this link!
</asp:hyperlink>
</body>
</html>
执行页面导航(第二种情况)
并非所有的页面导航都由客户端的超级链接发起。ASP.NET页面开发者调用Response.Redirect(url)方法也可以发起客户端页面的重定向或导航。这种情况典型发生在真正进行导航之前,服务器端需要验证客户端的输入信息的时候。
下面的例子演示了如何使用Response.Redirect方法把参数传递到另外一个目标页面。它还演示了如何在目标页面上简单地获取这些参数。
<html>
<script language="VB" runat="server">
Sub EnterBtn_Click(Sender As Object, E As EventArgs)
If Not (Name.Text = "")
Response.Redirect("Controls_NavigationTarget_vb.aspx?name=" & System.Web.HttpUtility.UrlEncode(Name.Text))
Else
Message.Text = "Hey! Please enter your name in the textbox!"
End If
End Sub
</script>
<body>
<h3><font face="Verdana">Performing Page Navigation (Scenario 2)</font></h3>
<p>
This sample demonstrates how to navigate to a new page from within a <asp:button> click event, passing a <asp:textbox> value as a querystring argument (validating first that the a legal textbox value has been specified).
<p>
<hr>
<form action="controls6.aspx" runat=server>
<font face="Verdana">Please enter your name:
<asp:textbox id="Name" runat=server/>
<asp:button text="Enter" runat=server/>
<p>
<asp:label id="Message" forecolor="red" font-bold="true" runat=server/>
</font>
</form>
</body>
</html>
更多精彩
赞助商链接