[RESOLVED] Help with client-side JavaScript code on ASP.NET (VB) page

[BruceG]

Hello,
The overall goal of this is to allow a user to select a school based on gender, grade, and state. The data we are dealing with is a school table with the following fields:
SCHOOL_NAME | STATE | BOY_FLAG | GIRL_FLAG | GR_K_FLAG | GR_1_FLAG | GR_2_FLAG ... GR_12_FLAG
(The flags are bit fields. A particular school may be boys only or girls only, and will only have a certain range of grades, depending on whether it is an elementary school, middle school, or high school.)
Sample data:
Academy of Our Lady, NJ, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, .....
Holy Redeemer High School, PA, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, .....
St. Mary's Academy for Girls, CT, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0 ...
St. Patrick Boys School, MD, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0 ...
We have about 2500 such records.

So on the web page we have 4 dropdowns:
ddlGender (to choose Boy or Girl)
ddlGrade (to choose a grade K thru 12)
ddlState (to choose one of the 50 US states)
ddlSchool (to choose a school that meets the gender, grade, and state criteria selected in the 3 dropdowns above)

The school dropdown should repopulate whenever one of the other 3 dropdowns changes.

This is currently working with standard server-side code - autopostbacks on the 3 dropdowns which runs a query to populate the school dropdown appropriately.

However, even with MaintainScrollPositionOnPostback="true", the postbacks cause a less-than-smooth experience for the user - especially when they navigate the dropdowns with the keyboard (for example on the grade dropdown, if they want to get to the desired grade by pressing the down arrow rather than dropping down the list and choosing with the mouse, then we get a postback on every keypress of the down arrow).

So, I'm looking for a client-side solution to avoid the postbacks. I'm stuck in the "old school" way of doing things, as I am not a rock star when it comes to AJAX, update panels, and the like. I'm wondering if something like the following is feasible (things were done this way on the classic ASP version of this site):
Do a one-time load of all the school data into Javascript array(s).
When the user changes the selection in the gender, grade, or state dropdown (i.e. the equivalent of "onchange" event), call a JS function to re-populate the school dropdown (which would loop thru the school arrays and add schools matching the criteria as entries ("<option>"s) to the school dropdown,.

If the above is feasible, I could use some guidance on how to structure the code (i.e. "on client click" syntax, "register client script" etc.). If not, I could use some recommendations on how to achieve the desired goal with the least amount of pain ...

Thanks,
Bruce

[KGComputers]

So on the web page we have 4 dropdowns:
ddlGender (to choose Boy or Girl)
ddlGrade (to choose a grade K thru 12)
ddlState (to choose one of the 50 US states)
ddlSchool (to choose a school that meets the gender, grade, and state criteria selected in the 3 dropdowns above)

The school dropdown should repopulate whenever one of the other 3 dropdowns changes.

So, I'm looking for a client-side solution to avoid the postbacks. I'm stuck in the "old school" way of doing things, as I am not a rock star when it comes to AJAX, update panels, and the like.

Hi,

You have several options to achieve that w/o page page postback. You either select Ajax Control Toolkit CascadingDropDown extender, jQuery Cascading Dropdown or Bootstrap Cascading Dropdown. Either one of them achieves your goal.

Do a one-time load of all the school data into Javascript array(s).
When the user changes the selection in the gender, grade, or state dropdown (i.e. the equivalent of "onchange" event), call a JS function to re-populate the school dropdown (which would loop thru the school arrays and add schools matching the criteria as entries ("<option>"s) to the school dropdown

Given that your background is on JavaScript and not on Ajax UpdatePanels and perhaps Bootstrap, the best scenario is to go with jQuery Cascading Dropdowns.

Reference: Cascading-DropDownList-using-jQuery-in-ASP.Net

- kgc

[BruceG]

Hi KGC - thanks very much. The reference you provided was very helpful - the guy there has a working example that I will be able to implement in my project (a set of cascading dropdowns for Continent / Country / City).

A word of caution however to anyone else who may have this question and stumbles on this link:
He provides both a C# and a VB version. When I ran the VB version, I got this error when I hit the "Submit" button:

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

However, in the C# version, I did NOT get that error.
After digging a little, I found that the C# version had "EnableEventValidation=false" whereas the VB version did not (i.e. the VB version defaulted to True). It would have been tempting to just put that line in the VB version, but from what I read, turning off event validation is not desirable - so I implemented "RegisterForEventValidation" on the dropdowns in question and that solved the issue.

Thanks again.