Ajax In ASP.NET

Ajax is neither a new programming language nor a new platform for developing websites. Ajax is a new technology which is used to displays the refreshed content on a web page by using the page update approach rather than page replacement approach.
Ajax is built using various technologies which are us follows:-

• Java Script:-

Java Script is a client side dynamic scripting language that supports object-oriented programming.It provides various tools, such as from elements, to communicate with server.

• X HTML:-

X HTML is a combination of HTML and XML.X HTML is used with Ajax enabled website to ensure that the website runs consistently on all Browsers(IE, Firefox,Chrome, Opera mini).

• CSS (Cascading style sheet):-

CSS is a file that define the pattern of a web form.Using CSS, you can specify fonts,colours, styles(bold,italic) and size of controls.It is used to design attractive web page.

• DOM (Document Object Model):-

DOM represents a structured web form in an object oriented model. It is a platform and language -independent  interface that allows programs and scripts to access and update the content of web form.DOM is recommended by world wide web consortium(w3c) to manipulate content at run time.

• XMLHttpRequest Object:-

The core of Ajax functionality is the XMLHttRequest object, as it is responsible for making asynchronous requests to a server,updating the server response and performing necessary changes in the current web page. It sends and receives data in the form of XML.

Ajax Server or Extension Controls:-

• Script Manager:-

Script Manager Controls helps in implementing the Ajax functionality in an asp.net website. You need to add this control on a web page whenever Ajax functionality is required. It manage all the Ajax control on the web page. If we are using  Ajax control over web page then we first drag and drop this control on the web page.

• ScriptManagerProxy Control:-

In any Ajax enabled website is only one Script Manager Control,which manage all the Ajax server controls on that page. If the website contains a 'Master Page'and the Script Manager Control is added in the Master Page. Then  all the web page inherited from the Master Page.For this purpose each content page requires a link to connect to Master Page's Script Manager Control.The content page uses the the Script Manager proxy control to make a link with master page.

EX:-  If  the service and scripts added earlier in the Script Manager Control of the Master Page are not useful for your current web page, then you can remove them by using the Script Manager Proxy Control.

• UpdatePanel Control:-

The UpdatePnael Control helps to divide your web page into parts, where each part can be update independently. If we have a button on the web page, which clicking the page goes to the server and back to the client ,if we want to go only a small part of web page to the server then we use the UpdatePanel Control.  

Creating a simple Application:-

• Drag and drop  ScriptManager control,UpdatPanel control , a button control and two label controls from the Toolbox on the Design view of the Default.aspx page.

• Set the Text property of the Label1 control s to simple Application with AJAX ,the Button1 control to Display and ID property to Btndisplay.

->On Btndisplay Double click:-

protected void Btndisplay_Click(object sender, EventArgs e)
    {
        String myDateTime;
        myDateTime = System.DateTime.Today.ToLongDateString() + " ";
        myDateTime += System.DateTime.Now.ToLongTimeString();
        TimeLabel.Text = myDateTime;
    }

OUTPUT:-

Application Using Timer Control:-

The Timer control can be used in the following two ways:-

• Inside the Update Panel Control
• Outside the  Update Panel Control

Here we are showing  Timer control Inside the Update Panel Control.Outside the  Update Panel Control is similar to this .You Can download whole Application from the below  download link.

• Drag and drop a Script Manager control, Update Panel  control,Timer control and two Label controls from the Toolbox on the Design view of the Default2.aspx page.To use Timer control inside the Update Panel control.

• Set the  Text property of the Label1 control to Application using Timer control,Label2 control to current System time,D property of the Label1 control to Label Heading, ID property of the Label2 control to Time Label,ID property of the Timer control to Timer Updater, and Interval property to 1000

Double click on Timer -Time Updater control:

protected void TimeUpdater_Tick(object sender, EventArgs e)
    {
        TimeLabel.Text = System.DateTime.Now.ToLongTimeString();
    }

OUTPUT:-

Your system current time will be displayed.

Application Using Update Progress Control:-`

• Using the Update Progress control for single Update Panel Control.
• Using the Update Progress control for Multiple Update Panel Control.

Here we are going to show Update Progress control for Multiple Update Panel Control. Here we are using two  Update Panel Control.

Design view Defaut4.aspx:-

Code of Defaut4.aspx.cs:-

protected void BtnProgress_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
 //LabelDemo.Text = "Demonstration on Update Progress Control taken place last time at " + System.DateTime.Now.ToLongTimeString();
        Response.Redirect("default5.aspx");
    }

OUTPUT:-
In this ,you will see that update is in progress and after 5000 interval it go to Default5.aspx.

For More:-

1. Setup File
2. Make Registration Page with ajax
3. E-Post System Project
4. Host Asp.Net Application on IIS Server
5. Interview questions and Answers

Click below for download whole AJAX application .

         DOWNLOAD