Two DropDownList with Client Call-Back

• Download demo project - 298.08 KB

Introduction

I wanted to learn how to create a list that was populated by selected items in another list (like dropDownList), since I enjoyed working with them on other people's websites. After much search on the web, I succeeded in finding that one of my own books: ASP.NET 2.0 MVP Hacks and Tips had the answers.

Background

I don't know whether you know what callBack is or not, however, I suggest reading a related chapter of book.

Using the Code

If you want to see the result on your own machine, you can download the above (.zip) file .

ddlCallBack.aspx.cs

string ICallbackEventHandler.GetCallbackResult()
{
    StringBuilder sb1 = new StringBuilder();

    try
    {
        SqlConnection sqlC = new SqlConnection(
            ConfigurationManager.ConnectionStrings["cstr1"].ConnectionString);
        SqlCommand sqlCom = new SqlCommand(
            "select customerID,customerName from customers where itemID = @itemIDi",
            sqlC);

        sqlCom.Parameters.Add(new SqlParameter("@itemIDi", SqlDbType.Int));
        sqlCom.Parameters["@itemIDi"].Value = this.earg;


        sqlC.Open();
        SqlDataReader sqlDR = sqlCom.ExecuteReader(CommandBehavior.CloseConnection);

        while (sqlDR.Read())
        {
            sb1.Append(sqlDR["customerID"]);
            sb1.Append("|");
            sb1.Append(sqlDR["customerName"]);
            sb1.Append("||");

        }
        sqlDR.Close();
    }
    catch(Exception e1)
    {
        throw new ApplicationException(e1.Message.ToString());

    }


    return sb1.ToString();

}

The above code [GetCallbackResult() method], is where the results are returned from the server code to client script via the "return" statement. In other words, when a client changes a selected-item in "items" list, and the onchange event is fired, the selected-value is passed from the client to the server through the eventArgument variable that causes the class variable earg to be set in RaiseCallbackEvent:

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
   this.earg = eventArgument;
}

Then the GetCallbackResult() method gets related customers from customer table:

select customerID,customerName from customers where itemID = @itemIDi

and makes a string (by stringBuilder class) in which customerID separated by "|" from customerName and both separated by "||" from next customer's information :

while (sqlDR.Read())
{
    sb1.Append(sqlDR["customerID"]);
    sb1.Append("|");
    sb1.Append(sqlDR["customerName"]);
    sb1.Append("||");
}

In Client-Side

When the resulting string that contains related customer name & ID are returned back from the database, they are passed to the client-side function named: clientResponse. The name that defined the third argument of the GetCallbackEventReference method (a method to which the onchange event of the items list refers), the clientResponse client-side function gets it, and splits it to its parts and sets the rows variable:

var rows = result.split('||');

Then, by following the for loop, this is done for each element of rows: separate customerID from customerName and create an option tag:

document.createElement("option");

Where its value is customerID and its displaying customerName:

for (var i = 0; i < rows.length - 1; ++i)
{
    // Split each record into two fields.
    var fields = rows[i].split('|');
    var customerID = fields[0];
    var customerName = fields[1];
    // Create the list item.
    var option = document.createElement("option");
    // Store the ID in the value attribute.
    option.value = customerID;
    // Show the description in the text of the list item.
    option.innerHTML = customerName;
    lstCustomers.appendChild(option);
}

And finally, appends a new option element to ddlCustomers in JavaScript named lstCustomers by:

var lstCustomers = document.forms[0].elements['ddlCustomers'];

What Happens when the Client Selects an Item

When a client selects an item from ddlItems, the onchange event of this control occurs. This event refers to a client-side script by:

ddlItems.Attributes["onchange"] = eventRef;

In reality, the onchange event refers to a string (named eventRef) that is a reference to a client-side script by itself:

string eventRef = Page.ClientScript.GetCallbackEventReference(this,
 "document.all['ddlItems'].value", "clientResponse", "null", "ErrorFunction", true);

Continuing the story, when the client selects an item, the ID of a selected item (that is the value of selected-item in ddlItems) will be passed to the server method RaiseCallbackEvent and this method sets the value of a class variable earg by passing the value from the client as eventArgument parameter, then the server method GetCallbackResult gets related customers from the database by:

SqlConnection sqlC = new SqlConnection(
    ConfigurationManager.ConnectionStrings["cstr1"].ConnectionString);
SqlCommand sqlCom = new SqlCommand(
    "select customerID,customerName from customers where itemID = @itemIDi", sqlC);

sqlCom.Parameters.Add(new SqlParameter("@itemIDi", SqlDbType.Int));
sqlCom.Parameters["@itemIDi"].Value = this.earg;


sqlC.Open();
SqlDataReader sqlDR = sqlCom.ExecuteReader(CommandBehavior.CloseConnection);

and builds the string sb1 by:

while (sqlDR.Read())
{
    sb1.Append(sqlDR["customerID"]);
    sb1.Append("|");
    sb1.Append(sqlDR["customerName"]);
    sb1.Append("||");

}

and passes this string to the client by:

return sb1.ToString();

if there is an error, this error will be passed to the client by:

catch(Exception e1)
{
    throw new ApplicationException(e1.Message.ToString());

}

and the client will show it by:

function ErrorFunction(error , ctx)
{
    alert("The Event Failed Becuase " + error);
}

Finally, the above code contains what will occur on the client-side to fill the customers list named: ddlCustomers.

History

I guess there is no need for an updated version, however, if you have any problem or request that I can solve by the help of GOD, please send me a mail or comment.