Fundamental of ASP.NET controls with examples

Label:

It is the simplest of all controls and is required for almost all applications you develop. It will show what you should enter inside the text box or what to pick from the drop down box.

<asp:Label ID="Label1" runat="server" Text="Label" Width="110px"></asp:Label>

For Example:

<asp:Label ID="Label1" runat="server" Text="User Name" Width="110px"> </asp:Label></div>

The attribute id denotes the name for a specific control. This is of not much importance for the Label control but it is required for other controls such as Buttons, DropDownList as you will make use of the relevant controls during the coding phase.

TextBox:

This control is mainly used to accept text from the end user. You have the option to set three different modes such as:

• SingleLine
• MultiLine
• Password

Let us examine each of these modes with sample code.

SingleLine mode

<asp:TextBox id="TextBox1" runat="server">This is TextBox</asp:TextBox>

MultiLine mode

<asp:TextBox id="TextBox1" runat="server" TextMode="MultiLine">This is the multiline textbox</asp:TextBox>

Password mode

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

CheckBox:

This control is used to select one or more options by putting a checkmark near the word.

<asp:CheckBox ID="CheckBox1" runat="server"text="dotnet"Checked=true/> <br><br><br>

<asp:CheckBox ID="CheckBox2" runat="server"text="jave"Checked=false/> <br><br><br>

<asp:CheckBox ID="CheckBox3" runat="server"text="sqlserver" Checked=true/> 

If you set checked property to True as shown in the above code then that checkbox will be automatically selected when you run the ASP.NET page.

RadioButton:

This control is used to select only one choice from a list of various entries.

<asp:RadioButton id="RadioButton1" runat="server" Text="USA" GroupName="Countries"></asp:RadioButton>

<asp:RadioButton id="RadioButton2" runat="server" Text="UK" GroupName="Countries"></asp:RadioButton>

You should note that GroupName property is important for the proper functioning of RadioButton control. If you fail to set this property then you will be able to select both the options.

DropDownList:

DropDownList is one of the popular controls used in each ASP.NET application. Users can pick an option by clicking on the drop down arrow.

<asp:DropDownList id="DropDownList1" runat="server">
<asp:listitem id= "lstaspdotnet" runat= "server">ASP.NET</asp:listitem>
<asp:listitem id= "lstvbnet" runat= "server">Visual Basic .NET</asp:listitem>
<asp:listitem id= "lstjava" runat= "server">Java</asp:listitem>
<asp:listitem id= "lstperl" runat= "server">PERL</asp:listitem>
</asp:DropDownList>

In the above code, we have given the various options inside the <asp:listitem></asp:listitem> tag. You can add any number of this tag for each item that you wish to include inside the DropDownList. You should note that users can pick only one option using this control.

ListBox:

ListBox is an extension to the above mentioned WebForm control. With the help of this control, you can select one or more options by holding the Control key.

<asp:ListBox id="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Value="ASP.NET">ASP.NET</asp:ListItem>
<asp:ListItem Value="Visual Basic .NET">Visual Basic.NET</asp:ListItem>
<asp:ListItem Value="Java">Java</asp:ListItem>
<asp:ListItem Value="PERL">PERL</asp:ListItem>
</asp:ListBox>

You should set the value of SelectionMode property to Multiple as shown in the code given above. By default, its value is Single and you can select only one option.

CheckBoxList:

CheckBoxList is a group of CheckBoxes arrange in a ListBox. It is a very similar to that of the ListBox control.

<asp:CheckBoxList id="CheckBoxList1" runat="server">
<asp:ListItem Value="ASP.NET">ASP.NET</asp:ListItem>
<asp:ListItem Value="Visual Basic .NET">Visual Basic .NET</asp:ListItem>
<asp:ListItem Value="Java">Java</asp:ListItem>
<asp:ListItem Value="PERL">PERL</asp:ListItem>
</asp:CheckBoxList>

Link Button:

This control is similar to that of Button control but it displays the text as a hyperlink.

<asp:LinkButton id="LinkButton1" onclick="LinkButton1_Click" runat="server">Click here</asp:LinkButton>

In the code above, there is an event handler called onclick. When a user clicks the link button control, necessary action will take place depending upon the code you have given by double clicking the control.

Table:

You can create tables using the Table control. This control uses the TableRow and TableCell controls available within the .NET Framework.

<asp:Table id="Table1" runat="server" GridLines="Both">

<asp:TableRow>
<asp:TableCell Text="Sl No"></asp:TableCell>
<asp:TableCell Text="Name"></asp:TableCell>
</asp:TableRow>

<asp:TableRow>
<asp:TableCell Text="1"></asp:TableCell>
<asp:TableCell Text="Rob"></asp:TableCell>
</asp:TableRow>

<asp:TableRow>
<asp:TableCell Text="2"></asp:TableCell>
<asp:TableCell Text="Mark"></asp:TableCell>
</asp:TableRow>

</asp:Table>

The above code may look complicated but you will find it easier to use it after a little practice. The GridLines property takes four different values such as None, Horizontal, Vertical and Both. The value both denotes a combination of Horizontal and Vertical lines.

Calendar:

With the help of the Calendar control, you can navigate through months and dates and select them. The selected entry can then be displayed on a Label control as shown in the code given below.

<asp:Calendar ID="Calendar1" runat="server" BackColor="#FF80FF" BorderColor="Blue"

BorderStyle="Outset"   VisibleDate="2007-04-30"> </asp:Calendar>

Calendar control comes with lot of properties which you can use to display the control in various formats.

The .NET Framework 2.0 ships with lot of WebForm controls which can be used for various purposes. We will discuss about some of them in the next part of this series.

GridView:

This is one of the most popular controls used by majority of developers for database operations. You can edit, delete records using GridView.

<asp:GridView ID="GridView1" runat="server"></asp:GridView>

           

Figure 2: GridView

DetailsView:

This control is used to display one record from a database at a time. You can also insert records using DetailsView.

<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px">

</asp:DetailsView>

Figure 3: Detailsview

FormView:

With GridView, you can display all the records from a database. But with the help of FormView control, you can show only one record at a time but you have the ability to insert new records.

The main difference between DetailsView and FormView controls is that FormView has more options. You can have control over how to display data, modify headers and footers and much more.