CIS 764 – Database Design 

Rahul Deshmukh 

Tutorial – Sample ASP.NET 2.0 Data Driven Web Application with AJAX 1.0 

10/23/2007 

  

Step 1 – Install Visual Studio 2008 Express and MS SQL Server 2005 Express from www.microsoft.com

Step 2 – Download AJAX 1.0 toolkit for .NET 3.5 framework from  http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941

Step 3‐ Extract the zip file in C:\AjaxToolkit directory 

 

 

 

 

 

 

Step 4‐ Fireup Visual Studio 2008 Express and select file‐> new ‐> website as shown below 

 

Step 5 – Specify the path and select OK. Go to View ‐> Toolbox, right click on toolbox and select  Add Tab, Name it as AJAX Tool and select Choose Item by right clicking the newly added tab. Click Browse and go to the extracted AjaxControlToolkit ‐> SampleWebSite ‐>Bin. Select AjaxControlToolkit.dll select OK. 

Step 6 – Right click on the project name in solutions explorer and select add new item and add a new SQL database as shown below 

 

Step 7 – Add new database and add new table to the database. The fields are as shown below 

 

Step 8 – Add sample data to the database as shown below 

 

 

Step 9 – Double click on Default.aspx in solution explorer and go to the View ‐> Designer.  Select View ‐> Toolbox, drag and drop DropDownList control from the standard section of toolbox.  It will ask to choose the data source, select Choose Data Source link and click new data source, select MS SQL database. 

 

Step 10 – Select the database already created and click next 

 

 

Step 11 – Select the Designation field name from database as shown below 

 

Step 12 – Drag and drop and grid view control from the data section of the toolbox and choose a new sqldata source as shown below 

 

Step 13 – In the query designer select all fields except id and also select the where clause and assign parameter name to the DropDownList1 as shown below 

 

Step 14 – The Designer View should look like as shown below 

 

Step 15 – Go to the code view and add the following code after the DropDownList1 and before GridView1 code section as shown below 

 

Step 16 – Add trigger in the UpdatePanel Section after </ContentTemplate> as shown below 

 

 

Step 17 – Press  F5 or goto Debug ‐> Start Debugging as shown below 

 

Step 18 – Enable debugging by selecting Yes for modifying  the web.config file as shown below 

 

 

Step 19 – The first run will be shown as follow 

 

Step 20 – In order to put the Select Text in the drop down list close the site and select Debug ‐> Stop Debugging and right click on the drop down list and select properties. Double click the properties window in order to enlarge.  In the Item selection add a new value as shown below.  

 

Step 21 – Make sure to set True to the attributes as shown below 

 

Step 22 – Run the application and it should look like as following 

 

 

Step 23 – Change the index and the details of the employee holding that designation will be shown dynamically and with partial page update. Notice that the whole page will not be refreshed each time the user selects the new designation from the page