Resources

Common Server Controls in ASP.NET

Web Server Controls

Provide more functionality and consistent programming model than HTML server controls.

Typically inherit from WebControl class.

Unlike HTML controls, they are not part of HTML standard.

Renders output at standardised HTML, e. g. image control output <img> tags.

Able to provide more functionality than HTML control as not tied to single HTML tag element. Instead they typically render many HTML elements and also include JavaScript code.

Able to detect browser capabilities and render appropriate HTML.

Adding controls using source view

  1. Open web page in Visual Studio
  2. Click source tab
  3. In source view type web server control and its attributes, e.g. <asp:TextBox... />

Must be located within HTML form element and have runat="server" attribute defined.

Web Server Control Properties

Must contain unique (at page level) ID attribute.

Property Description
AccessKey Keyboard shortcut key
BackColor Background colour
BorderColor Border colour
BorderWidth Border width in pixels
BorderStyle Style of border, such as Dotted, Dashed, Ridge, etc.
CssStyle CSS class to assign to control
Style List of CSS properties that are applied to control
Enabled When false control is dimmed and inactive, but no invisible
EnableTheming When true enables themes for control
EnableViewState   When true enables view state persistence for control
Font Font to use
ForeColor Foreground colour of control
Height Control height not fully supported for all control in browsers earlier than IE4
SkinID Skin to apply to control
TabIndex Control position in tab order
ToolTip Text that appears when user points to control
Width Width of control, possible units including Pixel, Point, Pica, etc. Default: pixel

 

Should define appearance attributes (border, width, font, etc.) in style sheet rather than on individual controls.

Can set properties in source view, in design view or programmatically.

Upgrading from earlier versions

ASP.NET 4 has many improvements to HTML rendering. Existing apps should be upgraded to ASP.NET 4.

If experience problem with rendering of version 4 control, can revert to ASP.NET 3.5 by defining controlRenderingCompatibilityVersion property on <pages> element in web.config:

<system.web>
  <pages controlRenderingCompatibilityVersion="3.5 />
</system.web>

Can check whether control is rendered with ASP.NET 3.5 or 4 engine via the Control.RenderingCompatibility property. Most web server control derive from Control, so this read-only property should be available.

Some control (FormView, Logn, PasswordRecovery, ChangePassword) require you to turn on CSS based rendering. By default ASP.NET renders these controls within a <table> - considered bad practice by some. To use CSS to format output set the RenderOuterTable property to false.

Label Control

Display text at specific location using properties assigned to control.

Use when want to change text, or another of its properties.

Do not use to simply display static text as it requires server side processing and increases amount of data sent between client and server. Instead define using standard HTML.

Frequently used as captions for user input controls. Consequently can link keyboard short cuts assigned to label to input controls.

To associate label with control:

  1. Add label control and user input control to form
  2. Set Label.AccessKey property to provide keyboard short cut.
  3. Set Label.TextProperty and underline key used for short cut, e.g <u>U</u>sername
  4. Set Label.AssociatedControlID to ID of input control so that input is focussed to it when keyboard short cut pressed.

Can set label text property via Text property, or between the opening and closing elements:

<asp:Label ID="UserNameLabel" runat="server">Username</label>

Can also set the Text property from code.

Literal Control

Use when want to add raw HTML to page without requiring additional processing from ASP.NET.

Does not inherit from WebControl.

Does not add any additional HTML elements to webpage, e.g Label is rendered as <span> tag.

Mode property used to specify how Text property is handled:

  • PassThrough - Text is rendered as is.
  • Encode - Text content is HTML encoded, use if might display user input
  • Transform - Text converted to match markup language of requesting browser, such as HTML, XHTML, WML, cHTML.

Text Box Control

Collects information from user.

Text property gets or sets contents of TextBox control.

Like label can set Text property as attribute, between opening and closing tag or via code.

TextMode can be set to:

  • SingleLine - default, allows one line of text to be entered
  • MultiLine - allows for multiple lines of text to be entered. Used in conjunction with Columns and Rows properties to provide large text box for user entry.
  • Password - single line text box that masks values entered by user

Columns property sets width of text box.

Rows property sets maximum height of multiline text box.

MaxLength property limits number of characters that can be entered by user.

Wrap property (when true) continues text on next line when TextBox width is reached, instead of scrolling text to left.

TextChanged event raised when user changes piece of text. Does not automatically trigger postback (which would probably be annoying to users). Instead include button to initiate postback, and handle TextBox.TextChanged event when need to run code after user has updated specific fields.

CheckBox Control

Text property specifies caption.

TextAlign specifies on which side of check box the caption appears.

Checked property used to set and get status of CheckBox control.

CheckedChanged event raised when state of control changes, but by default does not trigger postback.

To create groups of check boxes consider using the CheckBoxList control. CheckBox provides more granular control, but CheckBoxList easy to bind with data.

RadioButton Control

RadioButton offers multiple choice from list of mutually exclusive buttons.

To group RadioButtons into group specify the same GroupName for each RadioButton.

Set Checked to true for one of the RadioButton controls (acts as default).

Instead of adding multiple RadioButton controls, can add RadioButtonList and then add list items for the desired choices.

Text property specifies the caption to use.

Can determine (or set) which control selected via the Checked property.

CheckedChanged event raised when user clicks radio button, by default does not automatically postback to the server.

DropDownList Control

Requires user to select one of multiple choices. Unlike RadioButton control which displays all options on screen at same time the user needs to click the DropDownList to view different options.

Hiding non-default options good for long lists of options, e.g. users country.

Visual Studio designer prompts you to manually add items to list.

Choose default option by setting its Selected property to true.

Can populate list by calling DropDownList.Items.Add and providing string or instance of ListItem.

SelectedIndexChanged event raised when user selects different option. Can also look at DropDownList.SelectedValue property during postback.

ListBox Control

Allows user to select zero, or more from multiple choices.

Provide scrollbar for displaying more option than would otherwise fit in specified space.

By default only allow one item to be selected, change ListBox.SelectionMode to Multiple to allow for multiple selections.

To select multiple values requires user to hold down ctrl button whilst selecting. Many users not aware of this, so recommend using CheckBox list when user must select multiple values or a DropDownList for a single choice.

Button Control

Displays a button that user can click to trigger postback.

Can be rendered as submit button (default) or command button.

Can use Button.Click event to run code when user clicks button.

If have several buttons on page use Command event to specify single handler and use the CommandName to differentiate between the buttons.

Submit button simply performs postback to server.

Command button is a button that has value assigned to CommandName and is processed via the Command event.

CommandArgument property can provide additional information about the command to perform.

CausesValidation property (when true) causes page to be validated when button clicked.

Rendered as ordinary button.

If want power of button, but rendered as hyperlink or image then use LinkButton control.

HTML Server Controls

Allow you to define HTML inside ASP.NET page, but work with control on server via .NET object model.

Each HTML control defined inside page using standard HTML tag syntax.

By default these are not linked to any server controls. Can access tag values through Page.Request.Form collection.

By applying attribute runat="server" to the HTML tags ASP.NET will parse the HTML tag into a related server-side object. Makes programming far easier. ASP.NET will maintain view state information for these controls.

In most cases user more powerful server side controls.

Consider using in following cases:

  • Migration from classic ASP to ASP.NET
  • When control needs to have custom client-side JavaScript attached to its events
  • When page has a lot of client-side JavaScript referencing the control.

Must define ID attribute for every control that has runat="server" applied to it.

Must be located within form element that has runat="server" attribute to properly function.

Downloads