Introduction To Tml Controls

ou can take standard HTML elements and control these elements on your Web server with HTML server controls. This gives you control over attributes of these elements while processing server-side code.

BASICS OF HTML SERVER CONTROLS

HTML server controls are essentially HTML elements that the server can process. This processing can occur before sending the Web page to the user and/or when the page is posted back to the server. All HTML server controls (also known as HTML controls) map directly to an HTML element. Also, "the properties of" almost every HTML control are identical to the corresponding HTML element's attribute.

HTML controls are defined in the

System.Web.UI.HtmlControls namespace. You can create an HTML control in most cases simply by adding the RUNAT="Server" attribute within the tag of the HTML element. If you incorrectly set the RUNAT attribute on the HTML element, you lose all server-side processing capabilities. You want to give each HTML control a unique ID attribute so you have a way to reference the control in your server-side code.

You can set attributes for the HTML controls to establish control properties and to handle events. Property attributes configure how the control appears and behaves as an HTML element on a Web page. In most cases, the property attributes map directly to the standard attributes on the HTML 4.0 element. For example, the ID attribute on an HTML control renders in the client's browser as an ID attribute on the HTML element, too. As for handling events, you distinguish events as attributes on an HTML control to map an HTML control's event to a procedure that will process the event. For example, when working with the HTMLButton control, you can add an attribute onServerClick to map to a function that is called when the user clicks the button.

HTML server controls derived from the Htmllnput abstract class need to be within an HtmlForm control. For all HTML server controls, overlapping tags are not allowed — you need to make sure that the HTML tags are properly closed and cleanly nested.

The .NET Framework provides classes to handle the most commonly used HTML elements. For HTML elements that corresponding HTML controls, lacking the HtmlGenericControl class. You can programmatically read and write to attributes on the HTML element and map events to server-side code. Note that any attribute declared on an HTML server control is added to the HtmlGenericControl's Attribute collection and can be manipulated in server-side code. For example, with a <body ID="Body" RUNAT="Server"> element, you can programmatically attribute on a body tag change the bgcolor.netframeworkoffers with the following code:

Body.Attributes["bgcolor"] = "blue";).

All HTML controls are derived from the HtmlControl abstract class. Within this abstract class, there are two other abstract classes, HtmlContainerControl and HtmlInputControl, which contain all HTML controls, except for the HtmlImage class, which is derived directly from the HtmlControl abstract class.

CLASSIFICATIONS OF HTML CONTROLS

All HTML Controls

On the HtmlControl abstract class, you can find the following properties, which are commonly used across all HTML controls.

Attributes (Read) — Collection of all attribute name and value pairs expressed on a server control tag within a selected ASP.NET page

Disabled (Read/Write) — A value that indicates whether the disabled attribute is included when the browser renders an HTML control. Including this attribute makes the control read-only.

Style (Read) — All Cascading Style Sheet (CSS) properties applied to a specified HTML server control in an .aspx file

TagName (Read) — The element name of a tag containing a RUNAT="Server" attribute

HTML Container Controls

HtmlContainerControl's derived controls map to HTML elements requiring opening and closing tags, such as the <select>, <a>, <button>, and <form> elements.

HtmlContainerControl's derived classes share the following common properties:

InnerHtml (Read/Write) — The HTML content found between the opening and closing tags of the specified HTML control

InnerText (Read/Write) — All text between the opening and closing tags of the specified HTML control

HTML Image Control

The HtmlImage server control is the only concrete class derived directly from the HtmlControl abstract class. The common properties for this control are:

Align (Read/Write) — The alignment of the image relative to other Web page elements

Alt (Read/Write) — The alternative caption that the browser displays if an image is unavailable or currently downloading to the user's browser

Border (Read/Write) — The width of a frame for an image

Height (Read/Write) — The height of the image

Src (Read/Write) — The source of the image file to display

Width (Read/Write) — The width of the image

HTML Input Controls

HtmlInputControl derived controls map to the standard HTML input elements that are part of an HTML form. These HTML elements function without a separate closing tag. They include a Type attribute that defines the type of input control they render on a Web page.

HtmlInputControl derived classes share the following properties:

Name (Read/Write) — A unique identifier name for the HtmlInputControl

Value (Read/Write) — The contents of an input control

Type (Read) — The type of HtmlInputControl

PROCESS REQUESTS TO THE SERVER

You can use the HTMLForm control to process requests on the server to fire off events where server-side code is executed, giving you the ability to access information on the form and process this information accordingly. Because your code is running server-side, you have access to the entire set of .NET Framework classes of running client-side, with your code dependent on the user's Web browser and operating system. Running client-side script places you are at the mercy of your user's environment. Problems may arise due to configuration issues and limitations of the user's machine or browser.

Employing an HTMLForm control is much like using an ordinary HTML form. An HTMLForm control requires you to add the runat attribute to your form tag, setting the value equal to Server. This value tells ASP.NET that you want to use the HTMLForm control, as opposed to an ordinary HTML form. For example, you can use the HTMLForm control to fire off an event on the server. You can then use this event to do a many of things, such as collecting information from the form, navigating to an appropriate page based on form input, and displaying a message to the user by using a <span> tag.

PROCESS REQUESTS TO THE SERVER

PROCESS REQUESTS TO THE SERVER

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

B Add a heading for the page.

_Q Add a form to the page and give the form an ID attribute and set the RUNAT attribute to "Server".

□ Add a <span> tag on the form to display a message to the user.

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

B Add a heading for the page.

Add a message to the user.

_Q Add a form to the page and give the form an ID attribute and set the RUNAT attribute to "Server".

Add a button using the OnServerClick event to call the buttonContinue_OnClick function.

□ Add a <span> tag on the form to display a message to the user.

Exlr E[ When working with forms, you often use

ACTION and METHOD attributes. The ACTION attribute tells the Web browser where to send the form data. In most cases with ASP.NET, you do not use this attribute, so by default the browser posts to the page where the form is located, enabling you to validate the form data before sending the user to the next page or to display a message on the page the user was viewing. The METHOD attribute tells the Web browser whether to send the form data to the Web server via the URL in the query string (this would be a GET) or through the HTTP Request (this would be a POST). A <POST> allows you to send more form data to the server.

You can also set the DISABLED attribute. The default value for this attribute is false, but you can change it to true if you want a non-editable version of the form. When you do this, the form controls appear grayed out.

LQ Add the buttonContinue_OnClick function between the <HEAD> tags.

0 Set the InnerHTML

property of the <span> tag on the form.

-Q Save the file and request it from the Web server.

, Click the Continue button.

LQ Add the buttonContinue_OnClick function between the <HEAD> tags.

0 Set the InnerHTML

property of the <span> tag on the form.

-Q Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

, Click the Continue button.

-■ A continue message appears.

Was this article helpful?

0 0

Post a comment