Creating an Ajax enabled website

This walkthrough will demonstrate how to utilize some features of Microsoft Ajax that are included with Microsoft Visual Web Developer.
We will create an AJAX Enabled Website in Visual Studio Web Developer 2010.

Prerequisites

For this walkthrough I will assume that you are able to create a Website and have some experience working with Databases inside Microsoft Visual Web Developer.
Create a new website.

Add a new Database to this project and add a new table with some test info in it. For this example I have added a new table called Employees and added in three columns ID, FirstName, and LastName. Then I populated the table with about 15 test names.
Add a blank page to this website.

Adding Ajax controls to our webpage

Once you have your website setup, switch to the design view of our blank page to which we will add our Ajax controls. To add the controls:

In the AJAX Extensions tab in your toolbox, add a new ScriptManager control to your webpage.

In the AJAX Extensions tab in your toolbox, add a new UpdatePanel control beneath your ScriptManager.

Configuring the UpdatePanel control:
Once we have our UpdatePanel on the page, we’re going to add some stuff inside of it.

From the Data tab in your toolbox, add a new GridView control to the editable area inside of the UpdatePanel control.

Expand the Choose Data Source dropdown menu, and select to bring up the Data Source configuration wizard.

Select Database and hit Next.

For data connection, select your Database file from the dropdown menu and hit Next.

For saving connection string, leave it as Yes which should be default and hit Next.

For retrieving data, select the Specify a custom SQL statement or stored procedure and hit Next.

Making sure you are under the Select tab, in the SQL stament: TextArea, type the following SQL command appropriately for your Database: (In this case I named my table Employees) and hit Next.


Here you can use the Test Query button to make sure that your query is working, and then hit Finish.

Still under the GridView Tasks menu, select the CheckBox next to Enable Paging.

Adding the UpdateProgress Control

Now we are going to add the UpdateProgress control which will simply display a message while our page is loading. In this case, our page loads immediately because the database is within the same project and is local to our machine. However, if that were not the case and maybe it took a few seconds for the page to load because the database was farther away and had a lot of traffic, we would want to inform the user that there page is actually loading and that we are waiting for the database.
From the AJAX Extensions tab in your toolbox, add in a new UpdateProgress control beneath your UpdatePanel control.
In the UpdatePanel control’s Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1 – the default name of the UpdatePanel we added earlier which contains our GridView.
In the editable area of the UpdateProgress control, type in your message that the user will see while the page is loading. In this case I’m going to type ‘Loading Employees…’

Testing

Due to the nature of the simple website we have created, we will never see this message unless we intentionally provoke it. In order to do this:
Select your GridView object and navigate to the events window in Properties.
Locate the PageIndexChanged event and double click it. This will generate code for the event of the page in the GridView being changed, so every time we select a different page of data in that GridView.
Add in the following code to that method:

To test this, load up the webpage and select a different page on your GridView to load a new page. Notice while the page is being loaded you get the message.

Thank You for reading this tutorial and we hope you have learned if you have any questions please feel free to post it on our comment log and we will be more then happy to answer it for you.