Using the Code
If you want to see the result on your own machine, you can download the above (.zip) file .
ddlCallBack.aspx.cs
Collapse
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)
{
var fields = rows[i].split('|');
var customerID = fields[0];
var customerName = fields[1];
var option = document.createElement("option");
option.value = customerID;
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:
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.