DropDownList

cbspira · January 20th, 2009, 12:53 AM

Hi all,
I've been taking a class in ASP.NET 3.5 using the Beginning ASP.NET 3.5 book by Imar Spaanjaars. For my final project I need to create my own asp.net web site.

I'm attempting to use a dropdownlist control to display a choice of States a user can select, but I don't want the user to be limited to the list - ie, I want the field to ultimately contain the value the user enters (in case they live in some random state/country I don't anticipate). I don't want the user's entry to be added to the data source either - the list is there as a guide, but there's no real relationship between the tables. In MS Access it would be easy - there's a "limit to list" property. I'm not noticing that availability here, and the only result google yielded was a solution to add to the underlying table - which I don't want my users to do.

Any suggestions?

Thanks,
Mrs. CB Spira

Old Pedant · January 20th, 2009, 03:18 AM

The limitation in ASP.NET is simply reflecting that same limitation in HTML.

What you are looking for is something that MS refers to as a "combo box", where you can *either* choose from a list or type in a new value.

But HTML has no such control now, really, anything similar.

Now, many people have used DHTML (that is, javascript in the browser) to implement this same functionality. And you can surely locate what you want in some JS library out on the net someplace. But integrating it with ASP.NET *probably* means either (1) NOT using an <asp:xxx> tag but instead just using HTML tags, which means you'd then use Request.Form to get the values instead of treating them as if they were elements in the ASP.NET page object or (2) finding or creating your own CUSTOM ASP.NET tag that does all the above for you, behind the scenes.

I would start by googling for something like "ASP.NET combo box custom tag". See what you come up with. Oh, what the heck...

I just did that, and the very first hit is something from "CodeProject" that looks pretty promising. Several other hits, so look around.

*****

Oops...that CodeProject combobox doesn't work right in FireFOx.

This one works better, though even it needs some tweaking of the CSS to make it look better:
http://www.metabuilders.com/Tools/ComboBox.aspx

Anyway, look around.

Imar · January 20th, 2009, 03:39 AM

In addition to what Old Pedant said, you can also take a look at commercial, third party products. For example Telerik has a ComboBox control that allows you to choose items from a list, and enter new ones.

http://demos.telerik.com/aspnet-ajax...DefaultCS.aspx

There are many other vendors that offer similar UI controls.Alternatively, you can have a simple ASP.NET DropDownList with an option "Other". As soon as you check that, you show (in an AJAX style UpdatePanel or with client side JavaScript) a TextBox that allows users to enter their state manually.

This is only part of the puzzle. After the UI control does what it needs to do, you have a few options to store the data in the database. Since it's likely you have all your states together (but don't want to automatically add new ones), let's assume you have a table called States with an Id and a Name column that holds the unique ID and the state's name.

When you insert, say, an address in the Address table, you typically store the StateId with it so you know to what state the address belongs.

But how do you deal with this new states you don't want to store in the State table? AFAICS, you have a few options:

1. *Do* store them in the State table, but mark them as "user entered" so you can filter those away when showing the official list. This is by far the easiest to implement as you can leave everything as is.

2. Give the Address table a StateId and a StateName column. When the user has selected an official state, you store the state ID; otherwise, you store the state's name. Less easy to do joins on the original States table as the new states won't be in that table. Using outer JOINs and COALESCE in SQL Server you can get a full list of addresses with their states, whether they were official or manually entered.

3. Always only store the StateName in the Address table. That way, you loose the benefit of referential integrity to the State table, but it might work for you in some cases.

As you can see, not so easy to implement in ASP.NET.... ;-)

Hope this gives you some ideas.

Cheers,

Imar

cbspira · January 20th, 2009, 12:15 PM

Thanks for the quick reply!

Quote:

Originally Posted by Old Pedant

The limitation in ASP.NET is simply reflecting that same limitation in HTML.

What you are looking for is something that MS refers to as a "combo box", where you can *either* choose from a list or type in a new value.

But HTML has no such control now, really, anything similar.

Yeah, I was realizing this :-) But thanks for spelling it out.

Quote:

