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
Able to detect browser capabilities and render appropriate HTML.
Adding controls using source view
- Open web page in Visual Studio
- Click source tab
- In source view type web server control and its attributes, e.g.
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.
|AccessKey||Keyboard shortcut key|
|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:
<pages controlRenderingCompatibilityVersion="3.5 />
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.
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:
- Add label control and user input control to form
- Set Label.AccessKey property to provide keyboard short cut.
- Set Label.TextProperty and underline key used for short cut, e.g
- 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.
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
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.
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 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.
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.
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.
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
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.