Working with Advance Controls in ASP.NET

MinalS's Avatar author of Working with Advance Controls in ASP.NET
ASP.NET Server controls can be rendered as markup text on a web browser and are capable of executing the program logic on the server..
ASP.NET Server controls are the building blocks used for designing to work with the web forms in an ASP.NET application. They can be rendered as markup text on a web browser. They are capable of executing the program logic on the server. They provide built – in methods and events. They eliminate the need for writing the events and methods manually. Each server control provides an object oriented programmable interface.

There are several controls used for the specific task depending on the user requirements. These controls are in the following categories as mentioned below:

Validation Controls



Validation is the process of checking something against the creation. There are several situations in which the validations are required. Consider an example where user fills the form for which the minimum age is 18 years. In such a situation, when the user submits the form, the age is validated against the criteria. If criteria are satisfied, the form is accepted. Such type of implementation on a website can be implemented by the ASP.NET validation controls.

ASP.NET provides the following validation controls that can be attached to the input controls to validate the values that are entered by the user.
  1. RequiredFieldValidator Control
  2. RegularExpressionValidator Control
  3. CompareValidator Control
  4. RangeValidator Control
  5. ValidationSummary Control
  6. CustomValidator Control
1. RequiredFieldValidator Control

The control is used to check whether a server control, added to the web form has a value or not. For example, you can use this validation control to check whether the user has entered any value in the password textbox.

The RequiredFieldValidator control inherits the BaseValidator’s properties and exposes those properties.
The list of properties of the control are:
  1. ControlToValidate: It specifies the ID of the control to be validated
  2. ErrorMessage: It specifies the error message to be displayed when the validation condition fails
  3. Text: It specifies the error message to be displayed
  4. InitialValue: It is used to describe the initial value of the ControlToValidate
The following code demonstrates the control in ASP.NET as follows:
Code:
<form id=”form1” runat=”server>
    <div>
        <asp:label id=”Label1” runat=”server” text=”Name”></asp:label>
        <asp:textbox id=”Text1” runat=”server”></asp:textbox>
        <asp:requiredfieldvalidator id=”RequiredFieldValidator1” runat=”server” errormessage=”The field cannot be null” backcolor=”Red” controltovalidate=”Text1” display=”Dynamic” enableclientscript=”false”></asp:requiredfieldvalidator>
        <br/>
        <asp:button id=”btn1” runat=”server” text=”Show”/>
    </div>
</form>
The output for the code is as shown below:



2. RegularExpressionValidator Control

The control is used to check whether the server control added to the web form matches with the specified regular expression or not. The regular expression can be the format of a telephone number or an email address.

The list of some properties of the control is as shown below:
  1. ValidationExpression: It specifies the regular expression, when the validation is performed
  2. ControlToValidate: The ID of the control to be validated is defined
  3. ErrorMessage: It specifies the error message to be displayed when the validation fails
The following code snippet demonstrates the control on a web form.
Code:
<form id=”form1” runat=”server”>
    <div>
        <asp:label id=”label1” runat=”server” text=”Email id”></asp:label>
        <asp:textbox id=”TextBox1” runat=”server”></asp:textbox>
        <asp:regularexpressionvalidator id=”RegularExpression1Validator1” runat=”server” errormessage=”Not a valid email address” controltovalidate=”TextBox1” validationexpression=’”^[\w-\.]{1,}@([\w-]+\.)+[\w-]{2,3}$”’ backcolor=”Aqua”>
        </asp:regularexpressionvalidator>
    </div>
</form>
The output for the code is as shown below:



3. CompareValidator Control

The control is used to compare the entered value with another value. The other value can be a number or a value entered into another control. The following list displays some of the properties of the control.
  1. ControlToCompare: It specifies the ID of the control that will be used to compare values.
  2. ControlToValidate: It specifies the ID of the control to be validated
  3. ErrorMessage: It specifies the error message to be displayed when the validation condition fails
  4. ValueToCompare: It specifies the ID of the control to be compared
The following code snippet is used to demonstrate the control.
Code:
<form>
    <div>
        <asp:label id=”Label2” runat=”server” text=”Total students”></asp:label>
        <asp:textbox id=”TextBox2” runat=”server”></asp:textbox>
        <br/>
        <br/>
        <asp:label id=”Label3” runat=”server” text=”Present students></asp:label>
        <asp:textbox id=”TextBox3” runat=”server”></asp:textbox>
        <asp:comparevalidator id=”CompareValidator1” runat=”server” controltocompare=”TextBox3” controltovalidate=”TextBox2” errormessage=”The value is not valid” operator=”GreaterThan” type=”Integer” backcolor=”Pink”>
        </asp:comparevalidator>
    </div>
</form>
The output for the code is as shown below:



4. RangeValidator Control

