ASP.

Net Server Controls and Events

IT 4203 Advanced Web Development

Jack G. Zheng Fall 2010

Overview

What are ASP.Net server controls? How do they work? What are the basic ASP.Net server control events? How do we use them?

Server Controls

ASP.NET provides a server-side object-oriented and event programming model for the web through server controls Server controls are objects placed in the ASP.Net pages that are processed by ASP.Net runtime

Each controls has properties, methods, and events Developers design pages through manipulating these objects and their properties, methods, and events

Server controls are a higher level abstraction that hide lower level routine development work (such as generating HTML code).

Its more powerful, but more complicated.

3

Features of Server Controls

Object-oriented programming style Desktop application user interface development style for Web pages

Output is automatically generated, and customized based on the capabilities of the browser Ability to react to events
Automatic state management
4

Server Control Types

HTML server controls

They are HTML elements that include a runat=server attribute. They map one to one with their corresponding HTML tags (with the same attributes), plus automatic state management and server-side events. Normal HTML elements are treated as text and cannot be referenced in server-side code. The runat="server" attribute turns them into server controls that can be referenced on the server side.

Web server controls

Web server controls have a standardized set of properties and events. They are not directly mapped to HTML elements on a oneto-one basis.
5

HTML Server Control Example

In the .aspx page:

HTML server controls are have the same HTML output. They map one to one with their corresponding HTML tags (with the same attributes).

<input id="Value1" type="Text" value="100" size=10" maxlength="4" runat="server"/>

In the code-behind page:

This HTML element becomes a server control.

protected void Page_Load(object sender, EventArgs e) The HTML element's id attribute is used {
Response.Write(this.Value1.Value); this.Value1.Value = "1000"; }
this refers to the page itself.

to programmatically reference the control.

This gets the value of the textbox (100).

This changes the value of the textbox to 1000.

HTML server control reference

http://msdn.microsoft.com/en-us/library/620b4fzf(v=VS.90).aspx
6

Web Server Control Example

In the .aspx page:

A web server control always has runat=server attribute.

<asp:Label id=TitleLabel" runat="server" Text=hello" />

A web server control tag usually tarts with asp:

The text attribute is the content of the label.

In the code-behind page:

protected void Page_Load(object sender, EventArgs e) {

The id attribute value is used to programmatically reference the control.

Response.Write(this.TitleLabel.Text); TitleLabel.Text = "hello"; TitleLabel.BackColor = System.Drawing.Color.LightGreen; }

We can manipulate the object by assigning values to its attributes. ASP.Net will generate corresponding HTML or CSS style code.
7

Web Server Control Category

Basic web controls

Basic Web controls provide the similar functionality as HTML server control, with additional methods, events, and properties.

Validation controls

Validation controls are used to validate the values that are entered into other controls of the page. Validation controls perform client-side validation, server-side validation, or both, depending on the capabilities of the browser.

List controls

List controls are special Web server controls that support binding to collections.

Rich controls

Rich controls are built with multiple HTML elements and contain rich functionality. Such as login, calendar, sitemap, etc.

Web server control complete reference

http://msdn.microsoft.com/en-us/library/zfzfkea6(v=VS.90).aspx
8

Common Basic Web Server Controls

Form
<form id="form1" runat="server"></form>

Label
<asp:Label id="Label1" runat="server" Text="hello" />

Textbox
<asp:TextBox id="TextBox1" runat="server" Text="hello" />

Button
<asp:Button id="Button1" runat="server" Text="Go" />

Checkbox
<asp:CheckBox id="CheckBox1" runat="server" />
9

Basic List Web Server Controls

Checkbox list
<asp:CheckBoxList ID="CheckBoxList1" runat="server"> <asp:ListItem Text="" Value=""></asp:ListItem> </asp:CheckBoxList>

Radio button list

<asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem Text="" Value=""></asp:ListItem> </asp:RadioButtonList>

Dropdown list
<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Text="" Value="" /> </asp:DropDownList>

List box
<asp:ListBox ID=ListBox1" runat="server"> <asp:ListItem Text="" Value="" /></ asp:ListBox >
10

Server Control Event Model

Server controls have events and event handling system to manipulate their properties, status, and behaviors.

Events are actions or behaviors defined to happen under a certain condition

Basic event types

Life cycle events: each control has several stages from initiation to release. Interaction events: usually raised by user actions, such as button click, selection or value change, etc.
11

Event Handling

Event handlers (methods) are the defined actions when an event is raised. Normally event handlers need to be registered (bound) to events
override protected void OnInit(EventArgs e) { base.OnInit(e); this.Load += new System.EventHandler(this.LoadHandler); } Binding and event handler to the event. protected void LoadHandler(object sender, System.EventArgs e) {}
12

AutoEventWireUp

ASP.Net provides an automatic way to bind a default event handler to an event, using the attribute AutoEventWireUp In the .aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="" Inherits="..." %>

Event handler
protected void Page_Load(object sender, EventArgs e) { The default event handler needs to be in a predefined naming format. }

For more information

http://msdn.microsoft.com/enus/library/system.web.configuration.pagessection.autoeventwireup(v=VS.90).aspx
13

