Specialised Server Controls in ASP.NET
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:
- From Toolbox drag Table control to page
- Add Load event to page
- Inside Load event write loop to create five new rows in table.
- Within loop add another loop to create three columns er row.
- 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.
Differs 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 with 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 hotspot defines takes precedence over last.
Common properties:
| Property | Description |
|---|---|
| AccessKey | Keyboard shortcut key |
| AlternateText | Text 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 does not 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.
Useful 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 perform the transformation as well.
TransformArgumentList used to pass arguments to XSL.