Specialised Server Controls

Table, TableRow and TableCell controls

Table control used to create and manage tables.

Can be used to display static information.

Real power comes in ability to dynamically and rows and cells at runtime.

Rows added using TableRow control.

Cells added using TableCell control.

Like other dynamically created controls, rows and cells must be re-created when page posts back to server.

If need table to survive postback use Repeater, DataList or GridView controls.

Table contains Rows collection which contains TableRow controls.

TableRow control has Cells collection which contains TableCell controls.

All three controls inherit from WebControl class.

Adding rows and cells to Table Control

Visual Studio provides designer for adding rows and cells to Table control. Access via Table control's Row property in the Properties window.

Dynamic approach:

  1. From Toolbox drag Table control to page
  2. Add Load event to page
  3. Inside Load event write loop to create five new rows in table.
  4. Within loop add another loop to create three columns er row.
  5. Inside this loop modify TableCell.Text property to identify current row and column.

Image Control

Use when need to manipulate properties of the control in server-side code.

If only need to embed static image in page the use HTML <img> tag.

Inherits from WebControl class.

Represented by <asp:Image> element in source

ImageUrl property provides path to image that is downloaded by browser and displayed in page.

Other properties include:

  • AlternateText - text to display when image not available.
  • ImageAlign - specify alignment (e.g. Right, AbsMiddle, Top, etc.) in relation to other objects on page,
  • DescriptionUrl - accessibility feature to provide further explanation of image content when non-visual page reader are used
  • GenerateEmptyAlternateText - when true will add alt="" attribute to image. Indicates to non-visual page readers that image does not contribute meaning to page (e.g. it's a page-divider) and so can be ignored.

ImageButton Control

Derived from Image control.

Image control does not have Click event.

When Click event necessary use ImageButton or ImageMap.

Treats image like clickable button.

Can obtain x / y coordinates of click - know where on image was clicked.

Performs postback to web server when image clicked.

Represented by <asp:ImageButton> element in Source view.

Has Click and Command event that function in same way as Button control.

Second argument of click event has type of ImageClickEventArgs and provides access to x / y coordinates.

ImageMap Control

Displays clickable image that posts information back to server about where image clicked.

Differes from ImageButton in that can define regions that cause a postback, whereas clicking anywhere on ImageButton causes postback.

Causes <img usemap="#myMap"> and <map name="myMap"> with nested <area> elements to be added to HTML.

Inherits directly from Image control.

In source view represented as <asp:ImageMap> element wiith nested CircleHotSpot, RectangleHotPot and PolygonHotSpot elements.

Has Click event that functions like same event on ImageButton. Its second argument is of type ImageMapEventArgs which allows access to PostBackValue of associated hot spot the user clicked.

HotSpot Classes

Can define many overlapping hotspots.

First hostspot defines takes precedence over last.

Common properties:

Property Description
AccessKey Keyboard shortcut key
AlternatTest Tetx displayed by hotspot when image unavailable
HotSpotMode Behaviour when clicked
NavigateUrl URL to navigate to when hotspot clicked
PostBackValue   String to pass pack to server when HotSpot clicked
TabIndex Tab index number for HotSpot
Target Target window or frame that display webpage that is linked to HotSpot

 

Can specify HoSpotMode on either HotSpot or ImageMap control. If specified on both then HotSpot setting take precedence. Thus can specify default behaviour on ImageMap and override for specific HotSpots.

Calendar Control

Displays calendar on webpage.

Represented as <asp:Calendar> element in source view.

When rendered control generates HTML <table> elements and set of associated javascript files.

Can be used to select single or multiple dates via SelectionMode:

  • Day - select single date
  • DayWeek - select single date or entire week
  • DayWeekMonth - select single date, entire week or whole month
  • None - no selection allowed

Exposes events to work with.

Primary event is SelectionChanged which causes postback when a date is selected.

VisibleMonthChanged which causes postback when month changed.

Principally used as date picker, but can be used to display scheduled items and other special days (e.g. holidays). Add these extra Labels to the Cell objects Controls collection in the DayRender event handler (which is called when each day is rendered).

FileUpload Control

Allow user to select and upload file to server.

Displayed as text box and browse button.

Can either type path name into text box, or use browse button to navigate to file.

Represented as <asp:UploadFile> element in Source view.

Generate HTML <input type="file"> during rendering.

Does not cause postback, user needs to do this using another control such as a Button.

Postback causes file to be uploaded as posted data.

At server, page code doesnot run until file uploaded into server memory.

File contents available via:

  • FileBytes - file exposed as byte array
  • FileContent - file exposed as a stream
  • PostedFile - file exposed as HttpPostedFile which includes properties like ContentType and ContentLength

Examine any file passed up to determine if should be saved.

When ready can use SaveAs method on FileUpload or HttpPostedFile object.

Can save in any location that you have permission to create files in. Can get absolute path by using the MapPath method of HttpServerUtility class and passing ~ which represents the application root folder.

Max size of file that can be uploaded depends on MaxRequestLength attribute of httpRuntime configuration element in web.config

Panel Control

Acts as control container.

Useful when grouping control to act as single unit, e.g. for creating features such as tabs or show / hide toggles.

Presented as <asp:Panel> in source view.

In HTML rendered as <div> element.

Properties to be aware of:

  • BackImageUrl - display background image in Panel
  • HorizontalAlignment - horizontal alignment of controls in Panel
  • Wrap - specifies if items in Panel automatically continue on next line, if line longer than Panel
  • DefaultButton - specifies which Button is clicked when Panel has focus and user presses Enter.

MultiView and View Controls

These are also container controls.

MultiView exists to contain other Views.

A View must be contained within a MultiView.

MultiView used to create wizards where each View represents a different step.

Do not generate any direct HTML elements - they are server side controls used to control visibility of child controls.

In Source view represented as <asp:MultiView> and <asp:View>

Use ActiveViewIndex and SetActiveView method to change the View programatically.

If ActiveViewIndex set to -1 no Views are controlled.

Only one View can be active at a time.

Wizard Control

Used to display a series of WizardStep controls.

Builds on MultiView and View controls.

Ensures only one WizardStep control is visible as a time.

Used to prompt users for large amounts of data by breaking into logical chunks.

Steps can be validated either at end of process or between each step.

Contains header area that can be customised to display information specific to that step.

Contains sidebar to aid navigation between steps.

Can programatically control which step is displayed - not restricted to navigating in linear fashion.

Build in navigation capabilities determine which buttons displayed based on StepType value:

WizardStepType.Auto - renders navigation based on location of step within WizardSteps collection

WizardStepType.Complete - last step to appear, no navigation buttons rendered

WizardStepType.Finish - final data collection step, Finish and Previous buttons rendered

WizardStepType.Start - first step to appear, only Next button rendered

WizardStepType.Step - step between Start and Finish steps, Previous and Next buttons rendered

Xml Control

Displays contents of XML document.

Uesful if data stores in XML and want to execute XSL transformation.

XML document to display set either via DocumentSource (specifies location of XML file) or DocumentContent (the actual XML content) property.

TransformationSource property contains location of XSL to apply to XML.

Transform property accepts Transform object that can be used to eprform the transformation as well.

TransformArgumentList used to pass arguments to XSL.

Download