ASP. NET Web server Controls

Session 9

Objectives

• Overview of web server controls • The Label Server Control• The Textbox Server Control• The Button Server Control• The Link Button Server Control• The Image Butt on Server Control• The Hyperlink Server Control• The Dropdown List Server Control continue…

• The List Box Server Control• The Checkbox Server Control• The Radio Button Server Control• The Radio Button List Server Control • The Calendar Server Control• Panel Server Control• Basic knowledge about server controls• Form designing using server controls• Applications of server controls

Overview

• There are two types of server controls, HTML server controls and Web server controls, the latter is considered the more powerful and flexible. HTML server controls enable you to manipulate HTML elements from your server - side code.

• Web server controls are powerful because they are not explicitly tied to specific HTML elements; rather, they are more closely aligned to the specific functionality that you want to generate.

Label server control

• The Label server control is used to display text in the browser.

• Because this is a server control, you can dynamically alter the text from your server-side code.

Example<form id="form1" runat="server"> <p><asp:Label ID="Label1" runat="server"

AccessKey="N">User<u>n</u>ame</asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></p>

<p><asp:Label ID="Label2" runat="server"

AccessKey="P"><u>P</u>assword</asp:Label>

<asp:TextBox ID="TextBox2" Runat="server"></asp:TextBox></p>

<p><asp:Button ID="Button1"

runat="server" Text="Submit" /></p> </form>

Textbox Server Control

• One of the main features of Web pages is to offer forms that end users can use to submit their information for collection.

• The Textbox server control is one of the most used controls in this space.

• the control provides a text box on the form that enables the end user to input text.

Textbox Server Control

• First, the Textbox control can be used as a standard HTML text box, as shown in the following code snippet:

<asp:TextBox ID="TextBox1" runat="server" Text=”Hello World”></asp:TextBox>

• Second, the Textbox control can allow end users to input their passwords into a form. This is done by changing the TextMode attribute of the Textbox control to Password, as

illustrated here:

<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>

Button Server Control

Another common control for your Web forms is a button that can be constructed using the Button server control. Buttons are the usual element used to submit forms. Most of the time you are simply dealing with items contained in your forms through the Button control’s OnClick event.

Example:

<asp:Button ID="Button1" runat="server" Text="Button"OnClick="Button1_Click" onclientclick="AlertHello()" />

LinkButton Server Control

The Link Button server control is a variation of the Button control. It is the same except that the Link Button control takes the form of a hyperlink. Nevertheless, it is not a typical hyperlink. When the end user clicks the link, it behaves like a button. This is an ideal control to use if you have a large number of buttons on your Web form.

Example:<asp:LinkButton ID="LinkButton1" Runat="server“

OnClick="LinkButton1_Click">Submit your name to our database </asp:LinkButton>

The ImageButt on Server Control

The Image Button control is also a variation of the Button control. It is almost exactly the same as the Button control except that it enables you to use a custom image as the form’s button instead of the typical buttons used on most forms. This means that you can create your own buttons as images and the end users can click the images to submit form data.

Example: <asp:ImageButton ID="ImageButton1" runat="server"

ImageUrl="~/002.GIF" />

The HyperLink Server Control

The Hyperlink server control enables you to programmatically work with any hyperlinks on your Web pages. Hyperlinks are links that allow end users to transfer from one page to another. You can set the text of a hyperlink using the control’s Text attribute:

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/SecondPage.aspx">Go to this page here</asp:HyperLink>

The DropDownList Server Control

The select box generated by the DropDownList control displays a single item and allows the end user to make a selection from a larger list of items. Depending on the number of choices available in the select box, the end user may have to scroll through a list of items. Note that the appearance of the scroll bar in the drop-down list is automatically created by the browser depending on the browser version and the number of items contained in the list.

Example:<asp:DropDownList ID="DropDownList1" runat="server">

<asp:ListItem>Car</asp:ListItem>

<asp:ListItem>Airplane</asp:ListItem>

<asp:ListItem>Train</asp:ListItem>

</asp:DropDownList>

ListBox Server Control

The ListBox server control has a function similar to the DropDownList control. It displays a collection of items. The ListBox control behaves differently from the DropDownList control in that it displays more of the collection to the end user, and it enables the end user to make multiple selections from the collection — something that is not possible with the DropDownList control.

Example:<asp:ListBox ID="ListBox1" runat="server"

SelectionMode="Multiple">

<asp:ListItem>India</asp:ListItem>

<asp:ListItem>Pakistan</asp:ListItem>

<asp:ListItem>Sri Lanka</asp:ListItem>

<asp:ListItem>Bangaladesh</asp:ListItem>

</asp:ListBox>

Checkbox Server Control

Check boxes on a Web form enable your users to either make selections from a collection of items or specify a value of an item to be yes/no, on/off, or true/false. Use either the CheckBox control or the CheckBoxList control to include check boxes in your Web forms.

The CheckBox control allows you to place single check boxes on a form; the CheckBoxList control allows you to place collections of check boxes on the form. You can use multiple CheckBox controls on your ASP. NET pages, but then you are treating each check box as its own element with its own associated events. On the other hand, the CheckBoxList control allows you to take multiple check boxes and create specific events for the entire group.

Example:

<asp:CheckBox ID="CheckBox1" runat="server" Text="ASP.NET!“OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="True" />

RadioButtonList Server Control

The RadioButtonList server control lets you display a collection of radio buttons on a Web page. The RadioButtonList control is quite similar to the CheckBoxList and other list controls in that it allows you to iterate through to see what the user selected, to make counts, or to perform other actions.

Example:

<asp:RadioButtonList ID="RadioButtonList1" runat="server">

<asp:ListItem Selected="True">English</asp:ListItem>

<asp:ListItem>Russian</asp:ListItem>

<asp:ListItem>Italian</asp:ListItem>

<asp:ListItem>Swedish</asp:ListItem>

</asp:RadioButtonList>

Summery

• Asp.Net web server controls • Several controls feature & property.