TUTORIAL TO MAKE A SIMPLE AJAX APPLICATION ON VISUAL STUDIO 2005 - Haritha Reddy Sama
My tutorial is to install ASP .NET AJAX and create a sample application in AJAX.
Before this you need to have Microsoft Visual Studio 2005 installed on your computer, the installation process installs templates for AJAX-enabled Web site projects. Like this.
Follow these steps to install ASP.NET AJAX.
· Make sure that you are logged in with an account that has Administrator rights.
If your account does not have Administrator rights, the installation process displays the error “The system administrator has set policies to prevent this installation."
· Uninstall any earlier versions of ASP.NET AJAX. If the installation process finds an earlier version on your computer, it will stop. You can remove earlier versions with the Add or Remove Programs application in Control Panel.
· Download the ASPAJAXExtSetup.msi installation package from the ASP.NET AJAX Downloads Web site.
· To install ASP.NET AJAX from the Windows interface, double-click ASPAJAXExtSetup.msi in Windows Explorer. By default, the .msi file is installed in the following location: drive:\..\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.nnnn.
· To install ASP.NET AJAX from the command line, execute the following command at a command prompt:
msiexec /i ASPAJAXExtSetup.msi [/q] [/log <log file name>] [INSTALLDIR=<installation path>]
Specify the /q option to perform the installation without user prompts. You can optionally provide an installation path and a file name for logging. If you do not provide an installation path, the default installation path is used.
· If you want to add the ASP.NET AJAX Control Toolkit, download and install it from ASP.NET AJAX Control Toolkit Web site.
We will be using Northwind.mdb in this application. So make sure that you have this database. This database is a sample database in MS Access. You can open help in MS Access. Then click sample database. You will find it there.
To create an ASP.NET AJAX-enabled Web Site:
1. Start Visual Studio.
2. In the File menu, click New Web Site. The New Web Site dialog box is displayed.
3. Under Visual Studio installed templates, select ASP.NET AJAX-Enabled Web Site.
4. Enter a location and a language, and then click OK.
Before working on the application open the application folder. Ex: here it is stored in c:\Documents and Settings\haritha reddy…\SampleAJAX as shown in the figure near browse button. And copy Northwind.mdb file to App_Data in that folder.
Adding an UpdatePanel Control to an ASP.NET Web Page:
After you create an AJAX-enabled Web site, you create an ASP.NET Web page that includes an UpdatePanel control. Before you add an UpdatePanel control to the page, you must add a ScriptManager control. The UpdatePanel control relies on the ScriptManager control to manage partial-page updates.
To create a new ASP.NET Web page:
1. In Solution Explorer, right-click the name of the site and then click Add New Item.
The Add New Item dialog box is displayed.
2. Under Visual Studio installed templates, select Web Form.
3. Name the new page Employee.aspx and clear the Place code in separate file check box.
4. Select the language you want to use.
5. Click Add.
6. Switch to Design view.
7. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
8. Drag an UpdatePanel control from the toolbox and drop it underneath the ScriptManager control.
Adding Content to an UpdatePanel Control
The UpdatePanel control performs partial-page updates and identifies content that is updated independently of the rest of the page. In this part of the tutorial, you will add a data-bound control that displays data from the Northwind database.
To add content to an UpdatePanel control
1. From the Data tab of the toolbox, drag a GridView control into the editable area of the UpdatePanel control.
2. In the GridView Tasks menu, click Auto Format.
3. In the Auto Format panel, under Select a scheme, select New Data source. You will get a dialog box like this.
4. Specify Northwind as the id and click ok. You will get another dialog box to choose a database.
5. In the GridView Tasks menu, select <New data source> from the Choose Data Source list. The Data Source Configuration wizard is displayed.
6. Under Where will the application get data from, select Database and then click OK.
7. In the Configure Data Source wizard, for the Choose Your Data Connection step, configure a connection to the Northwind database and then click Next.
8. For the Configure the Select Statement step, select Specify a custom SQL statement or stored procedure and then click Next.
9. In the SELECT tab of the Define Custom Statement or Stored Procedures step, enter the following SQL statement:
SELECT FirstName, LastName FROM Employees ORDER BY LastName, FirstName
10. Click Next.
11. Click Finish.
12. In the GridView Tasks menu, select the Enable paging check box.
13. Right click on GridView to view the properties. The properties window generally appears below the solution explorer. Set the page size to 3 (a smaller number because we can see the result having multiple pages in the data grid so that we can test the property of Ajax).
14. Save your changes, and then press CTRL+F5 to view the page in a browser.
The output looks something similar to this.
Notice that there is no page flash when you select different pages of data. This is because the page is not performing a postback and updating the whole page every time. This is the purpose of the tutorial – To display Ajax.