The control is used to check whether the value of a particular web form field is within the range specified by the control. The MinimumValue and MaximumValue properties are used for the validation. The properties can contain values as string, date, number, and currency amounts.

The list of properties of the control is as mentioned below:
  1. ControlToValidate: It specifies the ID of the control to be validated
  2. ErrorMessage: It specifies the error message to be displayed when the validation fails
  3. MinimumValue: It specifies the minimum value
  4. MaximumValue: It specifies the maximum value
The following code is used to demonstrate the control.
Code:
<form>
    <div>
        <asp:label id=”Label4” runat=”server” text=”Age”></asp:label>
        <asp:textbox=”TextBox4” runat=”server”></asp:textbox>
        <asp:rangevalidator=”RangeValidator1” runat=”server” controltovalidate=”TextBox4” backcolor=”Azure” minimumvalue=”10” maximumvalue=”16” errormessage=”The value is not in the specified range”></asp”rangevalidator>
        <br/>
    </div>
</form>
The output for the control is as shown below:



5. ValidationSummary Control

The control is used to summarize the errors and display the error list at a location specified by the user on the web page. The list of properties of the control is as shown below:
  1. HeadText: It gets or sets the text to be displayed at the top of the summary
  2. ShowMessageBox: It displays the error in a pop – up message box when the value of the property is true
  3. ShowSummary: It enables or disables the summary of error messages
The code snippet to demonstrate the control is shown below:
Code:
<form>
    <div>
        <asp:validationsummary id=”Validation1” runat=”server” displaymode=”BulletList” showsummary=”true”></asp:validationsummary>
        <br/>
        <asp:button id=”btn1” runat=”server” text=”Display”></asp:button>
    </div>
</form>
The output for the code is as shown below:



6. CustomValidator Control

The CustomValidator control is used to perform user defined validations that cannot be performed by standard validation controls. The list of properties of the control is as shown below:
  1. ControlToValidate: The ID of the control to be validated is displayed
  2. ErrorMessage: It specifies the error message to be displayed
  3. OnServerValidate: It defines the function to be validated
The following code snippet demonstrates the control.
Code:
<asp:label id=”label5” runat=”server” text=”Number”></asp:label>
<asp:textbox id=”TextBox5” runat=”server”></asp:textbox>
<asp:button id=”btn3” runat=”server” text=”Output”></asp:button>
<asp:customvalidator id=”custom1” runat=”server” onservervalidate=”validateNumber” errormessage=”Length is not valid” backcolor=”Yellow” enableclientscript=”false” display=”Dynamic”>
</asp:customvalidator>
The code behind file contains the following code.
Code:
protected void validateNumber(object sender, System.Web.UI.WebContorls.ServerValidateEventArgs e) {
    If(e.Value.Length==8)
    e.IsValid=true; else
    e.IsValid=false;
}
The output for the code is as shown below:



List Controls



The ListControl covers all the functions of list controls. It helps the user to display output in the form of lists. They include controls like CheckBoxList, DropDownList, ListBox, and RadioButonList.

The ListControl contains the properties as mentioned below:
  1. AutoPostBack: It specifies whether the form should be posted immediately after the index of the selected item is changed
  2. AppendDataBoundItems: It is a Boolean that specifies whether the list items are cleared before binding
  3. Items: It is a collection of list items in the list
  4. SelectedItem: The index number of the selected item in the list
  5. SelectedValue: It defines the value of the selected item in the list
  6. Text: It is the value of the item
  7. CausesValidation: It specifies whether the page is validated when the item is clicked

1. CheckBoxList: The checkboxlist control is used when user needs to add a series of checkboxes on a web page. It provides user with independent choices to select the data.

The following code is used to demonstrate the CheckBoxList control.
Code:
<form>
    <div>
        <asp”label id=”lbl1” runat=”server”>Subjects</asp:label>
        <asp:checkboxlist id=”CheckBoxList1” runat=”server”>
        <asp:listitem>Maths</asp:listitem>
        <asp:listitem>Science</asp:listitem>
        <asp:listitem>Java</asp:listitem>
        <asp:listitem>.NET</asp:listitem>
        <br/>
        <asp:button id=”Button1” runat=”server” text=”Show” onclick=”Button1_Click”/>
        <br/>
        <asp:label id=”lbl2” runat=”serve”></asp:label>
    </div>
</form>
The code behind file contains the following code.
Code:
protected void Button1_Click(object sender, EventArgs e) {
    foreach( ListItem li in CheckBoxList1.Items) {
        if ( li.Selected==true) {
            lbl2.Text=”The subject is” +li.Text;
        }
    }
}
The output for the code is as shown below:



2. Dropdown list: The control is the most common and widely used by the users in an application. The items can be added to the control using the ListItem tag. The text to be displayed is added between the opening and the closing tags.

