AddThis Social Bookmark Button

Print

Writing ASP.NET Web Forms with C#
Pages: 1, 2, 3, 4, 5, 6

HTML Controls

HTML controls have a one-to-one mapping with HTML tags. To use an HTML control in a Web Form, you declare it using the standard HTML tag that represents the control in HTML. However, the tag will have one attribute that must be present to indicate that this control is a server control: runat. The runat attribute will have the value server. As one example, the following is an input text control.



<input type="text" id="userName" runat="server">

In the .NET Framework type library, HTML controls reside in the System.Web.UI.HtmlControls namespace, and all controls derive directly and indirectly from the HtmlControl abstract class. HTML controls are grouped into three categories:

  • Input controls. All input controls are derived from the abstract class HtmlInputControl, which itself is an extension of HtmlControl. Child classes of HtmlInputControl are HtmlInputButton, HtmlInputCheckBox, HtmlInputFile, HtmlInputHidden, HtmlInputImage, HtmlInputRadioButton, and HtmlInputText.

  • Container controls. These controls are extended from the HtmlContainerControl class. HtmlAnchor, HtmlButton, HtmlForm, HtmlGenericControl, HtmlSelect, HtmlTable, HtmlTableCell, HtmlTableRow, and HtmlTextArea are container controls derived from HtmlContainerControl.

    Comment on this articleWhat are your experiences with Web form development with C# or even other programming languages?
    Post your comments

  • Image control. There is only one class in this category: HtmlImage. You can guess from the control name what HTML tag each control maps to; for example, HtmlAnchor maps to the tag, HtmlForm maps to <form> and HtmlImage maps to <img>.

Web Controls

Web controls exist within the System.Web.UI.WebControls namespace and derive directly or indirectly from the WebControl base class. Some of the controls are very simple controls that are identical to HTML controls. Some others, however, provide higher-level abstractions.

Web controls are declared using the asp prefix. For example, the following is a TextBox Web control declaration.

<asp:TextBox id="userName" type="text" runat="server">

The above Web control is rendered as the following.

<input name="userName" type="text" id="userName" type="text" />

which is the same as the HTML tag sent by the following HTML input text control.

<input type=text id="userName" runat="server">

Note that a Web control must be written using the XML syntax, whereas an HTML control can use either the HTML or XML syntax.

However, you can't interchange a Web control with its HTML control equivalent without changing the code, because a Web control in an ASP.NET page will be translated into a different object. For example, to retrieve the value entered by the user to a TextBox Web control, you would use the Text property of the TextBox object, whereas to do the same task with an HtmlInputText control you use the Value property.

Even though HTML controls present similarity that makes code migration from ASP to ASP.NET easier, Web controls have some superior features that don't exist in the former. These features include the following:

  • Web controls provide a rich and consistent object model. The richness is partly attributed to the parent base classes WebControl. This class includes properties such as ForeColor, Font, Enabled, BackColor, BorderColor, Height, etc. Because all Web controls are child classes of WebControl, all Web controls inherit these properties as well, making programming easier.

  • Web controls automatically detect the capabilities of the client browser and customize their rendering to make best use of these capabilities. For example, the following Label control is rendered differently in version 3.0 of Navigator and Internet Explorer and version 4.0 and above of each browser.

    <asp:Label runat="server" Text="Label Control" Font-Italic="true" />

    Using IE 5.5, the Label control is rendered as the following HTML code.

    <span style="font-style:italic;">Label Control</span>

    Using Navigator 3.0, on the hand, gives you the following HTML code.

    <span><i>Label Control</i></span>

  • Any property of a Web control can be data-bound. In addition, there are several Web controls that can be used to render the contents of a data source. Some of the controls are indeed very rich. For instance, the Calendar Web control can be used to allow navigating between dates and make date selection, including date ranges. The following one line declaration results in the calendar control shown in Figure 2.

    <asp:Calendar runat=server /<

Screen shot.
Figure 2: The Calendar control

Both types of server controls can raise events that will be run during the event handling stage of the Page class. For instance, the HtmlInputButton control has the ServerClick event that is raised when the control is clicked on the browser. Another example is the ImageButton control that has the Click event. This event occurs when the control is clicked by the user.

Page Directives

In Web Forms, directives are optional settings that the author of a Web Forms page uses to instruct the page compiler to follow some compilation commands. Page directives can be located anywhere within an .aspx file. Each directive can contain one or more attribute/value pairs specific to that directive.

The following is the list of directives in Web Forms.

The @ Page Directive

The @ Page directive defines page-specific attributes used by the ASP.NET page parser and compiler. You can only have one @ Page directive for every .aspx file. It has 17 attributes and the most important ones are listed below.

  • Buffer -- Defines HTTP response buffering semantics. In general, buffering makes your code faster by holding the response until all processing is finished and sending the output in one go. This attribute is true by default.
  • ContentType -- Defines the HTTP content type of the response as a standard MIME type. Supports any valid HTTP content type string.
  • EnableSessionState -- Defines session state requirements for the page. True if session state is enabled; ReadOnly if session state can be read but not changed; otherwise false. The default is true.
  • ErrorPage -- Defines target URL for redirection if an un-handled page exception occurs.
  • Inherits -- Code-behind class for page to inherit. Can be any class derived from the Page Class.
  • Language -- Language used when compiling all <% %> and <%= %> blocks within the page. Can be Visual Basic, C#, or Jscript.NET.
  • MaintainState -- Indicates whether view state should be maintained across page requests. True if view state should be maintained; otherwise false. The default is true.
  • SRC -- Code-behind class to compile. (Source file name)
  • Trace -- Indicates whether tracing is enabled. True if trace is enabled; otherwise false. The default is false.
  • Transaction -- Indicates whether transactions are supported on the page. Possible values are: NotSupported, Supported, Required, and RequiresNew.
  • Warnings -- Indicates whether compiler warnings are treated as errors. True if warnings should be treated as errors; otherwise false. The default is false.

For example, the following is an @ Page directive that tells the compiler that the language used in the .aspx page is C#, and that the class should be compiled into a new class that inherits the MyCode class that can be found in the MyCode.cs file.

<%@ Page language="c#" Src="MyCode.cs" Inherits="MyCode" %>

The @ Control Directive

The @ Control directive defines user control-specific attributes used by the ASP.NET page parser and compiler. This directive can only be used with user controls.

The @ Import Directive

The @ Import directive explicitly imports a namespace into a page, making all classes and interfaces of the imported namespace available to the page. The imported namespace can be either part of the .NET Framework class library or a user-defined namespace. The @ Import directive cannot have more than one namespace attribute. To import multiple namespaces, you have to use multiple @ Import directives. Some most frequently used namespaces are imported automatically. These include System, System.Collections, System.IO, System.Web, System.Web.UI, System.Web.UI.HtmlControls and System.Web.UI.WebControls namespaces.

The @ Register Directive

The @ Register directive associates aliases with namespaces and class names for concise notation in custom server control syntax. For example, the following uses the @ Register directive to declare tagprefix and tagname aliases for a server control and a user control.

The first directive declares the MyTag alias as a tag prefix for all controls residing in the MyCompany:MyNameSpace namespace. The second directive declares Acme:AdRotator as a tagprefix:tagname pair for the user control in the file adrotator.ascx. The aliases are then used in custom server control syntax within the form to insert an instance of each server control.

<%@ Register Tagprefix="MyTag" Namespace="MyCompany:MyNameSpace" %>
<%@ Register Tagprefix="Acme" Tagname="AdRotator" Src="AdRotator.ascx" %>
<HTML>
...

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow