Some Important WPF Classes and Namespaces

Before working with WPF you need to know some common classes and interfaces and their uses. So in this chapter you will get a clear understanding of different classes and interfaces and there uses.  Before knowing the classes and namespaces you need to know, what are the base assemblies that provide different classes ad interfaces for a WPF application. WPF has three base assemblies. These are as below,

1. WindowsBase.dll: This assembly defines the core types that constitute the infrastructure WPF API.
2. PresentationCore.dll: As the name specifies this assembly specifies different types for WPF GUI layer.
3. PresentationFoundation.dll: It defines the WPF control types, animation, multimedia and data binding support. It also specifies some other functionality.
4. The above three namespaces are managed namespaces. Besides these three namespaces WPF also uses an unmanaged library, i.e. milcore.dll. This library is responsible to work with DirectX layer. It acts as a bridge between the managed WPF assemblies and the DirectX layer.

Some WPF Classes:

All these three assemblies provides a number of new namespaces and hundreds of new .NET types(classes, interfaces, structures, enumerations and delegates) to work with WPF. The following class diagram and the class’s functionality.

• DispatcherObject: It is an abstract base class for classes that are bound to one thread. Classes that are derived from DispatcherObject have an associated Dispatcher object that can be used to switch the threads.
• Application: In every WPF application, one instance of Application class is created. This class implements a singleton pattern for access to the window of application, resources and properties. See the below image.
   

• DependencyObject:  It is the base class for all the classes that supports Dependency property.
• Visual: It is the base class for all the visual elements of WPF. This class includes features for transformation.
• UIElement:  It is the abstract base class for all WPF elements that need basic presentation feature. This class provides evens such as mouse move, drag and drop, click, etc.
• FrameworkElement:  It is derived from base class UIElements and implements the default behaviour of the methods defined by the base class.
• Shape: Shape is the base class for all the shape elements such as, line, rectangle, ellipse, polygon.
• Control: It is derived from FrameworkElement and is the base class for all the user-interactive elements.
• Panel:  As the name suggest it is the abstract base class for all the panels and is derived from FrameworkElement. Panel class has a Children property for all the UI-Element that is inside a panel and defines methods for arranging the child controls. Panel defines different classes to define the behaviour of child controls such as, WrapPanel, StackPanel, Grid and Canvas.
• ContentControl: - It is the base class for all the controls that have a single content such as, Buttons, Labels, CheckBox, RadioButton, etc.

You can also find the class hierarchy of your application using Object Browser in VS 2008. To view Object Browser go to view menu and select Object Browser. Object Browser also contains all the namespaces and its classes. See the below image for WPF class hierarchy. It is the class hierarchy of a simple WPF application that we have created earlier. Using Object Browser you can find all the methods, properties and events of a particular class by selecting that class.
 

Some WPF Namespaces:

• System. Windows:- It is the core namespace of WPF. You will find all the base classes such as, Application, DependencyObject , DependencyProperty and FrameworkElement here.
• System. Windows. Controls:- This namespaces contains all the controls of WPF. You will also find classes to work with complex controls such as PopUp, ScrollBar, StatusBar, TabPanel, etc. as well as all the basic controls.
• System. Windows. Data:- This namespace is used by WPF for Data Binding.
• System. Windows. Input:- This namespace provides several classes for command handling, keyboard input, etc.
• System. Windows. Markup:- This namespace helper classes for XAML markup code.
• System. Windows. Media:- This namespace is responsible to work with images, audio, and multimedia.
• System. Windows. Shapes:- This namespace provides core classes for UI such as Line, Rectangle, Ellipse, etc.
• System. Windows. Threading:- This namespace provides classes to work with multiple threads.
• System. Windows. Navigation:- This namespace provides classes for navigation between WPF pages particularly when working with Web Applications.

Applications of WPF

WPF has comprehensive features for creating user experiences with rich content. To package this content and deliver it to users as "applications," WPF provides types and services that are collectively known as the application model. The application model supports the development of both standalone and browser-hosted applications.

Standalone Applications
    For standalone applications, you can use the Window class to create windows and dialog boxes that are accessed from menu bars and tool bars.

Additionally, you can use the following WPF dialog boxes: MessageBox, OpenFileDialog, SaveFileDialog, and PrintDialog.

Like in below image-

Browser-Hosted Applications
For browser-hosted applications, known as XAML browser applications (XBAPs), you can create pages (Page) and page functions (PageFunction<T>) that you can navigate between using hyperlinks (Hyperlink classes).
For Browser-Hosted Application we will discuss later.

Now we are starting with Standalone Application.

Controls in Windows WPF-
                The built-in WPF controls are listed here.

   Buttons: Button and RepeatButton.
   Dialog Boxes: OpenFileDialog, PrintDialog, and SaveFileDialog.
   Digital Ink: InkCanvas and InkPresenter.
   Documents: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer, and StickyNoteControl.
   Input: TextBox, RichTextBox, and PasswordBox.
   Layout: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window, and WrapPanel.
   Media: Image, MediaElement, and SoundPlayerAction.
   Menus: ContextMenu, Menu, and ToolBar.
   Navigation: Frame, Hyperlink, Page, NavigationWindow, and TabControl.
   Selection: CheckBox, ComboBox, ListBox, TreeView, RadioButton, and Slider.
   User Information: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock, and ToolTip.

Programming With WPF

The fundamental of  WPF programming is very  familiar to the Windows and web Application. You can  instantiate classes, set properties, call methods, and handle events, all using your favorite .NET Framework programming language, such as C# or Visual Basic. WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace.
WPF includes additional programming constructs that enhance properties and events: Dependency Properties and Routed Events

Markup and Code-Behind

WPF offers additional programming enhancements for Windows client application development. One obvious enhancement is the ability to develop an application using both markup and code-behind, an experience that ASP.NET developers should be familiar with. Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code.

Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.
Multiple design tools can be used to implement and share XAML markup, to target the requirements of the application development contributors.
Globalization and localization for WPF applications is greatly simplified

Markup

XAML is an XML-based markup language that is used to implement an application's appearance declaratively. It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

Code-Behind

The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. In WPF, this behavior is generally implemented in code that is associated with markup. This type of code is known as code-behind.

To understand Code behind i have taken example for Button click event to show the message box. For this just double click on Button you will go to the code behind of button and write the code as follows for button click event. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
          
            MessageBox.Show("Welcome to WPF Programming!");
        }
    }
}

Limitations of  Silverlight and flash

Silverlight Feature comparison with Flash Features

How to Add XML File in Your Silverlight Project

Add Xml File named as Employee.xml and write the code given below

.XAML Code: Write this code in MainPage.xaml

<UserControl x:Class="SilverlightApplication14.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
   <ListBox x:Name="EmployeeList" Width="400" Height="200" 
SelectionChanged="EmployeeList_SelectionChanged" />
    </Grid>
</UserControl>

.CS Code: Write this code in MainPage.xaml.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml;

namespace SilverlightApplication14
{
   public partial class MainPage : UserControl
    {
       public MainPage()
        {
        InitializeComponent();
        PopulateEmployeeList();
        }
        private void PopulateEmployeeList()
        {
            XmlReader reader = XmlReader.Create("Employee.xml");
            reader.MoveToContent();
            while (reader.Read())
            {
                if (reader.NodeType == XmlNodeType.Element && reader.Name
 == "customer")
                {
                    EmployeeList.Items.Add(new ListBoxItem()
                    {
                     Content = reader.GetAttribute("last") +
                   ", " + reader.GetAttribute("first") + " (" + reader.ReadInnerXml() + ")"
                    });
                }
                if (reader.NodeType == XmlNodeType.EndElement && reader.Name ==
 "Employee")
                {
                    break;
                }
            }
            reader.Close();
        }
    }
}

Run the Silverlight Application

3 Pixel Shader Effects in Silverlight

Write below code in your MainPage.xaml

<UserControl x:Class="SilverlightApplication14.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Margin="8" Grid.Column="0">
            <TextBlock Text="(Hi, Dear) A Drop Shadow!" FontSize="20">
                <TextBlock.Effect>
                    <DropShadowEffect />
                </TextBlock.Effect></TextBlock>
            <TextBlock Text="(Helloooo) A Slight Drop Shadow!" FontSize="20">
                <TextBlock.Effect>
                    <DropShadowEffect ShadowDepth="2" />
                </TextBlock.Effect></TextBlock>
            <TextBlock Text="(Good Bye) Blur Effect!" FontSize="20">
                <TextBlock.Effect><BlurEffect />
                </TextBlock.Effect></TextBlock>
        </StackPanel></Grid></UserControl>

The Design page shown like

Run the Silverlight Application

Rotate Image in 3D direction using Silverlight

Add Three ToggelButton and an image in your Project

Write below code in your MainPage.xaml.

<UserControl x:Class="SilverlightApplication14.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources><Storyboard x:Name="RotateZStoryBoard">
                <DoubleAnimation Storyboard.TargetName="rotation" 
 Storyboard.TargetProperty="RotationZ" From="0.0" To="360.0" Duration="0:0:10"
 RepeatBehavior="Forever" />
            </Storyboard><Storyboard x:Name="RotateYStoryBoard">
                <DoubleAnimation Storyboard.TargetName="rotation" 
 Storyboard.TargetProperty="RotationY" From="0.0" To="360.0" Duration="0:0:10"
 RepeatBehavior="Forever" />
            </Storyboard> <Storyboard x:Name="RotateXStoryBoard">
                <DoubleAnimation Storyboard.TargetName="rotation" 
 Storyboard.TargetProperty="RotationX" From="0.0" To="360.0" Duration="0:0:10"
 RepeatBehavior="Forever" />
            </Storyboard> </Grid.Resources><Grid.RowDefinitions>
            <RowDefinition Height="30" /><RowDefinition />  </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <ToggleButton x:Name="rotateX" Width="90" Content="Rotate X-Axis"
 Click="rotateX_Click" />
            <ToggleButton x:Name="rotateY" Width="90" Content="Rotate Y-Axis"
 Click="rotateY_Click" />
            <ToggleButton x:Name="rotateZ" Width="90" Content="Rotate Z-Axis"
 Click="rotateZ_Click" />
        </StackPanel><Image Grid.Row="1" Margin="0 50 0 0"  
 Stretch="None" Source="/SilverlightApplication14;component/
Indian%20Flag%203.jpg">
            <Image.Projection>
                <PlaneProjection x:Name="rotation" /></Image.Projection></Image></
Grid></
UserControl>

The Design shown like:

MainPge.xaml.cs Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml;
namespace SilverlightApplication14
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();   
        }
        private void rotateX_Click(object sender, RoutedEventArgs e) 
        {
            if (rotateX.IsChecked.Value)
            {
                RotateXStoryBoard.Begin();
            }
            else
            {
                RotateXStoryBoard.Stop();
            }
        }
        private void rotateY_Click(object sender, RoutedEventArgs e)
        {
            if (rotateY.IsChecked.Value)
            {
                RotateYStoryBoard.Begin();
            }
            else
            {
                RotateYStoryBoard.Stop();
            }
        }
        private void rotateZ_Click(object sender, RoutedEventArgs e)
        {
            if (rotateZ.IsChecked.Value)
            {
                RotateZStoryBoard.Begin();
            }
            else
            {
                RotateZStoryBoard.Stop();
            }
        }  
    }
}

Run Your Silverlight Aplication (Click on Rotate Z-Axis)

Step 1:  Open a New Project.

Step 2: Select a Silverlight Application and press OK

Step 3: At beginning we take a example of Canvas Control. Drag a canvas control and TextBlock control from ToolBox. you can move these as your choice.

Design Code:

<UserControl x:Class="SilverlightApplication8.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Canvas x:Name="canvas1">
        <TextBlock Canvas.Left="10" Canvas.Top="10" Height="23" Name="textBlock1"
 Text="Microsoft" />
        <TextBlock Canvas.Left="37" Canvas.Top="39" Height="23" Name="textBlock2"
 Text="Silverlight" />
    </Canvas>

</UserControl>

Step 4: Run the application

Silverlight 2.0

Silverlight 2.0 includes a version of the .NET Framework, with the full Common Language Runtime as .NET Framework 3.0; so it can execute any .NET language including VB.NET and C# code. Unlike the CLR included with .NET Framework, multiple instances of the CoreCLR included in Silverlight can be hosted in one process. With this, the XAML layout markup file (.xaml file) can be augmented by code-behind code, written in any .NET language, which contains the programming logic.

This version ships with more than 30 UI controls(including TextBox, CheckBox, Slider, ScrollViewer, and Calendar controls), for two-way databinding support, automated layout management (by means of StackPanel, Grid etc) as well as data-manipulation controls, such as DataGrid and ListBox. UI controls are skinnable using a template-based approach.


Main features of Silverlight 2.0

• A built-in CLR engine that delivers a super high performance execution environment for the browser.
• Silverlight uses the same core CLR engine that we ship with the full .NET Framework.
• Silverlight includes a rich framework library of built-in classes that you can use to develop browser-based applications.
• Silverlight includes support for a WPF UI programming model. The Silverlight 1.1 Alpha enables you to program your UI with managed code/event handlers, and supports the ability to define and use encapsulated UI controls.
• Silverlight provides a managed HTML DOM API that enables you to program the HTML of a browser using any .NET language.
• Silverlight doesn't require ASP.NET to be used on the backend web-server (meaning you could use Silverlight with with PHP on Linux if you wanted to).
• Silverlight 2 includes Deep Zoom, a technology derived from Microsoft Live Labs Seadragon. It allows users to zoom into, or out of, an image (or a collage of images), with smooth transitions, using the mouse wheel. The images can scale from 2 or 3 megapixels in resolution into the gigapixel range, but the user need not wait for it to be downloaded entirely; rather, Silverlight downloads only the parts in view, optimized for the zoom level being viewed.
• Silverlight 2 also allows limited filesystem access to Silverlight applications. It can use the operating system's native file dialog box to browse to any file (to which the user has access).

In this section you will learn how you can install Ajax in eclipse 3.2 or in ASP.net  .

For Eclipse  jMaki is  Plugin to install this plugin for the Eclipse 3.2 or Eclipse 3.3 we have follow following steps

1. Start Eclipse 3.3.X or Eclipse 3.2.X (The WTP (Web Tools Platform) plugins must be installed.)
2. Start the installation procedure : Go to  Help>Software Updates>Find and Install  in menu item.
3. Select "Search for new features to install" option and click Next.
4. Click "New Remote Site".
5. Enter  a name (ie jMaki Eclipse Plugin ), enter the URL https://ajax.dev.java.net/eclipse
6. Select this new site in the Sites to include in search list and click Next.
7. Select jMaki for Eclipse in the "Select the features to install" list and click Finish.
8. Accept the terms of the license agreements and click Next.
9. Verify that the install location is your Eclipse installation directory, otherwise select the correct one, click Finish.
10. A warning will appear telling the feature is not signed. Ignore and click Install to continue.
11. Accept to restart the workbench to load jMaki into the workbench.

After Eclipse is restarted  the plugin is correctly installed if you see the jMaki widgets in the Eclipse Snippets view.

If this does not work.Then you can do menauly .Download the plugin the jars  file  from  https://ajax.dev.java.net/eclipse/plugins/org.jvnet.ajax.eclipse.jmaki_1.8.0.jar

Operating Systems
      Windows Server 2003
      Windows XP Home Edition
      Windows XP Professional
      Windows Vista
   
      Any Windows operating system version (including Windows 2000) that supports the Microsoft .NET Framework version 2.0. Note that support will be limited to the terms of support for that platform.

Required Software

 .NET Framework 2.0 or version 3.0.
   I E 5.01 +

Optional Software

      Microsoft Visual Studio 2005 or Visual Web Developer Express Edition

Installing Microsoft ASP.NET AJAX

Steps to install ASP.NET AJAX.

Q : What is Ajax Advantage?

AJAX web applications are browser and platform independent.The web  applications in AJAX supported by all major browsers.But it support only  IE 5.0+, Safari 1.2+, Mozilla 1.0+ / Firefox, Opera 8+, and Netscape 7+.

AJAX is used to make a better Internet Applications(web applications).

Ajax web base applications are easier to install and support, and easier to develop.

With AJAX, Internet applications(Web applications) can be made richer and more user-friendly.

AJAX Uses HTTP Requests . In traditional JavaScript if we want to get informations from a server (from database or a file ), or user have send information to a server. Then we will have to make an HTML form .Which will send data to server through  GET or POST method. The user will have to click on "Submit" button to send/get the information.This mean we have send whole data of form and we have wait for the server to respond results.Then the server sends a new page as a results. This mean there is refresh of page.Because the server returns a new page each time the user submits input. So the traditional web applications was slower and tend to be less user-friendly. With object of XMLHttpRequest we can communicates directly with the server and with HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page.

JavaScript Loops

The for Loop

How many times the script should run then we used for loop.

Syntax

for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
//code 
}

The while Loop

The while loop loops through a block of code while a specified condition is true.

Syntax

while (variable<=endvalue)
{
//code 
}

Example:

Step 1. Written below code in your application.

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
  {
  document.write("The number is " + i);
  document.write("<br />");
  }
</script>
</body>
</html>

Step 2. Run the Application. Click on Button.

Show a Military Clock and ordinary clock

Step 1. Written below code in your application.

<html>
    <SCRIPT>
var now;
function showMilitaryTime() {
     if (document.theForm.showMilitary[0].checked) {
          return true;
     }
     return false;
}
function showTheHours(theHour) {
     if (showMilitaryTime() || (theHour > 0 && theHour < 13)) {
          return (theHour);
     }
     if (theHour == 0) {
          return (12);
     }
     return (theHour - 12);
}
function showZeroFilled(inValue) {
     if (inValue > 9) {
          return ":" + inValue;
     }
     return ":0" + inValue;
}
function showAmPm() {
     if (showMilitaryTime()) {
          return ("");
     }
     if (now.getHours() < 12) {
          return (" am");
     }
     return (" pm");
}
function showTheTime() {
     now = new Date();
     document.theForm.showTime.value =
     showTheHours(now.getHours()) +
     showZeroFilled(now.getMinutes()) +
     showZeroFilled(now.getSeconds()) +
     showAmPm();
     setTimeout("showTheTime()", 1000);
}
</SCRIPT>
<BODY onLoad="showTheTime();">
<FORM NAME="theForm">
     <INPUT TYPE="TEXT" NAME="showTime">
     Display Military Time?
     <INPUT TYPE="RADIO" NAME="showMilitary" CHECKED>Yes
     <INPUT TYPE="RADIO" NAME="showMilitary">No
</FORM>
</html>

Step 2. Run the Application. Click on Button.

How To validate a Form in ASP. Net

Step 1. Written below code in your application.

JavaScript Code

<script language="javascript" type="text/javascript">
function validate()
{
if (document.getElementById("<%=TextBox1.ClientID%>").value=="")
      {
                 alert("Name can not be blank");
                 document.getElementById("<%=TextBox1.ClientID%>").focus();
                 return false;
      }
      
      if(document.getElementById("<%=TextBox2.ClientID %>").value=="")
      {
                 alert("Email id can not be blank");
                document.getElementById("<%=TextBox2.ClientID %>").focus();
                return false;
      }
     var emailPat= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     var emailid=document.getElementById("<%=TextBox2.ClientID %>").value;
     var matchArray = emailid.match(emailPat);
     if (matchArray == null)
    {
               alert("Your email address seems incorrect. Please try again.");
               document.getElementById("<%=TextBox2.ClientID %>").focus();
               return false;
    }
    if (document.getElementById("<%=TextBox3.ClientID%>").value=="")
      {
                 alert("Contact Number can not be blank");
                 document.getElementById("<%=TextBox3.ClientID%>").focus();
                 return false;
      }
     var digits="0123456789";
     var temp;
     for (var i=0;i<document.getElementById("<%=TextBox3.ClientID %>").value.
length;i++)
     {
     temp=document.getElementById("<%=TextBox3.ClientID%>").value.
substring(i,i+1);
     if (digits.indexOf(temp)==-1)
      {
      alert("Please enter correct Contact Number");
      document.getElementById("<%=TextBox3.ClientID%>").focus();
      return false;
      }
     }
      if(document.getElementById("<%=TextBox5.ClientID %>").value=="")
    {
      alert("City can not be blank");
     document.getElementById("<%=TextBox5.ClientID %>").value;
      document.getElementById("<%=TextBox5.ClientID %>").focus();
      return false;
    }
      if(document.getElementById("<%=TextBox6.ClientID %>").value=="")
    {
     alert("Password can not be blank");
     document.getElementById("<%=TextBox6.ClientID %>").value;
     document.getElementById("<%=TextBox6.ClientID %>").focus();
      return false;
    }
    if(document.getElementById("<%=TextBox7.ClientID %>").value=="")
    {
     alert("Please Re-Enter Password ");
   document.getElementById("<%=TextBox7.ClientID %>").value;
   document.getElementById("<%=TextBox7.ClientID %>").focus();
    return false;
    }
     return true;
}
</script>

Default.aspx Code

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Form Validation</title>
    </head>
<body>
    <form id="form1" runat="server">
    <script language="javascript">

//Write JavaScript Code
</script>
  <div>
  <table >
  <tr><td>Name</td>
  <td><asp:TextBox ID="TextBox1" runat="server"
             Width="193px"></asp:TextBox></td></tr>
            <tr> <td>Email ID</td>
          <td><asp:TextBox ID="TextBox2" runat="server" Width="193px" 
            ToolTip="Enter unique Email ID" AutoPostBack="True">
            </asp:TextBox></td></tr>
            <tr><td>Contact Number</td><td>
              <asp:TextBox ID="TextBox3" runat="server" Width="193px" 
  AutoPostBack="True"></asp:TextBox></td></tr>
            <tr><td> Sex</td>
    <td><asp:RadioButton ID="RadioButton1" runat="server" Text="Male" 
GroupName="a" />
    <asp:RadioButton ID="RadioButton2" runat="server" Text="Female"
 GroupName="a" /></td>
      </tr>
  <tr> <td>Enter&nbsp; City</td>
   <td><asp:TextBox ID="TextBox5" runat="server" Height="22px" Width="193px"
></asp:TextBox>
                </td></tr>
  <tr><td>Password</td>
    <td><asp:TextBox ID="TextBox6" runat="server" Width="193px"
 TextMode="Password" >
    </asp:TextBox></td>            </tr>
    <tr><td>Re-Enter Password</td>
     <td> <asp:TextBox ID="TextBox7" runat="server" TextMode="Password"
 Width="193px" 
              Height="22px"></asp:TextBox> </td> </tr>
            <tr><td><asp:Button ID="Button1" runat="server" Text="Submit" 
                        onclick="Button1_Click" OnClientClick="return validate() " />
                    </td></tr></table></div>
    </form>
</body>
</html>

Step 2. Run the Application. Click on Button.