Table of Contents

Please read Fredrik Normén's fabulous introduction on client-call back before reading this. This brief tutorial is simply a more realistic example of using the technology which he explains.

Introduction

One of the new features in ASP.Net 2.0 is the ability to call server-side code from client-side code. While this isn't something new, a new simpler and cleaner mechanism is now available: client callback. The general idea is to have some type of hook, client-side functions (JavaScript) can use to utilize powerful server-side functions. A key benefit to this closing the gap on desktop applications with respect to cleaner, richer and more responsive applications. Fredrik Normén has a great blog entry explaining how it works and how to use it. This brief tutorial is simply written to showcase a more realistic example.

Compatibility

Its important to note that Client Callback uses XmlHttp, which, as far as I know, only works in IE. Hopefully workarounds and third party solutions aren't far away, which'll make this a truly powerful weapon to have in our arsenal.

Linked Drop Downs

The example I'll be doing will be a simple example of having values in a dropdownlist linked to values in another dropdownlist. A couple such examples would be a list of states/provinces for a selected country, or a list of departments in an organization. Our example will use the organization/departments example. Without using a method like client callback, we'd either have to dump large amounts of [hard to maintain] Javascript arrays and do a lot of client-side processing, or postback each time the value in the dropdownlist changed. Each solution, while workable, had some serious drawbacks. Using
JavaScript could quickly become unwieldy, posting-back can cause even the best surfers to be confused for a couple seconds.

Requirements

Our requirements are simple:

Two dropdownlists are displayed to users

The first dropdownlist contains all of the Canadian Governments Departments

The 2nd dropdownlist contains all of the primary sections within the selected department

A department may not have any sections

We cannot use postback, must only support IE, and have to keep the Javascript to a minimum

Basically, all our top-level departments will have a ParentId of NULL, while our sections will have a ParentId that is the same as their Departments OrganizationId. In your case you might have a many-many relationship, or your entities might not reside in the same table, in that case simply change the data-access code we'll be using, but the client callback code stays the same.

We get a datatable (we'll look at the GetOrganization() function next) [line: 3], get its default view [line: 4] and filter it so we only get our top-level Departments [line: 5]. We then do normal databinding stuff [line: 6-9] and add an option at the top for improved user-friendliness [line: 10].

There's really nothing fancy here. Notice though that we get all Departments/Sections, that's why we have to filter for ParentId IS NULL in the Page_Load. If your entities were in two separate table, you could get your top level entities here, and simply create a 2nd function for your child-entities, which we'll be using shortly.

Client Callback

Now we'll make all the changes necessary to make this magical callback work. Again, you really have to read Fredrik's blog before going on as I'm not going to go into any details.

The first thing we do is add to our Page_Load in order to hookup and register all our Client Callback code:

On [line: 12] we add an onChange JavaScript event to our dropdownlist so that it calls the GetChildren() Javascript function. This is the proxy-function to our server-side callback function. Notice that the first
JavaScript parameter will be the value of the selectedOption (in other words, the OrganizationId).d Next we use the Page to create the
JavaScript string that'll actually do the callback [line: 13]. We wrap the string in our proxy GetChildren Javascript function [line: 14]. Finally we register the script on the page [line: 15].

Again, there's really nothing fancy here. All we are doing is using the organizationId which is passed as eventArgument to get all sections who have a matching ParentId [line: 6]. We loop through the matching sections [line: 8] and create a string in the format of Id^Name|Id^Name|Id^Name [line: 9-12]. Finally we return our string [line: 14]. If anything went wrong or no records were found, an empty string will be returned.

The last step is to create our Javascript function that'll handle the return of our server-side function. Back in our modified Page_Load,we said this function would be named ClientCallBack:

We get a reference to our child dropdownlist [line: 3], clear out any existing values it might have had [line: 7] and split our string into id^name chunks [line: 12]. We then loop through each pair, and add a new option [line: 15], with the right text and value [line: 16, 17], to our child dropdownlist.

Observations

I just had a couple observations I wanted to pass along. These are possibly wrong and hopefully someone will correct me, but:

Note that you are limited to a single string argument into and out of your your server-side function. If you need to pass more, like we did coming out, you'll need to serialize the data somehow (using | is obviously a highly efficient serializing algorithm ;) ).

It would be really wonderful if in our codebehind

RaiseCallbackEvent

we could simply bind our ChildOrganization dropdownlist to our
DataView and not need any JavaScript, but that obviously can't work. The idea behind Client callback is to allow you to do server-side processing without postback, not rerender parts/all of the page.

As far as I can tell, RaiseCallbackEvent doesn't happen inside the same instance of the the actual request. If you set a private field during
Page_Load, you won't have access to it in RaiseCallbackEvent unless its static.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Please let me know "how to Insert, Select, Update data in SQLDatabase using comma split and Icallbackeventhandler from ASp.Net C#, like i have tree text boxes for (No,Name and salary) , two dropdownlists for(Designation,Department) and radio button list for Gender and Checkbox list for Preference of foods, there will be a button insert, once i click button it has to save in the sql table, so please help me i am very new to this, please reply as early as possible!

'AjaxDropDown' does not implement interface member 'System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string)'. 'AjaxDropDown.RaiseCallbackEvent(string)' is either static, not public, or has the wrong return type.

DJ:
I would strongly urge you to look at something othat than Client Callbacks. Either AJAX.NET or Microsoft's own Atlas. This article was written in the beta1/2 days of ASP.NET 2.0. Client callback is all but dead now.

How can I change selected index of the child list ? Suppose I show items of a category in the child list, and there is already one selected Item. Then I want to show Items of other different selected category, lstItem.SelectedIndex still have the old value. How can I change it.

Another option is to use XML data islands with client side javascript that accesses the DOM of the xml doc asynchronously sent from the server.
This may not be very secure since the xml docs would be downloaded to the client browser in this case.
I think this can be done any browser that supports xml.
XMLHTTP is definitely the way to go though since its more secure and flexible. I hope Whidbey does address this issue and provide a simpler framework.

Actually JSON is the way to go and if you review the best practices you will find this recommendation a couple of times. Also being secure depends on the server, if you are using HTTPS connection it's secure, else it isn't. In any case it's data handled on the client and I don't see any security problem problem with it. You can transmit data using JSON, XML or anyhow you like.

On a side note: Saying that XML is more flexible is really funny. I believe you should tell google that what they are using is inflexible and not secure because they are using a small javascript, not xml for their google suggest.