The following code demonstrates the dropdown list control.
Code:
<asp:label id=”lbl3” runat=”server” text=”Order quantity”></asp:label>
<br/>
<asp:dropdownlist id=”DropDownList1” runat=”server”>
<asp:listitem>100</asp:listitem>
<asp:listitem>200</asp:listitem>
<asp:listitem>300</asp:listitem>
</asp:dropdownlist>
<br/>
<asp:button id=”Button2” runat=”server” text=”Show” onclick=”Button2_Click”/>
<br/>
<asp:label id=”lbl4” runat=”server”></asp:label>
The code behind for the control is as shown below:
Code:
protected void Button2_Click(object sender, EventArgs e)
{
    lbl4.Text=”The selected quantity is”+DropDownList1.SelectedItem.Value;
}
The output for the code is as shown below:



3. The ListBox Control: The control displays a set of number of items and provides the scroll bars to view the rest of the choices.

The following code snippet demonstrates the listbox control.
Code:
<form>
    <div>
        <asp:label id=”lbl5” runat=”server” text=”Users”></asp:label>
        <asp:listbox id=”list1” runat=”server”>
        <asp:listitem>John</asp:listitem>
        <asp:listitem>Linda</asp:listitem>
        <asp:listitem>Jerry</asp:listitem>
        <asp:listitem>Michael</asp:listitem>
        </asp:listbox>
        <br/>
        <asp:button id=”Button3” runat=”server” text=”Display” onclick=”Button3_Click”/>
        <br/>
        <asp:label id=”lbl6” runat=”serve”></asp:label>
    </div>
</form>
The code behind file contains the following code.
Code:
protected void Button3_Click(object sender, EventArgs e)
{
       foreach( ListItem li in list1.Items)
       {
              if ( li.Selected==true)
              {
                    lbl6.Text=”The selected user is” +li.Text;
               }
       }
}
The output for the code is as shown below:



4. The RadioButtonList Control: The control is a collection of radio buttons. After adding the list control, user needs to add the individual buttons.

The following code demonstrates the RadioButtonList control.
Code:
<asp:label id=”lbl7” runat=”server” text=”Country”></asp:label>
<asp:radiobuttonlist id=”Radiobuttonlist1” runat=”server”>
<asp:listitem>India</asp:listitem>
<asp:listitem>China</asp:listitem>
<asp:listitem>Japan</asp:listitem>
</asp:radiobuttonlist>
<asp:button id=”Button4” runat=”server” text=”Show” onclick=”Button4_Click”/>
<br/>
<asp:label id=”lbl8” runat=”serve”></asp:label>
The code behind file contains the following code.
Code:
protected void Button4_Click(object sender, EventArgs e)
{
    lbl8.Text=”The selected country is”+RadioButtonList1.SelectedItem.Value;
}
The output for the code is as shown below:



Rich Controls



ASP.NET technology provides task specific controls called as rich controls. They are built with multiple HTML elements and contain rich functionality. The examples of the rich control are AdRotator and Calendar control.

1. AdRotator Control: It displays a flashing banner advertisement on a web page. This control is capable of displaying advertisements randomly. Some of the properties of the control are as listed below:
  1. AdvertisementFile: It sets a path to an XML file that contains of a list of banner advertisements to display. The file contains multiple <Ad> elements, one for each advertisement to be displayed. Each <Ad> element contains <ImageUrl> element that specifies the URL of the image
  2. KeywordFilter: It specifies the filter criteria based on which the advertisements of specific categories will be displayed
  3. Target: It specifies the name of the Web browser window that will display the contents of the linked web page
The following code snippet demonstrates the AdRotator Control.
Code:
<form>
    <div>
        <asp:adrotator id=”AdRotator1” runat=”server” advertisementfile=”~/XMLFile.xml ”/>
    </div>
</form>
The XML file contains the following code.
Code:
<Advertisements>
    <Ad>
            <ImageUrl>Garden.jpg</ImageUrl>
            <NavigateUrl>http://www.google.com</NavigateUrl>
            <AlternateText>Active server web pages</AlternateText>
           <Keyword>Web</Keyword>
            <Impressions>50</Impressions>
     </Ad>
    <Ad>
            <ImageUrl>Waterfall.jpg</ImageUrl>
            <NavigateUrl>http://www.gmail.com</NavigateUrl>
            <AlternateText>Visit to the web page </AlternateText>
           <Keyword>Data</Keyword>
            <Impressions>40</Impressions>
     </Ad>
</Advertisements>
The output for the code is as shown below:





2. Calendar Control: The control is used to display the one month calendar. User can use this control to view day, week or month. It is one of the rich controls in ASP.NET. Some of the properties of the control are as mentioned below:
  1. DayNameFormat: It specifies the name format of the number of days
  2. VisibleDate: It specifies the month to be displayed in the control
  3. FirstDayOfWeek: It specifies the first day of the week to be displayed in the first column of the control
  4. SelectedDate: It represents the date selected in the control
  5. SelectionMode: It specifies whether a user can select a day, a week or a month.
