Using Javascript to detect when a user has selected an item in an ASP.NET listbox

Question

Hello all,

I am developing an ASP.NET web application that incorporates google maps. I have an ASP.NET listbox on my page which contains a list of items. When the user selects one of the items, I'd like to show this item on the map. The main complication lies in the fact that google maps uses javascript to control it and the listbox is a server control.

I can think of two ways to do this. The first would involve the listbox calling a javascript function when the user selects a new item. I can then write this function to perform the necessary map operations. Unfortunately, the OnSelectedIndexChanged property of the listbox doesn't seem to support javascript functions.

The second involves wrapping an UpdatePanel around the listbox and getting the listbox to perform a postback. In the SelectedIndexChanged event in VB/C#, I would the need to somehow make a call to a javascript function which would then update the map.

Which solution can I use?

Thanks

--Amr

Answer 1

You could simply embed javascript into your page, avoidig relying on ASP with it. Put the code into your document body:

<script language="javascript">
body.onload=function(){
    var lb=document.getElementById("yourlistboxid");
    lb.onChange = function(){
       // put your handling code here
    }
}
</script>

Answer 2

In your codebehind (in your pageload) just add a javascript handler to the OnChange attribute that points to your javascript function. Eg:

lbYourListBox.Attributes.Add("onChange", "UpdateYourMap();");

You could also add this to your control using inline javascript as well but I prefer to do it in the codebehind so that the framework can handle matching up the names.

Answer 3

to demo the other approach, here's a rough guide:

void listbox_SelectedIndexChanged( ... ) {

    string js = string.Format("callToMapsFunction({0});", listbox.SelectedValue);
    string scriptKey = "mapscript";

    ScriptManager.RegisterStartupScript( listbox, typeof(ListBox), scriptKey
        , js, true);
}

RegisterStartupScript runs whatever javascript you give it after the partial postback completes. you don't necessarily have to pass the listbox value- just whatever data you want to provide to the maps api. the first 3 items are for preventing the script from registering a bunch of times (as far as I know). the true at the end tells the scriptmanager to automagically add opening and closing tags around your js code.