Tuesday, April 17, 2012

ASP.Net: Dependent DropDownList filters

Twice now I've had to build forms with multiple cascading DropDownLists, each one filtering the next. So the list of values in the second DropDownList depend on the selection in the first, the list of values in the third depend on the selection in the second, etc.
First I tried using just code in the .aspx file, with the SelectCommand of the SqlDataSource for the second DropDownList using a ControlParameter based on the first DropDownList.  If I set the AutoPostBack of the first list to "true", then when I updated the first, the second would filter correctly.  That was good.
But I found it would only work the first time a value was selected in a DropDownList.  After that I couldn't get a list's values to change again. In other words, when I first loaded the form and chose a value for first DropDownList, the second would populate...when I chose a value for second, the third would populate...but if I then changed the value of the second, I couldn't get the third to re-populate again. It always got stuck with the first set of values that were DataBound to it.
So I built a small function called RebuildDropDown that I call from the OnSelectedIndexChanged handler in the .aspx.cs file. In the handler for a given DropDownList, I call RebuildDropDown for each dependent list.  Here is the code example for a School/Class/Student set of filters.  Each DropDownList should have its SelectCommand and DataSource set elsewhere and should have AutoPostBack set to "true" and use handlers similar to these for OnSelectedIndexChanged
protected void SchoolBox_SelectedIndexChanged(object sender, EventArgs e)

protected void ClassBox_SelectedIndexChanged(object sender, EventArgs e)

protected void RebuildDropDown(DropDownList ddl)

    // OPTIONAL: add "ALL" option as first option
    ListItem li = new ListItem("All", "ALL");

    // now add databound items

Wednesday, April 4, 2012

SSL: Resources loading http vs. https

I went to view the SSL certificate on one of my sites today and ended up learning a few things about SSL / https and Google's Chrome browser. I knew that if I clicked the lock next to https in the address bar that it would display information about the certificate, like the issuer name and expiration date.  In this case it also had a warning for me that said "However, this page includes other resources which are not secure." Basically this means that although your main page is loading securely encrypted with https, some resources, like images or scripts, are loading via http so they are not secure and are loading unencrypted.

So the first thing I learned is how to tell which resources are loading without https.  There are actually a couple ways to do this in Chrome, but here is the one I used:

1) In Wrench menu, choose Tools > Developer tools

2) Click on "Resources" toolbar icon

3) Expand the Frames folder to see the different pages. Expand the page whose resources you want to see. The individual Resources for the page are then listed, broken down by Images, Scripts, and Stylesheets

4) To see the URL that was used to load that resource, just hover the mouse over the resource name and the URL will appear, either with http or https. You can also click on an image name to see the image on the right side, along with its URL

For me, some of the culprits were background images with absolute URLs in the CSS page.

So once you change all the resources loading with http to https, then you would think that message should go away when you refresh the page, right?  Actually, you have to fully close the browser and then open it back up and go to the page again for the warning to clear.  That was the second thing I learned.  I learned that on StackOverflow.

And lastly, there is also a visual cue in the address bar so that you can tell whether everything is loading securely without having to click the lock and look for the message.  When all resources are loading securely with https (and you've closed and reopened the browser and reloaded page) then the lock and the "https" text in the address bar will be green:
If you have images that are not loading securely, the lock is white and has a little yellow warning icon on it:
And when you have a script that is not loading securely, you get a white lock with a red X and red https text: