Introduction to ASP+ web controls
Introduction
This Q.A. series provides you with reference as well as examples of using ASP+ web
controls. At the end of the series you will find a ZIP file for download which contains
sample ASP+ pages. This Q.A mainly focuses on non-data bound controls. The examples are
that way very basic but that do illustrate common use of the control under consideration.
The NGWS SDK documentation is the ultimate source of information on how to use ASP+. This
Q.A. just provides most common features but its handy as it contains everything in one
page!
To run these samples you will need Windows2000 server with NGWS SDK installed. You will
also need IIS 5.0 and IE 5.5.
If you explore ASP+ further on your own and have something interesting to share please
contact me at bipinjoshi@yahoo.com
What are web controls ?
Web controls are basically HTML elements wrapped under easy to use scripting tags of
ASP+ and provide rich functionality in your FORMs or pages. Web controls range from simple
text box to advance girds and lists. Some of the controls like data grid can be bound to
data sources much like Visual Basic data bound controls.
What are advantages of web controls ?
- They are highly customizable and provide common
properties and methods throughout.
- Even though web controls provide rich functionality
finally they are rendered as plain HTML in the client browser thus avoiding
browser compatibility problems.
- They can be used in object oriented manner much like
Visual Basic controls.
- They are processed at server side. This makes ASP+
page much readable and cleaner as compared to traditional ASP page.
- They can be data bound
- State maintenance is automatically taken care by ASP+
What are common web controls available?
Following is a list of common web controls :
- Label
- Panel
- Button
- TextBox
- CheckBox
- RadioButton
- RadioButtonList
- ListBox
- DropDownList
- Table/TableRow/TableCell
- DataGrid
- DataList
- Repeater
- Calender
- Validation controls
How do I handle Web control events?
Web control are processed at server side. This means that all the events generated by a
control will be handled at server end. The event handling has changed with ASP+. Each
event handler now has following syntax :
public sub myeventhandler(source as Object, evt as EventArgs)
'access your web controls here and
'manipulate their properties
end sub
Here, source is the object which caused the event to be raised and evt is an object
providing more information about the event.
Note : I could not found clearly how to use these parameters from NGWS preview SDK.
Also, it is not clear how to pass my own parameters to the event handlers.
What precautions are needed while coding for web controls ?
- All controls must have id attribute set
- All controls must be set to process at server side
- All controls must be enclosed within HTML FORM
element
- The form must be set to process server side
- All controls must have proper start and end tags i.e. <control></control> or <control />
- If you want to maintain control state you must use POST method
How do I use Label web control ?
Lable web control is generally used to display labels for other FORM elements. The
general syntax is :
<asp:Label id="label1" Text="my label text" />
| Property |
Description |
| Text |
Used t set the caption of the label |
How do I use Button web control ?
Button web control is used to represent an action like Ok, Submit, Cancel etc.
Syntax :
<asp:Button id="button1" Text="My button caption"
OnClick="myevthandler" />
| Properties |
Description |
| Command |
Command is used to identify the action to be performed
when this button is clicked. Can be any user defined string. Analogous to tag property in
VB. |
| CommandArgument |
CommandArgument is used to provide additional information
about the action. |
| Event |
Description |
| OnClick |
Fired when user clicks the button. The form is posted to the server. Used
to perform action depending on the button clicked |
How do I use Panel web control?
It is a wrapper for HTML <DIV> tag.
Syntax :
<asp:Panel id="Panel1" runat="server"
BackImageUrl="url"
HorizontalAlign="Center|Justify|Left|NotSet|Right"
Wrap="True|False"
/>
Or
<asp:Panel id="Panel1" runat="server" >
------ other controls go here -----------
</asp:Panel>
| Property |
Description |
| BackImageUrl |
The URL of an image to display behind the control. |
| HorizontalAlign |
The alignment of the panel with respect to surrounding text. |
| Wrap |
True if content should be wrapped within the panel; false
otherwise. |
How do I use TextBox web control?
Text box web control is used to accept user input in your web forms.
Syntax :
<asp:TextBox id=value runat="SERVER" Text="text"
TextMode="Single | Multiline | Password" />
| Property |
Description |
| AutoPostBack |
True if client-side changes in the control automatically cause a
postback to the server; false otherwise. The default is false. |
| Columns |
The width of the control in characters. |
| MaxLength |
The maximum number of characters allowed within text box. |
| Rows |
Number of rows within the text box. |
| Text |
The text that the user has entered into the box. |
| TextMode |
Possible values are Single, MultiLine, and Password. |
| Wrap |
Indicates whether text should wrap around as users type text into a
multiline control. |
| Event |
Description |
| OnTextChanged |
Raised on the server when the contents of the text box change. This event
does not cause the Web Forms page to be posted to the server unless the AutoPostBack
property is set to true. |
How do I use CheckBox web control?
Check box is used to indicate on or off state.
Syntax :
<asp:CheckBox id="CheckBox1" runat="server"
Text="label" OnCheckedChanged="OnCheckedChangedMethod"
/>
| Property |
Description |
| AutoPostBack |
True if client-side changes in the check box automatically cause a
postback to the server; false otherwise. The default is false. |
| Checked |
True if the check box is checked, false otherwise. The
default is false. |
| TextAlign |
The position of the caption. Possible values are Right and Left
The default is Right. |
| Text |
The check box caption. |
| Event |
Description |
| OnCheckedChanged |
Raised when the user clicks the checkbox. This event does not cause the
Web Forms page to be posted to the server unless the AutoPostBack property is set
to true. |
How do I use RadioButton web control?
Syntax :
<asp:RadioButton id="RadioButton1" runat="server"
Text="label"
OnCheckedChanged="OnCheckedChangedMethod"
/>
| Property |
Description |
| AutoPostBack |
true if client-side changes in the control automatically cause a
postback to the server; false otherwise. The default is false. |
| Checked |
true if the radio button is checked, false otherwise. The
default is false. |
| GroupName |
The name of a group to which the radio button belongs. Radio buttons with
the same group name are mutually exclusive. |
| TextAlign |
The position of the caption. Possible values are Right and Left.
The default is Right. |
| Text |
The radio button caption. |
| Event |
Description |
| OnCheckedChanged |
Raised when the user clicks the radio button. This event does not cause
the Web Forms page to be posted to the server unless the AutoPostBack property is
set to true. |
How do I use ListBox or DropDownList web controls?
ListBox presents a list of item from which user can select one or many items.
<asp:ListBox id="Listbox1" runat="server"
OnSelectedIndexChanged="OnSelectedIndexChangedMethod"
/>
<asp:Listitem value="value" selected="True|False">
Text
</asp:Listitem>
</SP:ListBox>
Or
<asp:DropDownList id="Combo1" runat="server"
OnSelectedIndexChanged="OnSelectedIndexChangedMethod"
/>
<asp:Listitem value="value" selected="True|False">
Text
</asp:Listitem>
</asp:DropDownList>
| Properties |
Description |
| AutoPostBack |
True if client-side changes in the control
automatically cause a postback to the server; false otherwise. The default is false. |
| DataTextField |
The field or property of the object in DataSource that
will be the source of data for the Text property of individual list items. |
| DataValueField |
The field or property of the object in DataSource that
will be the source of data for the Value property of individual list items. |
| DataSource |
A source from which list items are fetched |
| Items |
A collection of ListItem objects representing
individual items within the drop-down list. |
| SelectedIndex |
The ordinal index of the currently selected item in the
drop-down list. |
| SelectedItem |
A reference to the Value property of the
currently-selected item in the list. |
| SelectedItems |
The collection of ListItem objects currently selected.
If SelectionMode is set to Single, this collection contains the same item as
SelectedItem. |
| Rows |
The number of rows to display. |
| SelectionMode |
Single if the user can select only one item; Multiple
if the user can hold down SHIFT or CTRL while clicking to select multiple items. |
| ListItem Properties |
Description |
| Selected |
true if the item is the one selected in the drop-down
list and that appears in the text box; false otherwise. Only one item can be
declared as selected. |
| Text |
The text that appears in the list. |
| Value |
The value of the item selected by the user, which can be
different from the text displayed in the list. |
| Event |
Description |
| OnSelectedIndexChanged |
Raised on the server when the selection of the ListBox
control changes. This event does not cause the Web Forms page to be posted to the server
unless the AutoPostBack property is set to true. |
How do I use Table web controls?
Table web controls represent HTML table. You can manipulate rows and columns
programmatically.
<asp:Table id="Table1" runat="server" />
<asp:TableRow>
<asp:TableCell>
Cell text
</asp:TableCell>
</asp:TableRow>
</asp:Table>
| Properties of Table |
Description |
| BackImageUrl |
The URL of an image to display. |
| CellPadding |
The amount of space, in pixels, between the contents of a cell and the
cell's border. |
| CellSpacing |
The amount of space, in pixels, between cells. |
| GridLines |
None, Columns, Rows, Both. Whether grid lines are displayed in the table. The
default is None. |
| HorizontalAlign |
Center, Justify, Left, NotSet, Right. The alignment of the table with respect
to surrounding text. |
| Rows |
Collection of TableRow objects representing individual rows in the
table. |
| Properties of TableRow |
Description |
| Cells |
Collection of TableCellCollection objects representing individual
cells within the row. |
| HorizontalAlign |
The default horizontal alignment of the cells in the table row. |
| VerticalAlign |
The default vertical alignment of the cells in the table row. |
| Properties of TableCell |
Description |
| ColumnSpan |
The number of columns that this is cell should occupy horizontally. |
| HorizontalAlign |
The horizontal alignment of the contents of the cell. |
| RowSpan |
The number of rows that this is cell should occupy vertically. |
| VerticalAlign |
The vertical alignment of the contents of the cell. |
| Wrap |
Indicates whether text should wrap within the cell |