ASP.net Ajax - Connect DropDownList select to ajax event.

Today we will demonstrate a client-server communication using Ajax under ASP.Net.

We will create client-side event, which communicates the server side method that has the WebMethod attribute and should return us the appropriate data by id.

First of all, explanation about the example that we are going to write:

When the user select an item of the DropDownList control, a client-side event is triggered, this event will send an Ajax Request to the server-side with the selected data. The Web Service will parse the Ajax request and will execute the target method.

In our case the target method should return a serialized object that holds all relative user information.

If the client-side received a valid response from the server, a method which named 'OnSuccess' will be executed, this method will plant all user information into the correct fields.

Now let's start coding, First of all lets add a ScriptManager control to our page ( manages client script for Microsoft ASP.NET AJAX pages).

- DropDownList control.

- 6 labels (3 will show the fields names and the other 3 will display dynamic information).

Code example:



Design example:


In addition we'll implement a new handler for the 'onchange' event:

<script type ="text/javascript">

function GetNameInformation() {

//Get the selected name in the DropDownList.

var selectedValue = document.getElementById("usersDropDown").value;

//Call WebMethod.

PageMethods.GetIdInformation(selectedValue, OnSuccess, OnFail);

}

Now let's set the 'onchange' event of our DropDownList control to the new handler we just wrote:

<asp:DropDownList ID="usersDropDown" runat="server" Width="200px" onchange="GetNameInformation()">

A little explanation about GetIdInformation() method:
The first parameter 'selectedValue' is sent to the server.
The second parameter 'OnSuccess' has the name of the method that run if the request success.
The third parameter 'OnFail' has the name of the method that runs if the request failed.

//The method planting the response data in the labels fields. The method is executed only if GetNameInformation() Succeded.
//response - The variable actually represents the object that returned from the server.
function OnSuccess(response) {
document.getElementById(""nameDisplayLabel").innerHTML = response.Name;
document.getElementById("ageDisplayLabel").innerHTML = response.Age;
document.getElementById("countryDisplayLabel").innerHTML = response.Country;
}
///The function is performed in case the request to the server fails.
function OnFail() {
alert('Failed to get Name information.');

Now we will change 'EnablePageMethods' property that indicates whether public static page methods in an ASP.NET page can be called from client script. Of course, in our case we select "true".

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods=true/>

Let's go to Server-side:

What's left is to execute the program.

See you on the next post,
The Liquid.

Source Code
Download