Asp.net menu control display menus both statically and dynamically for asp.net pages. It makes navigation easy for asp.net pages.

The content of the Asp.net Menu control can configure directly in the control or using database data source.

Syntax of asp.net menu control

<asp:Menu runat=”server” ></asp:Menu>

Properties of Asp.net Menu Control

Orientation: menu control should be render horizontal or vertical direction

Ex: Orientation=”Horizontal”

StaticMenu: The style of the static part of the menu

<StaticMenuStyle BackColor=”#993300″ BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”2px” />

StaticMenuItemStyle: style of the menu items that are in the static part of the menu control. It changes font-color,font-family,padding etc… of the menu control items.

<StaticMenuItemStyle BackColor=”#FFFF99″ Font-Names=”Verdana” Font-Size=”9pt” HorizontalPadding=”2px” ItemSpacing=”4px” VerticalPadding=”2px” />

StaticHoverStyle: The style that changes when mouse hovers over the part of the menu items.

<StaticHoverStyle BackColor=”#FF9933″ Font-Names=”Verdana” Font-Size=”9pt” ForeColor=”White” />

DynamicMenuItemStyle: The style of the menu items that are in the dynamic part of menu sub items

For SubItems style changing use DynamicMenuItemStyle property in menu control

<DynamicMenuItemStyle BackColor=”#E8EFFF” ForeColor=”#663300″ />

DynamicHoverStyle: The style that changes when mouse hovers over the part of the dynamic menu items.

<DynamicHoverStyle BackColor=”#FF9

Font-Names=”Tw Cen MT Condensed Extra Bold” ForeColor=”White” />

Adding Menu Items to asp.net Menu Control

DesignView: Drag asp.net Menu control from toolbox – select menu control then click (< ) menu task – Edit Emnu items – Menu Item editor displays – In menu item editor contain two type of icons

Add a root Item

Add a Child Item

Click add a root item – then new icon with selected – go to properties change Text(Asp.net) and add navigateUrl

To add child Items to Asp.net root item – select Asp.net in menu control tasks – then click Add a child Item – then add CSharp and VB.Net

<Items>

<asp:MenuItem Text=”Asp.net” Value=”Asp.net”>

<asp:MenuItem Text=”CSharp” Value=”CSharp”></asp:MenuItem>

<asp:MenuItem Text=”VB.Net” Value=”VB.Net”></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text=”Java” Value=”Java”>

<asp:MenuItem Text=”JDK” Value=”JDK”></asp:MenuItem>

<asp:MenuItem Text=”J2EE” Value=”J2EE”></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text=”Database” Value=”Database”>

<asp:MenuItem Text=”Oracle” Value=”Oracle”></asp:MenuItem>

<asp:MenuItem Text=”SqlServer” Value=”SqlServer”></asp:MenuItem>

</asp:MenuItem>

</Items>

Comlete source code with styles and menuitems of asp.net menu control

<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal”>

<StaticMenuStyle BackColor=”#993300″ BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”2px” />

<StaticMenuItemStyle BackColor=”#FFFF99″ Font-Names=”Verdana” Font-Size=”9pt” HorizontalPadding=”2px” ItemSpacing=”4px” VerticalPadding=”2px” />

<DynamicHoverStyle BackColor=”#FF9933″

Font-Names=”Tw Cen MT Condensed Extra Bold” ForeColor=”White” />

<DynamicMenuItemStyle BackColor=”#E8EFFF” ForeColor=”#663300″ />

<StaticHoverStyle BackColor=”#FF9933″ Font-Names=”Verdana” Font-Size=”9pt” ForeColor=”White” />

<Items>

<asp:MenuItem Text=”Asp.net” Value=”Asp.net”>

<asp:MenuItem Text=”CSharp” Value=”CSharp”></asp:MenuItem>

<asp:MenuItem Text=”VB.Net” Value=”VB.Net”></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text=”Java” Value=”Java”>

<asp:MenuItem Text=”JDK” Value=”JDK”></asp:MenuItem>

<asp:MenuItem Text=”J2EE” Value=”J2EE”></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text=”Database” Value=”Database”>

<asp:MenuItem Text=”Oracle” Value=”Oracle”></asp:MenuItem>

<asp:MenuItem Text=”SqlServer” Value=”SqlServer”></asp:MenuItem>

</asp:MenuItem>

</Items>

</asp:Menu>

A Validation server control is used to perform validation on client and server data of an input control. If the input control of the data does not pass validation, it will display an error message to the user.

Main Properties of validation controls

ControlToValidate: ID of the Input control to Validate

Text: It displays the text for the Validator when the Validated control invalid.

ErrorMessage: used to display message in a validation Summary when the validated control is invalid

RequiredFieldValidator Control

RequiredFieldValidator: it not allows users to input control as an Empty

Syntex:

<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server”

ErrorMessage=”RequiredFieldValidator”></asp:RequiredFieldValidator>

Example: Drag Textbox Control, Button and RequiredFieldValidator from Toolbox

Textbox control ID =txtFirstName

RequiredField Validator Properties

Text=”Enter FirstName”

ControlToValidate = txtFirstName

ErrorMessage = Enter FirstName (for validation Summary control message)

ValidationGroup (for validation Summary Control to display Message)

Sample Source code

<asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server” ControlToValidate=”txtFirstName”

ErrorMessage=”Enter FirstName” >

</asp:RequiredFieldValidator>

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

RangeValidator Control

It checks user input values that falls between two specified values

