Creating an Ajax enabled website in Visual Studio 2010 Web developer Tutorial

Creating an Ajax enabled website in Visual Studio 2010 Web developer Tutorial


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
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.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
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.
In the GridView Tasks menu:
Expand the Choose Data Source dropdown menu, and select <New Data Source…> 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.
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
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…’
Now when the page is loaded, while the GridView is being populated the message we have entered here will be displayed.
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.
 If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

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.

Ajax Tutorials


There are no comments yet...Kick things off by filling out the form below.

Leave a Comment