Web Studyaspnet.blogspot.com Babyneed.blogspot.com

ASP.Net Web Developer Guide

Power By: eXTReMe Tracker Powered by Blogger  
 
 
 
 

 

 
Important Links
 
   
     
 
Sitemap
 
   
   
 
Reference
 
   

Thursday, March 16, 2006

Using HTML Server Controls(chapter 3)

Conventional HTML elements are not programmable at the server side.Their values do not persist in postbacks.These are essentially treated as opaque texts that are passed to the browser. In ASP.NET, we may convert an HTML element to an HTML server control by adding an attribute runat=“server.” This notifies he ASP Engine to create an instance of the control during parsing.We will, of course, need to specify an ID of the element so that we can manipulate it programmatically at the server side.These controls are particularly useful for migrating ASP applications to ASP.NET applications.
HTML server controls have been derived directly or indirectly from the base class System.Web.UI.HtmlControls.HtmlControl and map directly to HTML elements. The hierarchy of HTML server control classes is shown in Figure 3.27. Basically, the hierarchy divides the classes into three major categories: the classes that mimic the HTML <input> tag, the classes that may act as container classes, and finally the HtmlImage class. Several classes in the second category also employ the HTML <input> tag. HTML server controls must reside within a containing <form> control with the runat=“server” attribute.
In this section, we will present a number of examples of HTML server controls. If you are relatively new to ASP, be sure to go through these examples. Most of these examples can also be enhanced using the Web controls. Most importantly, the concepts learned in this section will enable you to develop better applications using Web controls.
Figure 3.27 HTML Server Controls Hierarchy

Using the HtmlAnchor Control
You can use the HtmlAchor control (<a>) to navigate from a page to another page.This basically works almost like the Html anchor tag; the only difference is that it works on the server. It has the following attributes:
<a runat="server" id="programmaticID" href= "linkurl"
name="bookmarkname" OnServerClick="onserverclickhandler"
target="linkedcontentframeorwindow" title="titledisplayedbybrowser">
If necessary, we can use this control to dynamically modify the attributes and properties of the <a> element and display hyperlinks from a data source.The href attribute contains the URL of the page to be linked to.We have shown an example of anchor controls in Figure 3.28.
Using the HtmlTable Control
The HtmlTable control mimics the Html <table> tag.We may define rows using <tr> tags.Table cells are defined using <td> tags.This control is a container control, and so we can embed other controls in its cells. It has the following attributes:
<table runat="server" id="programmaticID" align=left center right
bgcolor="bgcolor" border="borderwidthinpixels"
bordercolor="bordercolor" cellpadding="spacingwithincellsinpixels"
cellspacing="spacingbetweencellsinpixels" height="tableheight"
rows="collectionofrows" width="tablewidth" >
</table>
In the following example, as you can see in Figure 3.28, we will build an HtmlTable with two rows and two columns. Each cell of the table will contain an HtmlAnchor control.
Figure 3.28 Embedded HTMLAnchor Controls in an HtmlButton Control

The code for this application, as shown in Figure 3.29, is self-explanatory. Each pair of <tr> and </tr> entries enable us to define a row, and within each row, we nest a pair of <td> </td> to define the table’s data (cell). In this example, we have embedded an HtmlAnchor control in each cell.
Figure 3.29 HtmlAnchor1.aspx
<!— Chapter3\HtmlAnchor1.aspx —>
<html><head></head><form runat="server">
<table style= width: 170px; height: 50px" cellSpacing="0"
cellPadding="5" width="170" border="4">
<tr><td><a id="anchor1" runat="server"
href="http://www.syngress.com">Syngress Home</a>
</td>
<td><a id="acnhor2" runat="server"
href="http://www.syngress.com/book_catalog/index.htm">
Syngress Catalog</a>
</td>
</tr>
<tr><td><a id="anchor3" runat="server"
href="http://www.syngress.com/demo/index.htm">
Syngress Demo </a>
</td>
<td><a id="anchor4" runat="server"
href="http://www.syngress.com/specials/index.htm">
Syngress Specials</a>
</td>
</tr>
</table></form></html>
Using HtmlInputText and HtmlTextArea Controls
You can use both of these controls to collect text data from the user.You can use the HtmlInputText control to implement server-side code against the HTML <input type=text> and <input type=password> tags. Its major attributes are these:
type (text or password), runat, id, maxlength, size , and value.The HtmlTextArea control enables the user to enter multi-line text.Thus, it is the server-side equivalent to the HTML <textarea> element. Its rows and cols properties can be used to define its size.You can use its onserverchange attribute to run an event handling function.
We will illustrate the usage of these controls with an example. In this application, the user will enter a short story in a text area, and then he or she will enter the name in a textbox, and the password in a password-type textbox. On the click event of a button, we will check the password and display the appropriate message in an html <span> element.The run-time view of the application is shown in Figure 3.30.The code (shown in Figure 3.31) for this application is pretty
straightforward and more or less self-explanatory.
Figure 3.30 Using HtmlInputText and HtmlTextArea Controls

Figure 3.31 HtmlText1.aspx
<!— Chapter3/HtmlText1.aspx —>
<html><form method="post" runat="server">
Your Story:<br>
<TextArea id="txtAreaStory" runat="server" cols="20" rows="3"/><br>
Name?<input type="text" id="txtName" size="12" runat="server"/><br>
Password? <input type="password" id="txtPwd" runat="server" size="12"/>
<br><input type="Button" runat="server" value="Enter"
OnServerClick="CheckPassword"/>
<span id="spnMessage" runat="server"> </span></h2>
</form></html>
<script language="VB" runat="server">
Sub checkPassword(source As Object, e As EventArgs)
If txtName.Value="Pepsi" And txtPwd.Value="Beagle" Then
spnMessage.InnerHtml="<b>Password Correct: Story Accepted!!</b>"
Else
spnMessage.InnerHtml="<b>Bad Password: Story Rejected!!</b>"
End If
End Sub
</script>
Using HtmlButton and HtmlImage Controls
You will find two of these controls: HtmlInputButton and HtmlButton. The HtmlInputButton supports the HTML Reset and Submit button types. On the other hand, the HtmlButton control can be used to develop server-side code against the HTML <button> element.We can provide custom code for the OnServerClick event.You can customize its appearance and imbed other controls in it.We have used HtmlButton controls in many of our previous examples. In our next example, we will embed an HTML <img> element inside a button.We have used the OnMouseOver and OnMouseOut attributes of a button control to provide rollover effects.We have also shown how to use an in-line style attribute that you can use to format many of the controls.The run-time view of the application and its code listing are shown in Figure 3.32 and Figure 3.33.
Figure 3.32 Using the HtmlImage Control in an HtmlButton Control

Figure 3.33 HtmlButton1.aspx
<html><form runat="server">
<h4><font face="Verdana">
HtmlButton Sample With Embedded <img> Tag And Rollover
</font></h4>
<font face="Verdana" size="-1"><p>
<Button id="btnReel"
OnServerClick="btnReel_OnClick"
OnMouseOver="this.style.backgroundColor='yellow'"
OnMouseOut="this.style.backgroundColor='white'"
style="font: 8pt verdana; background-color:lightgreen;
border-color:blue; height:100; width:170"
runat="server">
<img src="images/SmallSpinReel1.jpg"/><b> Bass Master!</b>
</Button><p>
<Span id=span1 runat="server" />
</font></form></body></html>
<script language="VB" runat="server">
Sub btnReel_OnClick(Source As Object, e As EventArgs)
span1.InnerHtml="You clicked Bass Master"
End Sub
</script>

0 Comments:

Post a Comment

<< Home