asp_net

ASP.Net HTML Server Control

Using ASP.NET HTML Server Controls

HtmlAnchor Control

The HtmlAnchor control allows you to access the HTML<a> tag on the server. This control is used to navigate from the client page to another page, or to another location within the same page.

You can use this control to dynamically modify the attributes and properties of the <a> element, display hyperlinks from a data source, and control events to generate HtmlAnchor controls dynamically.

void Page_Load(object sender, EventArgs e)
{
myanchor.HRef = "http://www.ebizel.com";
}
<html>
<body>
<form runat="server">
<a id=" myanchor " runat="server">Got To Page!</a>
</form> </body> </html>

HtmlButton Control

The HtmlButton control allows you to access the HTML <button> tag on the server.

The HtmlButton control render as an HTML 4.0 <button>. This differs from <input type=button> in that it enables web developers to create rich UI form buttons that can be composed from embedded HTML elements (and even other server controls).

The HtmlButton control enables programming of the HTML <button> element. You can use this control to customize the appearance of the buttons you place in .aspx pages. The HTML 4.0 <button> element enables you to create UI form buttons composed from embedded HTML elements and even other Web Forms controls.

Adding styles to an HtmlButton control

1. Declare an HtmlButton control on the Web Forms page: <button runat="server"> MyButton </button>

2. In the opening tag of the control, include a style attribute and declare the styles that you want the button to display. For example, the following code in the opening tag defines the font size and style, background color, border color, height, and width for the control.

style="font: 8pt verdana;background-color:lightgreen;border-color:black;height=30;width:100"

Including DHTML events in an HtmlButton control

1. Declare an HtmlButton control on the Web Forms page:

2. <button runat="server"> MyButton</button>

3. In the opening tag of the control, include the DHTML events that you want to occur on the browser in response to user behaviors. For example, the following code causes the background color of the control to change to light green when users move the mouse pointer over the control.

4. mouseover="this.style.backgroundColor='green'"

HtmlForm Control

The HtmlForm control allows you to access the HTML <form> tag on the server.

Using HtmlForm control

Create an HTML form control, which acts as a container for user input controls.

Use the HtmlForm control to program against the HTML <form> element. To take advantage of the PostBack services, all Web Forms controls (whether HTML, Web, pagelet, or custom) must be nested between well-formed opening and closing tags of the HtmlForm control.

The HtmlForm control's method attribute is set to POST by default. You can modify the method attribute to suit your needs, but setting the method attribute to a value other than GET or POST can break the built-in view state and post back services provided by the Web Forms.

Important to Note

â¢ You cannot include more than one HtmlForm control on a single Web Forms page.

â¢ If the tags are not closed properly, ASP.NET will not recognize the element. The element will either be ignored or a compilation error will occur, depending on how the element is formed.

â¢ The action attribute is always set to the URL of the page itself. The action attribute cannot be changed; therefore, you can only post back to the page itself.

form id="myformid"
method=POST | GET
action="imageURL"
runat="server" >
... User input controls...
</form>

HtmlGenericControl

The HtmlGenericControl class allows you to access HTML server control tags that are not represented by a specific .NET Framework class, such as <span>, <div>, <body>, and <font>.

The HtmlGenericControl provides a server control implementation for all other HTML server control tags not directly represented by a specific HTML server control. These include the <body>, <div>, and <span>, as well as headers ( <h1>...<h6> ), and even paragraphs ( <p> ) and list ( <ul>, <ol>, <dl> ) elements, among others. This control requires an opening and closing tag ( or an opening tag with a trailing slash /> ).

An HtmlGenericControl is created on the server in response to tags that include the runat = "server" attribute in elements that do not map directly to a specific HTML control.

The control maps the tag name of the particular element to be used as an HTML control to the page framework through the tagName property. This control inherits functionality from the HtmlContainerControl class, which allows to dynamically changing the inner content of HTML control tags.

HtmlImage Control

The HtmlImage control allows you to access the HTML <img> tag on the server.

HtmlImage control creates a server-side control that inserts an image control in a Web Forms document to the <img> HTML element and allows you to display an image. This control does not require a closing tag.

The HtmlImage control enables programming of the HTML <img> element, enabling developers to dynamically set and retrieve image attributes, including the image file's src, width, height, border, alt, and align attributes.

HtmlInputButton Control

The HtmlInputButton control allow you to creates a server-side control that maps to the <input type=button>, <input type=submit>, and <input type=reset> HTML elements and allows you to create a command button, submit button, or reset button, respectively.

This control does not require a closing tag.

