Asp.net - Web Controls

Windows Systems Programming: Spring 2004

[ Home | Syllabus | Course Notes | Assignments | Search]

Web Controls

To deal with the large number of web control we will divide into the following categories.

“Simple” controls, so called because (in general) they wrap simple HTML control tags
Button controls, which create various types of buttons in Web forms
List controls, which display simple lists of items
Data-bound controls, which use data binding to display information obtained from databases and other data sources
Calendar controls, whose sole member, Calendar, adds interactive calendars to Web forms
Validation controls, which validate user input before and after forms are submitted to the server

Simple Controls

Labels are the simplest control
TextBox

Properties

Text: value of text in the box
TextMode="Password" hides the character typed in)
TextMode="MultiLine" allows more than one line of input
Rows: sets the number of rows in a multiline textbox

Examples

// Before
<asp:TextBox ID="UserName" RunAt="server" />
<asp:TextBox ID="Password" TextMode="Password" RunAt="server" />
<asp:TextBox ID="Comments" TextMode="MultiLine" Rows="10"
  RunAt="server" />

// After
<input name="UserName" type="text" id="UserName" />
<input name="Password" type="password" id="Password" />
<textarea name="Comments" rows="10" id="Comments"></textarea>

Events

OnTextChanged: handler for TextChanged event
NOTE: this event does not get triggered at the server until form is "posted back" to the server UNLESS you set the AutoPostBack property to "true"

Since normally only the submit button will cause a post back, here is how this happens on the client (using Jscript on the client and DHTML)
Example

<asp:TextBox ID="UserName" AutoPostBack="true" RunAt="server" />

and the control outputs this:

<input name="UserName" type="text" id="UserName"
  onchange="__doPostBack('UserName','')" language="javascript" />
    .
    .
    .
<script language="javascript"> 
<!--
  function __doPostBack(eventTarget, eventArgument) {
      var theform = document.ctl0;
        .
        .
        .
      theform.submit();
  }
// -->
</script>

F1: This is running on the browser client
F2: Document is the object name of the "HTML" page on the browser
F3: the submit method will post the form back and would trigger the "TextChanged" event on the server

HyperLink Control

Adds a hyperlink to a web page (which can be changed under program control)

<asp:HyperLink Text="Click here"
  NavigateUrl="http://www.wintellect.com" RunAt="server" />

<asp:HyperLink ImageUrl="logo.jpg"
  NavigateUrl="http://www.wintellect.com" RunAt="server" />

<asp:HyperLink ID="MyLink" Text="Web page du jour" RunAt="server" />
  .
  .
  .
<script language="C#" runat="server">
  void Page_Load (Object sender, EventArgs e)
  {
      MyLink.NavigateUrl = "www.wintellect.com";
  }
</script>

Checkbox

<asp:CheckBox ID="Confirm" Text="E-mail my confirmation"
  RunAt="server" />

if (Confirm.Checked) {
    // The box is checked
}
else {
    // The box is not checked
}

-----------------

<asp:CheckBox ID="Confirm" Text="E-mail my confirmation"
  AutoPostBack="true" OnCheckedChanged="DoItNow" RunAt="server" />
    .
    .
    .
<script language="C#" runat="server">
  void DoItNow (Object sender, EventArgs e)
  {
      // The check box was just checked or unchecked; do something!
  }
</script>

Now can change the form after box is checked (add new controls relevant to checked box)
IN general use web form controls instead of straight HTML if you need to dynamically change the properties.

RadioButton

asp:RadioButton Text="Red" ID="Button1" Checked="true" GroupName="Colors" RunAt="server" /> 
<asp:RadioButton Text="Green" ID="Button2" GroupName="Colors" RunAt="server" /> 
<asp:RadioButton Text="Blue" ID="Button3" GroupName="Colors" RunAt="server" /> 
<asp:RadioButton Text="Circle" ID="Button4" Checked="true" GroupName="Shape" RunAt="server" /> 
<asp:RadioButton Text="Square" ID="Button5" GroupName="Shape" RunAt="server" />

The above defines two separate "groups" of radiobuttons
Need to check each Control's "checked" property
A better way is to use RadioButtonList (later)

Table Controls

Table controls add HTML tables to Web forms. They render a combination of <table>, <tr>, and <td> tags to browsers. Here’s one way to add a table to a Web form:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

And here’s the equivalent table created with a Table control:

<asp:Table ID="MyTable" RunAt="server">
  <asp:TableRow>
    <asp:TableCell>Row 1, Column 1</asp:TableCell>
    <asp:TableCell>Row 1, Column 2</asp:TableCell>
  </asp:TableRow>
  <asp:TableRow>
    <asp:TableCell>Row 2, Column 1</asp:TableCell>
    <asp:TableCell>Row 2, Column 2</asp:TableCell>
  </asp:TableRow>
</asp:Table>

Table controls add value to a Web form when you want to change a table’s contents dynamically. For example, the following server-side script modifies the text in each of the table cells:

MyTable.Rows[0].Cells[0].Text = "Cell 1";
MyTable.Rows[0].Cells[1].Text = "Cell 2";
MyTable.Rows[1].Cells[0].Text = "Cell 3";
MyTable.Rows[1].Cells[1].Text = "Cell 4";

This script builds the entire table at run time:

<asp:Table ID="MyTable" RunAt="server" />
  .
  .
  .
<script language="C#" runat="server">
  void Page_Load (Object sender, EventArgs e)
  {
      for (int i=0; i<2; i++) {
          TableRow row = new TableRow ();
          for (int j=0; j<2; j++) {
              TableCell cell = new TableCell ();
              cell.Text = String.Format ("Row {0}, Column {1}",
                  i + 1, j + 1);
              row.Cells.Add (cell);
          }
          MyTable.Rows.Add (row);
      }
  }
</script>