webdeveloper.earthweb.com/webjs/article.php/982451

Back to Article

Web Forms: The Web Forms Programming Model
By Jeff Prosise
February 27, 2002

HTML Controls

Most Web forms are built from Web controls, but ASP.NET supports a second type of server control called HTML controls. HTML controls are instances of classes defined in the FCL's System.Web.UI.HtmlControls namespace. They're declared by adding RunAt="server" (or, if you'd prefer, runat="server"; capitalization doesn't matter in HTML) attributes to ordinary HTML tags. For example, the statement

<input type="text" />

declares a standard HTML text input field. However, the statement

<input type="text" runat="server" />

declares an HTML control-specifically, an instance of System.Web.UI.HtmlControls.HtmlInputText. At run time, ASP.NET sees the runat="server" attribute and creates an HtmlInputText object. The HtmlInputText object, in turn, emits an <input type="text"> tag that's ultimately returned to the browser.

Without realizing it, you used an HTML control in Calc.aspx. The line

<form runat="server">

caused an instance of System.Web.UI.HtmlControls.HtmlForm to be created on the server. HtmlForm returned the <form> tag that you saw when you viewed the page's HTML source code with the View/Source command:

<form name="_ctrl0" method="post" action="calc.aspx" id="_ctrl0">

HtmlInputText and HtmlForm are but two of many controls defined in the System.Web.UI.HtmlControls namespace. The following table lists all the HTML controls that the FCL supports and the tags that produce them.

HTML Controls

Tag

Corresponding HTML Control

<a runat="server">

HtmlAnchor

<button runat="server">

HtmlButton

<form runat="server">

HtmlForm

<img runat="server">

HtmlImage

<input type="button" runat="server">

HtmlInputButton

<input type="reset" runat="server">

HtmlInputButton

<input type="submit" runat="server">

HtmlInputButton

<input type="checkbox" runat="server">

HtmlInputCheckBox

<input type="file" runat="server">

HtmlInputFile

<input type="hidden" runat="server">

HtmlInputHidden

<input type="image" runat="server">

HtmlInputImage

<input type="radio" runat="server">

HtmlInputRadioButton

<input type="password" runat="server">

HtmlInputText

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

HtmlInputText

<select runat="server">

HtmlSelect

<table runat="server">

HtmlTable

<td runat="server">

HtmlTableCell

<th runat="server">

HtmlTableCell

<tr runat="server">

HtmlTableRow

<textarea runat="server">

HtmlTextArea

Any other tag with runat="server"

HtmlGenericControl

It's important to know which HtmlControls class corresponds to a given HTML tag because only by knowing the class name can you consult the documentation to determine which properties you can use with that tag and which events the resulting control fires. For example, here's the HTML controls version of Calc.aspx:

<html>
  <body>
    <form runat="server">
      <input type="text" id="op1" runat="server" />
      +
      <input type="text" id="op2" runat="server" />
      <input type="submit" value="  =  " OnServerClick="OnAdd"
        runat="server" />
      <span id="Sum" runat="server" />
    </form>
  </body>
</html>

<script language="C#" runat="server">
  void OnAdd (Object sender, EventArgs e)
  {
      int a = Convert.ToInt32 (op1.Value);
      int b = Convert.ToInt32 (op2.Value);
      Sum.InnerText = (a + b).ToString ();
  }
</script>

Besides the different way in which the form's controls are declared, the HTML controls version of this Web form differs from the Web controls version in three important respects:

  • The attribute that wires the button control to the event handler is named OnServerClick rather than OnClick. Why? Because an <input type="button" runat="server" /> tag translates into an instance of HtmlInputButton, and HtmlInputButton controls, unlike Button controls, don't fire Click events. They fire ServerClick events.

  • OnAdd reads input from the text boxes using the property name Value rather than Text. HtmlInputText controls don't have Text properties as Labels and TextBoxes do; instead, they expose their contents using Value properties.

  • OnAdd writes its output by initializing Sum's InnerText property instead of its Text property. The <span runat="server"> tag creates an instance of HtmlGenericControl. HtmlGenericControl doesn't have a Text property, but it does have an InnerText property.

Once you know which class ASP.NET instantiates as a result of applying a runat="server" tag to an otherwise ordinary HTML tag, you can figure out from the documentation what the tag's programmatic interface looks like.

Why does ASP.NET support HTML controls when Web controls do everything HTML controls do and then some? HTML controls simplify the task of turning existing HTML forms into Web forms. It takes a while to convert a couple of hundred <input> tags and <select> tags and other HTML tags into Web controls. It doesn't take long to add runat="server" to each of them.

  Go to page: Prev  1  2  3  4  5  Next  

*JavaScript is a registered trademark of Sun Microsystems, Inc.



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers