Social Icons

Wednesday, 22 May 2013

UpdatePanel Example: How to use ajax Updatepanel Control

How to use UpdatePanel Control in Asp.Net


In this tutorial i will explain how to use updatepanel control for partial page rendering on webpage in with example.


In my previous tutorial i explained validation controls Tutorails, Asp.Net Ajax Tutorial Overview,Now we will see the how updatepanel will perform partial page rendering on the page.

To use an updatepanel control:

  1. Create a new webpage and switch to design view.
  2. Add ScriptManager control from the ajax extensions tab of toolbox to page.
  3. Then add a updatepanel control  then take a label and button in inside updatepanel.
  4. In button click event update the current time in label.

Ajax updatepanel example:

In button Click event write code like this
Now run the page by ctrl+F5 then you will notice that whenever you submit the page(clicking the update button) the label is updated with present time but the whole page is not submitted. Thus update panel will perform Partial page rendering.

Related Tutorials


Tuesday, 21 May 2013

Asp.Net Ajax Server Controls: Ajax Control Toolkit

Ajax Server Controls:


In my previous articles i explained WPF architecture,working or Consuming Three tier architecture in C#.Net Windows Application and Various Examples Regarding Asp.Net. Now i will explain what are the ajax server controls, How to Access them and about Ajax Control Toolkit.


For Providing rich client behaviour Ajax server controls contains client and server code.
Mostly used server controls are
  • ScriptManager
  • UpdatePanel
  • UpdateProgress
  • Timer

ScriptManager Control:

This manages client script for Microsoft Asp.Net Ajax Pages. To Provide Ajax features for any page you must add this control to page. By default this controls registers the script for Microsoft Ajax Library. Based on the type of Control Placed in the page, that require scripts only added to page.This ScriptManager control is visible only in design time will not visible while running.
    When a page contains multiple UpdatePanels, ScriptManager Manages the Partial Page Rendering on the pages. EnablePartialRendering Property of the page determines whether to participate in partial page rendering or not. By default this property is true.

handling errors during partial page rendering:

  • Set the custom AllowCustomErrorRedirect property, which indicates how the custom error section in web.config file used when an error occured during asynchronous postback.
  • When an error occured during postback, then ScriptManagers AsyncPostBackError event, will raise so handle that event to catch errors.
  • Set the AsyncPostBackErrorMessage property, which is sent to the browser when error occured.  

UpdatePanel Control:

This control is the key to perform partial page rendering on the page. All the controls which are placed inside the UpdatePanel Control will perform partial page rendering.When updatepanel performs asynchronous postback it adds a custom HTTP Header. There is no limit on the usage of UpdatePanels on the page and nested levels also. Each UpdatePanel is updated individually without affecting one another.
        Using AsyncTrigger Property you can handle Multiple UpdatePanels partial page rendering.

UpdateProgress Control:

This control is used to display the status of download occuring on the page. You can use multiple updateprogress controls on the page. One UpdateProgress Control can associate with mutliple UpdatePanels.

Timer Control:

To perform postbacks at dynamic intervals you can use Timer Control. It can be used to trigger automatic updates for the selected page which is inside an updatepanel control.

what is Asp.Net Ajax Control Toolkit:

The Asp.Net Ajax Control Toolkit is a open source project which is a joint effort between Miscrosoft and Asp.Net Ajax community. Their intention is to provide powerful infrastructure to write reusable,customizable and extensible ASP.NET AJAX Extenders and Controls.These controls provides rich interactive user interface.
               This Ajax Control Toolkit contains more than 30 controls that enable you to easily create rich,interactive web pages.

Download and Install ASP.NET AJAX Control Toolkit:

 You can download and Install Ajax Control Toolkit from ajax control toolkit project from codeplex.


I hope you got an idea about ajax server control and Ajax Control Toolkit. In my next articles i will explain how to use updatepanel, updateProgress and Timer controls individually with example. Your suggestions,other requirements are always welcome.

Related Tutorials


Ajax Tutorial : Asp.Net Ajax Tutorial Overview

Asp.Net Ajax Overview


In my previous articles i explained Wpf Architecture Overview, Asp.Net Validation Controls Overview and Various examples regarding Asp.Net. Now i will give you Overview for Asp.Net Ajax,how ajax works and Which standards will use in Ajax approach.


Ajax Overview:

Ajax = Asynchronous Javascript and XML.

Ajax is not a new programing language neither a technology nor a product but it is an approach to use existing standards.
It is art of exchanging data with the server and allow the webpage to update it's parts allowing partial page postbacks. (without submitting the whole page to server). Thus Ajax allows the partial page rendering on the page. Using Ajax you can develop faster,better,dynamic and more responsive webpages.

Ajax Uses following internet standards
  • XmlHttpRequest Object (to exchange data asynchronously with the server).
  • Javascript/Dom (To display the data).
  • Css (to style the data)
  • XML (format for transferring data to server).

How Ajax Works:

How Ajax Works

Ajax Enabled Applications Examples:

Google Maps,Gmail,Live.Com,Youtube and Facebook tabs.

Ajax is very much popular by Google (Google suggest). We can use these Ajax features not only in Asp.Net but also in php,Java,asp etc.

Microsoft Asp.Net Ajax:

Asp.Net ajax is part of which enables in ajax features in applications. Previously it was called as "Atlas" is an extension Asp.Net Framework 2.0. This extension is developed to support both client side and server side. Networking layer is main in ajax extension client profile which is responsible or manages the asynchronous calls over the XmlHttpRequest.

       XmlHttpRequest object is responsible for partial page rendering on the page with help of javascript to make asynchronous calls to web sever and process the response without posting full page to web sever.XMLHTTP protocol enables to pack data as xml and send it to server through network.

    Asp.Net Ajax includes a library of client script functions which gives more advantages of object oriented programming and model to client scripting. Asp.Net Ajax also provides server-based support that includes web server controls that can automatically render client script that is required for Ajax functionality.

Ajax features:

Web Forms applications that can use ajax features have following capabilites
  • Interactive UI Elements such as progress indicator, tooltips and pop-up windows.
  •  Improved efficiency of web forms using partial page rendering.
  • Auto generated proxy classes that automatically calls web service methods from client script.
  • ability to customize server controls to include client capabilities.
  • Supports almost all browsers.

Asp.Net Ajax Server Controls:

Highly used Ajax server controls are ScriptManager, UpdatePanel, UpdateProgress and Timer.To enable the Ajax features on Asp.Net you must add ScriptManager which adds ajax features to the Web Form. Using ScriptManager and UpdatePanel ,Asp.Net ajax updates the selected parts of the page only without submitting whole page to server. Update progress Control used to provide status of progress occuring in UpdatePanel.


I hope you got an idea about Asp.Net Ajax Extension Functionality and How it works. In my next i will explain about Asp.Net ajax server Controls and How to create First Asp.Net Ajax enabled Application. Your valuable suggestions, Comments are always welcome.

Related Tutorials

Saturday, 18 May 2013

CompareValidator Example: How to use CompareValidator in Asp.Net

CompareValidator Example:



CompareValidator Control is used to compare two values. The value to compare can be either a value of another control or a constant specified. There are predefined data types that can be compared like string, integer etc.

1).  Add a compareValidator control to the page and set the properties ControlToValidate, ErrorMessage,Text,Display.
2). Set the value to Compare by setting the properties like ValueToCompare, ControlToValidate, Type and Operator.

Age Validation using CompareValidator Control:

Comparing two passwords using CompareValidator Control:




I hope you got an idea about how to use CompareValidator in Asp.Net Using Age and Phone Number validations.

How to use RangeValidator Control in Asp.Net with C# Example

RangeValidator Control Example:


In my previous article i explained overview of ValidationControls in,How to use requiredfieldvalidator in Asp.Net.Now i will explain How to use RangeValidator Control in Asp.Net.


You can use the ASP.NET RangeValidator control to determince whether a user's entry falls within specific range of values - for example, between two numbers, between two dates or between alphabetic characters.
You set the upper and lower bounds of the range as properties of a RangeValidator Control. You must also specify the data type of the values that the control will validate.

To Use this:

1). Add a RangeValidator control to the page and set the properties ControlToValidate,ErrorMessage,Text and Display.
2). Set the low and high values of the range using MinimumValue and Maximumvalue properties.
3). Set the type property to specify the datatype of the range settings. use the ValidationDataType enumeration, which enables you to specify the following types
  • String
  • Integer
  • Double
  • Date
  • Currency

RangeValidator Example phone number and Date Validation:


Related Tutorials

Thursday, 16 May 2013

Validation Example: How to use RequiredFiledValidator in Asp.Net

How to use RequiredFieldValidator in Asp.Net


In my previous articles i explained Overview of Asp.Net Validation Controls,WPF architecture,Three tier architecture in .net application etc. Now i will explain In detailed about RequiredFieldValidator Control in Asp.Net.


RequiredFieldValidator Control in Asp.Net

This validation Control is used to make a field as mandatory in the form. Without filling the form user can't submit the form. Use the RequiredFieldValiator control to make an input control a mandatory field. The input control fails validation if the value it contains does not change from its initial value when validation is performed. This prevents the user from leaving the associated input control unchanged. By default Initial value is an empty string (""), which indicates that a value must be entered in the input control for it to pass validation.

Important Properties:

Wednesday, 15 May 2013

Asp.Net Validation Controls Tutorial

Asp.Net Validation Server Controls


In my previous article i explained difference between web.config and app.config, WPF architecture overview, 3- tier architecture in .net application. Now i will explain Asp.Net Validation Server Controls.


Validation Server Controls:

Validation Controls used for validating user input data, data format, datatype and range of value.

 Validation Types:

Validation is two types.
 1. Client Side
 2. Server Side.

Client Side Validation: