Online courses in ASP.NET MVC, ASP.NET Core, and Design Patterns conducted by Bipin Joshi. Read more...
Learn ASP.NET MVC, ASP.NET Core, and Design Patterns through our online training programs. Courses conducted by Bipin Joshi on weekends. Read more details here.

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



Bipin Joshi is a software consultant, trainer, author and a yogi having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, AngularJS, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Ajapa Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 25 Dec 2000



Tags : ASP.NET Server Controls