ASP.Net Page Life Cycle

Load is the default event of a Page object. We often write code in the Page_Load() method to set control properties or perform other processing. Note that control event handlers (such as button clicked) are executed after loading
14

Page_Load() Method

Page_Load() is the default event handling method (auto wired) when a ASP.Net page has loaded. In the .aspx page
<h2>Now: <asp:Label ID="CurrectTime" runat="server" Text="" /></h2>

In code-behind page, or <script runat=server> code block

protected void Page_Load(object sender, EventArgs e) { this.CurrectTime.Text = DateTime.Now.ToString(); } Dynamically set the value to the current time in
Page_Load(), every time when the page loads, post-back or not.
15

Basic Web Control Interaction Events and Default Event Handler

Button click
protected void Button1_Click(object sender, EventArgs e)

Textbox text changed

Naming format: Control ID + _ + default event

protected void TextBox1_TextChanged(object sender, EventArgs e)

Checkbox, radio button

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)

Dropdown list, checkbox list, radio button listp

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

16

Post Back

Post back refers to a request when a web form posts data to itself, caused by user interactions with controls, such as button clicks.

In a post back, control interaction event handlers are called.

Initial request
Page life cycle event handlers are executed.
1. Page life cycle event handlers are executed. 2. The control event handler is executed.

A URL is requested (HTTP Get). The webpage is displayed.

A user interacts with page and fire up an interaction event.

First response

Post back, fired by user actions

The webpage is displayed.

Second response
More post back cycles

A .aspx web form

17

Post Back Processing

isPostBack

Use the isPostBack property to determine if the page is requested the first time, or caused by a post back.
Change the text only when the page is posted back.

if (IsPostBack == true) this.CurrectTime.Text = DateTime.Now.ToString();

Auto post back

By default, only clicking a button or hitting the enter key in a textbox will cause post back. Set the AutoPostBack property to True to allow more controls to cause post back when the default event is fired

Textbox: text is changed and textbox losses focus. Checkbox or radio button: check status is changed. Dropdown list, checkbox list, radio button list: selected item is changed.

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" />

18

View State

View state is a mechanism used by ASP.NET to store server controls status between page post-backs.

The view state information is stored as an HTML hidden variable in forms and sent in the pages response back to the user. When the user makes the next request, the view state is returned with his or her request. When the page processes, ASP.NET pulls the view state from the page and uses it to reset property values of the page and its controls.

View state example

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEWAwKOqqrhDwKTjKGwCgKM54rGBpzsu/JHJTw+hNa4kX7r9bgC nesr" />
19

Validation Controls

The ASP.NET data validation framework includes a built-in set of validation controls that can be attached to user input controls to handle validation on both the server and the client. Client side (default option)

JavaScript will be generated automatically to perform validation on the browser side. No addition post back to the server side.

Server side

ASP.NET calls the Validate method automatically after the pages Load event handler method executes.
20

Validation Controls

ValidationSummary: centrally displays all validation errors CompareValidator: check how the current input compares with the target value RequiredFieldValidator: check if an input is missing RangeValidator: check if the current input falls in a range RegularExpressionValidator: check if the input is correctly formatted CustomValidator: user defined validation rules
21

Common Attributes of Validators

ControlToValidate

Set the validation target by control id

Text

The error message displayed where the validation controls is placed, usually next to the control being validated

ErrorMessage

The error message displayed in a ValidationSummary control

SetFocusOnError

Automatically focus on the control which raises the error

Display: how Text is displayed?

None: does not display the Textmessage, but sends ErrorMessage to ValidationSummary. Static: displays the Text message; takes space on the Web page even when there is no validation error (a blank space). Dynamic: displays the Text message; takes up no space if no validation error.

ToolTip

A popup message when the cursor is on the control

22

Form Processing Usability Practices

Auto focus: moving the cursor to the right place so users can start typing or selecting without an additional click.

Set the DefaultFocus attribute of the form to a control id Call the Focus method of a control to programmatically set the focus.

Default button: fires up the click event of a specific button when the Enter key is pressed

Set the DefaultButton attribute of the form to a button id

Immediate validation

Set the CauseValidation attribute of a control to True: the control input will be validated once it losses focus.
23

Summary

Key Concepts

Server control: HTML server control, web server control Event: server control life cycle event, interaction event Event handler Post back View state Validation (client side vs. server side)

Key skills

Use basic HTML or web server controls to get user input and generate output. Correctly use post-back and server control events to process form data and respond to user actions. Use various types of validation controls to validate user inputs.

24

Key Resources

ASP.NET Web Server Controls Overview

http://msdn.microsoft.com/en-us/library/zsyt68f1(v=VS.90).aspx

Web Server Control Reference

http://msdn.microsoft.com/en-us/library/zfzfkea6(v=VS.90).aspx

ASP.NET Page Life Cycle Overview

http://msdn.microsoft.com/enus/library/ms178472(v=VS.100).aspx

ASP.Net validation controls

http://msdn.microsoft.com/en-us/library/debza5t0(v=VS.90).aspx

25