ASP.NET

Rendering Controls as Tags

As we saw when looking at Web forms, developing a Web-based UI is all about getting the right tags out to the browser. For example, imagine you wanted to have your application's UI appear as shown in Figure 3-1 in the client's browser.

Figure 3-1 Some HTML tags rendered as controls in Internet Explorer.
Figure 3-1 Some HTML tags rendered as controls in Internet Explorer.

Getting this to appear on a client's browser means populating an HTML stream with the correct tags so the browser represents the screen using controls. Listing 3-1 shows some HTML that does the job. If you would like to run this page, the file is named "BunchOfControls.htm." You'll find it in the sample code for this tutorial. To run the page, take the file and save it in a virtual directory and browser to it.

Listing 3-1

<h2> Page in HTML </h2>
<form method="post" action="BunchOfControls.htm" id="Form1">
   <span>Type in me</span>
   <input name="textinfo" type="text" id="textinfo" />
   <BR>
   <select name="selectitems" id="ddl">
   <option value="Item 1">Item 1</option>
   <option value="Item 2">Item 2</option>
   <option value="Item 3">Item 3</option>
   <option value="Item 4">Item 4</option>

   </select>
   <BR>
   <input type="submit" name="pressme" value="Press Me!" id="pressme" />
</form>

Of course, using controls on a page usually implies dynamic content, so conjuring up this HTML should happen in a programmatic way. Classic ASP has facilities for rendering dynamic content. However, classic ASP generally relies on raw HTML for rendering its content. That means writing a page like the BunchOfControls.htm page shown above might look something like Listing 3-2 in classic ASP. Figure 3-2 shows how the ASP page renders in Internet Explorer.

Listing 3-2

<%@ Language="javascript" %>
<h2> Page in Classic ASP </h2>
<form>

   <span>Type in me</span>
   <input name="textinfo" type="text" id="textinfo" />
   <BR>
   <select name="selectitems" id="ddl">
   <option value="Item 1">Item 1</option>
   <option value="Item 2">Item 2</option>
   <option value="Item 3">Item 3</option>
   <option value="Item 4">Item 4</option>

</select>
   <BR>
   <input type="submit" name="pressme" value="Press Me!" id="pressme" />
<p>
    <% if (Request("textinfo") != "") { %>
        This was in the text box: <%=Request("textinfo") %> <br>
        And this was in the selection control: <%=Request("selectitems") %>
      <% } %>
</p>

</form>
Figure 3-2 The ASP page from Listing 3-2 appears like this in Internet Explorer.
Figure 3-2 The ASP page from Listing 3-2 appears like this in Internet Explorer.

When you select an item from the selection control, notice that the page responds by telling you what you selected. This demonstrates ASP's support for dynamic content.

Notice that even though classic ASP offers a way to decide your page's content at runtime, you still have to create much of it using raw HTML. Also, the state of the controls is always reset between posts (we'll look at that when we examine View State a bit later). ASP.NET adds a layer of indirection between the raw HTML and the rendered page-that layer of indirection is ASP.NET's server-side controls. Server-side controls eliminate much of the tedium necessary to develop a Web-based UI in classic ASP.

by BrainBellupdated
Advertisement: