Dreamweaver & DropDownList in ASP.NET

This one is a dandy. ASP.NET has ways to do all this but the learning curve is steep and long. Fortunately there is a kludgy work around.

The Challenge

Select Year All Years 2005 2006 2007 Here is a nice simple HTML drop down list.

I needed one of these in an ASPX (ASP.NET) page on an automotive site and I needed to pull the model years from a database. Strangely manufactures now have up to three different model years of some products available at the same time, it's a sales thing.

Two of the entries are added manually and the remainder come from the database of available models. (No, not in this page's code, this is just a quick HTML page).

I made a standard DW SQL data query using DW's tools. Works fine and gives me a data set named 'Years.' I have not dug into DW's code to see if they query the DB on every post back, I suspect they do. So, how they are doing things won't match up with what most books and web sites are telling you for how to do these lists.

DW has an ASP.NET section in their Insert Menu. In it is an ASP:DropDownList. DW inserts code that looks like this:

Remember.   This code is wrapping on this page but in real pages its all on one line.

The <asp:DropDownList is the tag portion. ID is obviously the item's ID for the DOM. AutoPostBack causes the page to be submitted when the value changes. DataSource is the data pulled from the DB and refers to my 'Years' data and a default view of the data. The DataTextField and DataValueField tell the tag which fields in the data to use for Text and Value in the list. Great I've got the years in.

Now I want to add a 'Select Year' and a value for 'ALL Years'. Now the problems start, unless you've read the manuals. Don't start typing in this code yet. There are gotcha's in it and I'll show you how to go around them as we proceed.

You can use DW Hints to get the right syntax. Start typing <asp:

What you are looking for is ListItem or <asp:ListItem> When you have it entered correctly your code will look something like this:

The tag goes inside the DropDownList tag. The result is this:

I got a bit wild with the spacing but you can see what it is supposed to be. Many web tutorials show you how to use this ListItem tag. When you try it, you will find that it does not work. The entries do not appear in the list. You need another value to make them appear. In the DropDownList tag you need to add AppendDataBoundItems="true" to get them to appear. Unfortunately DW did not include AppendDataBoundItems in their code hints fro this tag so you have to learn about it on your own. But in DW pages this causes another problem.

Since it seems DW is reading the DB on each post back, the years keep increasing. After a few post backs the List looks like the one to the left.

The correction, of course, is to have written the page correctly. What DW did is of debatable correctness. But you would have to give up letting DW make the DB connection and the data set to avoid what they have done to the AppendDataBoundItems in this instance. If you have learned VB and Visual Studio, no problem. Otherwise we need a quick fix. There is one. Come on spaghetti code!

You can take the ListItem's out. We won't use them. They are fine for manually made static lists and non-DW coded pages. For our dynamic list we need to write some code. There is a method in LISTS that will let us add items via programming code. DW's data sets are LISTS so we can use Items.Insert(). We need to tell it which list to use so the real code looks like:

modelYear.Items.Insert(0, new ListItem("Select Year", "0"))

There is an abbreviated version that looks like:

modelYear.Items.Insert(0, "Select Year")

In the abbreviated case the list's Value will equal the Text. Most of the time that is OK. The completed code looks like this:

The line with SelectedIndex is used to set the list to the users selection after post back. This is only necessary on the first page load not on post backs. ASP.NET handles maintaining the users selection.

It is actually not that bad, once you see it and learn all those trick little words.

Previous - Next