Originally Posted by Old Pedant

This one works better, though even it needs some tweaking of the CSS to make it look better:
http://www.metabuilders.com/Tools/ComboBox.aspx
Anyway, look around.

I sure will - thanks for your help and the suggestion on how to search - I was so caught up on the "dropdownlist" aspect I forgot it was called "combo box" in Access...

Mrs. CB Spira

cbspira · January 20th, 2009, 12:24 PM

Thank you for the really prompt reply!

Quote:

Originally Posted by Imar

In addition to what Old Pedant said, you can also take a look at commercial, third party products.

Thanks for this idea, but it's for school, so a. I don't want (or have) money to spend and b. I don't know if my prof would want something commercial.

Quote:

Originally Posted by Imar

Alternatively, you can have a simple ASP.NET DropDownList with an option "Other". As soon as you check that, you show (in an AJAX style UpdatePanel or with client side JavaScript) a TextBox that allows users to enter their state manually.

This sounds very promising... There is another requirement for the project to have at least one custom user control, and I could not think of one to create - this may be it!

Quote:

Originally Posted by Imar

let's assume you have a table called States with an Id and a Name column that holds the unique ID and the state's name.

When you insert, say, an address in the Address table, you typically store the StateId with it so you know to what state the address belongs.

Actually, I'm not doing that even though it flies in the face of convention - I'm storing the state abbreviation (or full name if it's non-USA). If I decide to take this project beyond the classroom and implement it live, I wanted to have a postal code lookup to fill in the city, state, country - if I store the ID in the table now it will make it more complicated later...

Quote:

Originally Posted by Imar

3. Always only store the StateName in the Address table. That way, you loose the benefit of referential integrity to the State table, but it might work for you in some cases.

Yup, this is what I'm doing (see above).

I think I'll play around with Old Pendant's and your respective suggestions and see what works best.

Thanks for giving me the direction I needed...
Mrs. CB Spira

cbspira · January 20th, 2009, 10:01 PM

OK, so I spent the better part of today (ahhh, the joys of unemployment) trying to make this work. I toyed with using an html select object and managed to get it populated with my sql query, but I realized that I would be unable to add it to an update panel which would mess with my ability to test the value with each change in selection, so I switched back to using an asp:dropdownlist control coupled with the aforementioned text box.
Currently I have the textbox hidden and its value changes to reflect the value chosen in the dropdown list. If Other is chosen then the dropdownlist is hidden and the textbox is made visible waiting for the user's entry. (I haven't figured out how I want the user to be able to switch back to the list, but will shelve that for now).

Here's my question - I turned this into a user control with the value of the textbox being assigned to a public property called "ChosenState". I'm unsure, however, of the syntax on how to proceed - how do I access that property and bind it to the *itemtemplate and ultimately back to the appropriate field? I looked at how it's done for the dropdownlist control, but I couldn't figure it out...

Thanks,
Mrs. CB Spira

cbspira · January 21st, 2009, 11:45 AM

One more item, although it may be tied to the above question.
When I open the detailsview with an existing record already loaded, the combo box does not load with the contents of the field but rather with the first line of the combo box (which is "Please select...)
I realize that currently it's because the data has not been bound to the field yet, but will that happen automatically once the binding has occurred? Or will I need to change the control to reflect it?

Thanks,
Mrs. CB Spira

Imar · January 21st, 2009, 01:59 PM

Hi CB Spira,

How did you implement the User Control? Did you give it a property to set and get the selected item in the text box? If so, one common practice is to not use a backing variable or ViewState for state, but the control instead. Something like this (untested) shows what I mean:

Code:

 
Public Property State() As String
  Get
    If DropDownList1.SelectedIndex < 0 Or DropDownList1.SelectedValue = "Other" Then
      ' the other item is selected, or no option is chosen yet
      Return TextBox1.Text
    Else
      Return DropDownList1.SelectedValue
    End If
  End Get
  Set(ByVal Value As String)
    Dim myItem As ListItem = DropDownList1.Items.FindByValue(Value)
    If myItem Is Nothing Then
      ' Item not found in the list, so it must be a custom item
      TextBox1.Text = Value
    Else
      myItem.Selected = True
    End If
  End Set
End Property

This way, setting or getting the value is based on the actual data in the TextBox and DropDownList controls.Setting this property on the UC automatically reflects the changes in the TextBox and/or DropDownList control.

This examples needs a bit more work, though. For example, if the value is not in the list, the code now sets the TextBox's Text property. It would be a good addition to preselect the "Other" item in the DropDownList as well. However, I hope this shows you at least a way to start with this....

Cheers,

Imar

cbspira · January 21st, 2009, 03:02 PM

Oh, thanks for replying

I was afraid I'd have to wait till 2am

Quote:

Originally Posted by Imar

How did you implement the User Control? Did you give it a property to set and get the selected item in the text box? If so, one common practice is to not use a backing variable or ViewState for state, but the control instead. Something like this (untested) shows what I mean:

Ummm, I'm not sure I understand the lingo, but here's my code. It's similar to what you posted, except that I use the SelectedIndexChanged event to trigger the update:

Code:

 
  Protected Sub ddlStates_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles ddlStates.SelectedIndexChanged
    
    Dim ddlValue As String = ddlStates.SelectedValue.ToString()

    If ddlValue = "Other" Then

      txtChosenState.Text = ""
      ddlStates.Visible = False
      txtChosenState.Visible = True
      txtChosenState.Focus()

    Else
      txtChosenState.Text = ddlValue
    End If

  End Sub

  Public Property ChosenState() As String
    Get
      Return txtChosenState.Text
    End Get
    Set(ByVal value As String)
      txtChosenState.Text = value
    End Set
  End Property

I think this accomplishes what you're talking about...

Quote:

Originally Posted by Imar

For example, if the value is not in the list, the code now sets the TextBox's Text property. It would be a good addition to preselect the "Other" item in the DropDownList as well.

I lost you

The way it's currently implemented, the only way a value will not be in the list (at lest on the initial entry) is if Other has been selected - otherwise, the text box is not visible, and the user has no way of entering a value not in the list. Also, once Other is selected there currently is no way to return to the drop-down list. (Since I'm not tying the ultimate value back to the ID in the DB, it's not a big deal if the user enters a state name that's already in the list once they hit the text box)... And if we're dealing with a case where the value already exists (eg, an already populated record) then I need the value to be displayed somehow. Which returns me to my question: how to I access the property in the *itemtemplate entries? I've been looking all over the net and can not find the answer... and once it's been accessed, how do I display it as the default for the control in addition to providing the dropdown list?

Thank you for your help...
Mrs. CB Spira

Imar · January 21st, 2009, 03:42 PM

Quote:

The way it's currently implemented, the only way a value will not be in the list (at lest on the initial entry) is if Other has been selected - otherwise, the text box is not visible, and the user has no way of entering a value not in the list.

Quote:

And if we're dealing with a case where the value already exists (eg, an already populated record) then I need the value to be displayed somehow.

That's exactly what my example was for: if you set the ChosenState property on the User Control, it automatically updates the TextBox control and the DropDownList...

You can access the User Control similar to how you refer to other controls: using FindControl. Not sure where you're going to use it, but for example in the RowUpdating event of a GridView you can do this:

Code:

 
Dim myControl As NameOfUserControl = CType(GridView1.Rows _
                        (e.RowIndex).FindControl("NameOfUserControl1"), NameOfUserControl)
Dim something As String = iet.ChoseState

Binding the data is the same as with other controls in an ItemTemplate:

Code:

 
<ItemTemplate>
  <uc1:NameOfUserControl1 ID="NameOfUserControl1" runat="server" ChoseState='<%# Eval("State") %>' />
</ItemTemplate>

I wasn't trying to confuse you with the lingo. I think most of what I explained is already in your control. Normally you use a private variable as the "backing store" for a property; that variable holds the internal value while the property just allows you to get and set it. Instead of a backing variable, you can use controls in the page, as shown in my own and your example.

Hope this clarifies things a bit...

Imar