Properties of RangeValidator control

MaximumValue : It checks Maximum value of the control to be validated

MinimumValue : It checks Minimum value of the control to be validated

ControlToValidate

ErrorMessage

Text

ValidationGroup (for validation Summary Control to display Message)

Example Source code

<div>

Age&nbsp;

<asp:TextBox ID=”txtAge” runat=”server”></asp:TextBox>

<asp:RangeValidator ID=”RangeValidator1″ runat=”server”

ControlToValidate=”txtAge”

ErrorMessage=”Enter Age between 18 and 35″

MaximumValue=”35″

MinimumValue=”18″>Enter age</asp:RangeValidator>

<br />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

</div>

User should enter age value between 18 and 35 in textbox. IF not it shows an error “Enter age between 18 and 35”

RegularExpressionValidator control

It checks the value of an input control matches a specified pattern

Example: Checking Email Format

Properties of Regular Expression Validator

Validation Expression: It contain Regular Expression Editor, editor contain different patterns in regular expression like

Internet e-mail address

U.S. Pin code etc…

ControlToValidate

ErrorMessage

Text

ValidationGroup (for validation Summary Control to display Message)

Example source code for validation Email Address

<div>

Email&nbsp;&nbsp;

<asp:TextBox ID=”txtEmail” runat=”server”></asp:TextBox>

<asp:RegularExpressionValidator ID=”RegularExpressionValidator1″ runat=”server” ControlToValidate=”txtEmail”

ErrorMessage=”Check Email Format”

ValidationExpression=”\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*”>

Check Email Format</asp:RegularExpressionValidator>

<br />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

</div>

CompareValidator control

It compare the value of one input control to the value of another input control. The values of both the controls must be same. If not it raises an Error

Properties of Compare Validator

ControlToCompare: one control will compare ID of the other control

ControlToValidate

ErrorMessage

Text

ValidationGroup (for validation Summary Control to display Message)

Example source code for compare Password

Password&nbsp;

<asp:TextBox ID=”txtPassword” runat=”server”></asp:TextBox>

<br />

Confirm Pwd

<asp:TextBox ID=”txtConfirmPwd” runat=”server”></asp:TextBox>

<asp:CompareValidator ID=”CompareValidator1″

runat=”server” ControlToCompare=”txtPassword” ControlToValidate=”txtConfirmPwd”

ErrorMessage=”Password not matched”>

</asp:CompareValidator>

<br />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

ValidationSummary control

To display a summary report of all the validation errors in a page or within a validation group

Main Properties of ValidationSummary

ShowSummary: Whether to display summary text on the page.

ShowMessageBox: to display a message box on errors in up-level browsers

ValidationGroup: It group all the Invalid control errors to display in Message Box

Remember: All the controls validationGroup property name must be same to take affect of validationSummary MessageBox.

Note: keep RequiredFieldValidator to every control with other validation controls

TxtAge contain RangeValidator and RequiredFieldValidator2

TxtEmail contain RequiredFieldValidator and RequiredFieldValidator3

txtConfirmPwd contain CompareValidator and RequiredFieldValidator5

Example code for ValidationControls with Validation Summary MessageBox

<form id=”form1″ runat=”server”>

<div>

FirstName

<asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox>  <asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server” ControlToValidate=”txtFirstName”  ErrorMessage=”Enter FirstName” ValidationGroup=”register” >*</asp:RequiredFieldValidator>

<br />

Age&nbsp;

<asp:TextBox ID=”txtAge” runat=”server”></asp:TextBox>

<asp:RangeValidator ID=”RangeValidator1″ runat=”server”

ControlToValidate=”txtAge” ErrorMessage=”Enter Age between 18 and 35″

MaximumValue=”35″ MinimumValue=”18″ ValidationGroup=”register”> *</asp:RangeValidator>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator2″ runat=”server”

ControlToValidate=”txtAge” ErrorMessage=”Enter age” ValidationGroup=”register”>*</asp:RequiredFieldValidator>

<br />

Email&nbsp;&nbsp;

<asp:TextBox ID=”txtEmail” runat=”server”></asp:TextBox>

<asp:RegularExpressionValidator ID=”RegularExpressionValidator1″ runat=”server”

ControlToValidate=”txtEmail” ErrorMessage=”Check Email Format”

ValidationExpression=”\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*”

ValidationGroup=”register”>

*</asp:RegularExpressionValidator>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator3″ runat=”server”

ControlToValidate=”txtEmail” ErrorMessage=”Enter EmailID”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

<br />

Password&nbsp;

<asp:TextBox ID=”txtPassword” runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator4″ runat=”server”

ControlToValidate=”txtPassword” ErrorMessage=”Enter Password”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

<br />

Confirm Pwd

<asp:TextBox ID=”txtConfirmPwd” runat=”server”></asp:TextBox>

<asp:CompareValidator ID=”CompareValidator1″ runat=”server”

ControlToCompare=”txtPassword” ControlToValidate=”txtConfirmPwd”

ErrorMessage=”Password not matched” ValidationGroup=”register”>*</asp:CompareValidator>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator5″ runat=”server”

ControlToValidate=”txtConfirmPwd” ErrorMessage=”Enter Confirm Password”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

<br />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” ValidationGroup=”register” />

<asp:ValidationSummary ID=”ValidationSummary1″ runat=”server”

ShowMessageBox=”True” ShowSummary=”False” ValidationGroup=”register” />

</div>

</form>

Run the application Click Button