The following code demonstrates the Calendar control.
Code:
<form>
    <div>
        <asp:calendar id=”cal1” runat=”server” backcolor=”#FF99FF” onselectionchanged=”Cal1_SelectionChnaged”></asp:calendar>
        <br/>
        <asp:label id=”lbl1” runat=”server”></asp:label>
    </div>
</form>
The code behind file for the control is as shown below:
Code:
protected void Page_Load ( object sender, EventArgs e)
{
    Cal1.SelectedDate=DateTime.Now;
}
protected void Cal1_SelectionChanged(object sender, EventArgs e)
{
    lbl1.Text=”Selected Date is”+Cal1.SelectedDate;
}
The output for the code is as shown below:



D. Navigation Controls



The ASP.NET site navigation control provides the consistent way to navigate a website. The structure of the website is stored in the central location. It contains the links to all the web pages on the website and is known as site map. The pages can be rendered in lists or navigation menus on each page by including controls such as TreeView, a SiteMapPath or a Menu.

1. TreeView Control: It is used to logically display the data in a hierarchical structure. We can use this control to display the files or folders on the web page. The SiteMapDataSource control must be added to the web page.

Some of properties of the control are as mentioned below:
  1. NodeIndent: It sets the number of pixels between each level of node in the control
  2. ImageSet: It allows you to use a predefined collection of node images for collapsed, expanded and nonexpendable nodes.
  3. ShowLines: It adds the lines that connect every node
  4. ExpandDepth: It specifies the number of levels that will be visible
The following code demonstrates the TreeView control.
Code:
<form>
    <div>
        <asp:treeview id=”TreeView1” runat=”server”>
        <nodes>
        <asp:treenode text=”Country” value=”Country">
        <asp:treenode text=”India” value=”India”/>
        <asp:treenode text=”UnitedKingdom” value=”UnitedKingdom”/>
        </asp:treenode>
        </nodes>
        <nodes>
        <asp:treenode text=”Capital” value=”Capital”>
        <asp:treenode text=”Delhi” value=”Delhi”/>
        <asp:treenode text=”London” value=”London”/>
        </asp:treenode>
        </nodes>
        </asp:treeview>
    </div>
</form>
The output for the code is as shown below:



2. SiteMapPath Control: The control is used displaying the navigation structure of the website. The navigation structure or the navigation path of the website displayed in the SiteMapPath control is known as breadcrumb. A breadcrumb shows the users current page location and displays a link as a hierarchical path back to the home page.

The properties of the SiteMapPath control are as shown below:
  1. ShowToolTips: It shows the description text when the user hovers the mouse pointer over the site map path
  2. ParentLevelsDisplayed: It sets the maximum number of levels above the page that is currently displayed on the Web browser
  3. PathDirection: It allows the user to set the direction of the path of navigation
  4. PathSeparator: It indicated the characters that will be placed between each level in the path
The following code demonstrates the SiteMapPath Control.
Code:
<form>
    <div>
        <asp:sitemappath id=”SiteMapPath1” runat=”server”>
        </asp:sitemappath>
        <br/>
        <asp:hyperlink id=”HyperLink1” runat=”server” navigateurl=”~/Default2.aspx”>Navigate to Page 2 </asp:hyperlink>
        <asp:hyperlink id=”HyperLink2” runat=”server” navigateurl=”~/Default3.aspx”>Navigate to Page 3</asp:hyperlink>
        <asp:hyperlink id=”HyperLink3” runat=”server” navigateurl=”~/Default4.aspx”>Navigate to Page 4</asp:hyperlink>
    </div>
</form>
The output for the code is as shown below:



3. Menu Control: The control displays the hierarchical data in the form of the menus and sub menus. It displays only the main menu on the web page. When the user hovers on the main menu, a drop down menu is displayed containing links to other.

Some of the properties of the Menu Control are as mentioned below:
  1. Static Display: It is used to control the static display behavior of the control
  2. Dynamic Display: It is used to specify the number of levels of dynamically appearing menu nodes
The following code demonstrated the Menu control.
Code:
<form>
    <div>
        <asp:menu id=”Menu1” runat=”server”>
        <items>
        <asp:menuitem text=”Edit” value=”Edit”>
        <asp:menuitem text=”Undo” value=”Undo”/>
        <asp:menuitem text=”Cut” value=”Cut”/>
        </asp:menuitem>
        <asp:menuitem text=”Build” value=”Build”>
        <asp:menuitem text=”BuildSolution” value=”BuildSolution”/>
        </asp:menuitem>
        </items>
        </asp:menu>
    </div>
</form>
The output for the code is as shown below: