Tuesday, October 25, 2011

How to use CascadingDropDown with ASP.NET AJAX and Webservice



In this Tutorial we are using AJAX Control Toolkit and Webservice to perform CascadingDropDown.The CascadingDropDown control in the AJAX Control Toolkit extends a DropDownList control so that changes in one DropDownList loads associated values in another DropDownList. Here we are using Three CascadingDropDown Extenders.

Attributes are following for CascadingDropDown extenders:

ServicePath: URL of a web service delivering the list entries
ServiceMethod: Web method delivering the list entries
TargetControlID: ID of the dropdown list
Category: Category information that is submitted to the web method when called
PromptText: Text displayed when asynchronously loading list data from the server
ParentControlID: (optional) parent dropdown list that triggers loading of the current list

Step 1:
MSVS2008->New->Website(CascadingddAj)

Step 2:
Add database to it. and create tables in database named it CarsMake, CarsModel, CarsColor


Step 3:
CarsMake Table:

CarsModel Table:

CarsColor Table:
Step 4:
default.aspx page code:
In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <body> element)
Click on Image to Enlarge
Step 5:
web.config page code:
Connection String added here with name ConnectionString. that is used in WebService.cs file in syntax {string strconnection= ConfigurationManager.ConnectionString ('ConnectionString").ConnectionString }
For this Example, we assume that the instance of the SQL Server 2005 Express Edition is called SQLEXPRESS and resides on the same machine as the web server; this is also the default setup. If your setup differs, you have to adapt the connection information for the database.
Click on Image to Enlarge
Step 6:
WebService.cs
(Click on Image to enlarge it)
The [ScriptService] attribute is used, otherwise ASP.NET AJAX cannot create the JavaScript proxy to access the web methods from client-side script code.
Click on Image to Enlarge
Click on Image to Enlarge
Click on Image to Enlarge
View in Browser 

No comments:

Popular Posts