The HtmlInputButton control permits the programming of the HTML <input type=button>, <input type=submit>, and <input type=reset> elements.

When a user clicks an HTMLInputButton control, input from the HtmlForm where the control is embedded is posted to the server, processed, and a response sent back to the requesting browser. This control is typically used in combination with other user input controls, such as the HtmlInputText, HtmlInputCheckBox, and HtmlSelect controls to gather user input that need to be processed on the server.

It is important to note that HtmlInputButton (<input type=button>) functionally similarly to HtmlButton (<button>), except that it can target any HTML3.2-compliant browser.

HtmlInputCheckBox Control

HtmlInputCheckBox control is used to creates a server-side control that maps to the <input type=checkbox> HTML element and allows to create a check box control that lets the user select a true or false value. This control does not require a closing tag.

HtmlInputCheckBox is typically used with other user input controls, such as the HtmlInputButton control, to determine whether a check box is selected. This is done by evaluating the Checked property on this control.

HtmlInputFile Control

The HtmlInputFile control is used to upload a file to a designated directory on a Web server. With this control, you can allow the upload of binary or text files from a client browser to the server. File upload is enabled in all HTML 3.2 and later Web browsers. This control does not require end tag.

HtmlInputHidden Control

Hidden controls are used within HTML forms to implant non-visible information that will be sent to the server each time a user performs a post-back. The control itself is not rendered but its value is submitted with the form. This provides a mechanism for storing and delivering information to the receiving program without user interaction.

The HtmlInputHidden control enables programming of the HTML <input type=hidden> element. This sample illustrates use of the HtmlInputHidden control. This control does not require a closing tag.

The Web Forms framework uses this feature of HTML to automatically store and restore the viewstate of server controls across roundtrips to the server.

HtmlInputImage Control

An HtmlInputImage control is used to create a graphical button. This control does not require a closing tag.

HtmlInputImage control is functionally similar to an HtmlButton control, but is supported in all HTML3.2-based browser clients.

The HtmlInputImage control allows programming of the HTML <input type=image> element. This control is typically used in combination with other user input controls. The control offers the same button customization as in HTML.

HtmlInputRadioButton Control

The HtmlInputRadioButton control is used to create a radio button input field. By default, each individual radio button can be selected. This control does not require a closing tag.

HtmlInputRadioButton facilitate programming of the HTML <input type=radio> element. You can group a set of radio buttons together in cases where only one button from the set of options needs to be selected. A common value for the Name attribute is used to set on each radio button in the group.

HtmlInputText Control

The HtmlInputText control is a single-line input control that accepts text entries. HtmlInputText supports two behaviors. If Type is Text (the default), the control acts as a standard textbox. If Type is Password, the user's input is masked by the asterisk (*) character to prevent it from being seen.

The HtmlInputText control allows to create and run server side code against the HTML <input type=text> and <input type=password> elements. You can programmatically retrieve or assign values to the control's properties like MaxLength, Size, and Value. There in not need of the closing tag.

This control is typically used in combination controls, like HtmlInputButton, HtmlInputImage, or HtmlButton, to send and process user input on the server.

HtmlSelect Control

The HtmlSelect control let you to access the HTML <select> tag on the server side. The HtmlSelect control facilitates programming of the HTML <select> element and used in cases where a developer needs to programmatically access a selectable list of HTML <option> elements.

<select id = "SelectionID" runat = "server"
DataSource = "datasource"
DataTextField = "fieldtodatabindoptionttext"
DataValueField = "fieldtodatabindoptionvalue"
Items = "collectionofoptionelements"
Multiple
OnServerChange = "onserverchangehandler"
SelectedIndex = "indexofcurrentlyselecteditem"
Size = "numberofvisibleitems"
Value = "currentitemvalue">
<option>value1</option>
<option>value2</option>
</select>

To resolve the selected item from a single selection HtmlSelect control, first use the SelectedItem property to get the index of the selected item. You can then use this index to retrieve the selected item from the Items collection.

To resolve the selected items from an HtmlSelect control that permits multiple selections simultaneously, you require to iterate through the Items collection and test the Selected property of each item.

You can also connect the control to a data source. Set the DataSource property to specify the data source to attach to the control. Once the data source is bound to the control, you can specify which field to attach to the Value and Text properties by setting the DataValueField and DataTextField properties, respectively.

HtmlTable Control

The HtmlTable control allows you to access the HTML <table> tag on the server side. An HtmlTable control is made up of rows stored in the Rows collection of a table. You can customize the appearance of a table by using HtmlTable control.

<table id = "TableID" runat = "server"
align = left | center | right
bgcolor = "backgroundgcolor"
border = "borderwidthinpixels"
bordercolor = "bordercolor"
cellpadding = "spacingwithincellsinpixels"
cellspacing = "spacingbetweencellsinpixels"
height = "tableheight"
rows = "collectionofrows"
width = "tablewidth">
<tr>
<td>CellContent<td></tr>
<tr>
<td>CellContent<td></tr>
</table>

The table control can be bound to a data source, and enables dynamically generating a table by adding HtmlTableRows to the table's Rows collection, and HtmlTableCells to the row's Cells collection. Content to a table cell can programmatically be added by adding controls to the cell's Controls collection.

To create a table, first declare an HtmlTable control in the web form on your page. Next, place HtmlTableRow objects between the opening and closing tags of the HtmlTable control, one for each row you want in your table. Once the rows of the table are defined, declare HtmlTableCell objects between the opening and closing tags of each HtmlTableRow object to create the cells of the row.

HtmlTableCell Control

The HtmlTableCell control allows you to access the HTML <td> and <th> tags on the server. The HtmlTableCell control tag can only be used within <tr> tag of HTML <table> tag.The HtmlTableCell control facilitates programming of the HTML <td> and <th> elements. You can dynamically append cells to an HtmlTableRow control, whether in response to control events or through binding an HtmlTable control to the entries in a data source.

<td or th id = "accessID" runat = "server"
align = "alignmentofcontentincell"
bgcolor = "backgroundcolor"
bordercolor = "bordercolor"
colspan = "#ofcolscellspans"
height = "cellheight"
nowrap=true | False
rowspan = "#ofrowscellspans"
valign = "vertalignmentofcellcontent"
width = "cellwidth">
CellContent
</td or /th>

You can also control the appearance of each individual cell by using the HtmlTableCell class allows. The horizontal and vertical alignment of the contents of the cell is managed by setting the Align and VAlign properties, respectively. By setting the NoWrap property, you can also specify whether the text automatically continues on the next line of the cell.

The HtmlTableCell class permits to span cells by setting the ColSpan and RowSpan properties. The ColSpan property allow you control how many columns a cell occupies, while the rowspan property specifies the number of rows a cell occupies.

HtmlTableRow Control

The HtmlTableRow control allows you to access the HTML <tr> tag on the server side and facilitates programming of the HTML <tr> element. You can dynamically insert rows to an HtmlTable control, whether in response to control events or through binding an HtmlTable control to the entries in a data source.

<tr id = "accessID" runat = "server"
align = "horizontalalignmentofrowcontent"
bgcolor = "tablebackgroundcolor"
bordercolor = "bordercolor"
height = "tableheight"
cells = "collectionoftablecells"
valign = "verticalalignmentofrowcontent">
<td>cellcontent</td>
</tr>

You can customize the appearance of each individual row in the table using HtmlTableRow class. The horizontal and vertical alignments of the contents of the cells in the row are controlled by setting the Align and VAlign properties, respectively.

HtmlTextArea Control

The HtmlTextArea control allows you to access the HTML <textarea> tag on the server and also facilitates programming of the HTML <textarea> element. The control is normally used when you want to collect feedback from users.

<textarea id = "accessID" runat = "server"
cols = "numberofcolsintextarea"
name = "namepassedtobrowser"
rows = "numberofrowsintextarea"
onserverchange = "onserverchangehandler">
textareacontent
</textarea>

The HtmlTextArea control is a multiline input control that allows the user to enter text. The display width of HtmlTextArea is determined by its Cols property, and the display height is determined by the Rows property.

The HtmlTextArea control has a ServerChange event that is fired when the contents of the control alter between posts to the server. The event is commonly used to authenticate the text entered in the control.

The executable code itself has been moved outside the HTML. The features offered by HTML server controls are following:

â¢ These controls are capable to handle events in the client script.

â¢ A collection of events for which you can write event handlers like the way you would in a client-based form, except that the event is handled in server code.

â¢ An object model that can be programmable on the server using familiar object-oriented techniques. Each server control exposes properties that facilitate you to manipulate the control's markup attributes programmatically in server code.

â¢ When the page makes a round trip to the server, the values that the user entered into HTML server controls are automatically maintained and sent back to the browser.

â¢ You can verify by interacting with ASP.NET validation controls that a user has entered correct information into a control.

â¢ Facilitate data binding to one or more properties of the control.

â¢ Support for styles if the ASP.NET Web page is displayed in a browser that supports cascading style sheets.

â¢ Allow you to add browser-specific attributes to your controls.