ASP.NET Overview of Binding a DropDownList to a FormView

If you use (or want to use) .NET WebForms databinding then you know that dropdown lists can be tricky to populate and mange. For example, say you have a FormView control with an embedded DropDownList control that you want to bind and pre-select when someone views the form. It’s not immediately intuitive how to do so, but it’s really quite straightforward.

Here’s how:

1. First, drag the FormView control onto your WebForm and then add a DropDownList control.
2. Then drag two DataSource controls onto your WebForm and assign one to your FormView control and the other to your DropDownList control along with SQL queries to populate both.
3. Set the DataTextField and DataValueField parameters for your DropDownList. The DataValueField parameter is what gets passed to your form and back to the database behind the scenes, while the DataTextField parameter is what is displayed to users of your form in the DropDownList control’s options. You will want to set them with the names of the database fields that your DataSource is retrieving
4. Finally, add a parameter called SelectedValue to your DropDownList control. Make sure you either Bind or Eval the SelectedValue parameter to the name of the field from your database that your FormView control & DataSource is working with. Just to review: Bind reads and writes and Eval only reads from the DataSource.

Here’s an example of what your DropDownList control should look like:

<asp:DropDownList ID="ddlTestList" runat="server" DataSourceID="SqlDSTestList" DataValueField="Id" DataTextField="Desc" SelectedValue='<%# Eval("TestId") %>' ></asp:DropDownList>

One important thing to note

The above binding method will throw an error on your WebForm if the value returned from the database is not present in the list of options of the DropDownList control. Sometimes this is desired since you don’t want bad data corrupting your form, but other times you do want your form to ignore this problem and simply show a blank selection. In that case the form becomes self-correcting when the user saves the form with the incorrect data.

Below is an example of how to hook up a DropDownList control to a SqlDataSource control with a blank option at the top. If the value returned from the FormView control is not present in the list of options for the DropDownList control, then this example will not cause a page error message, but will simply show the blank option selected.

<asp:DropDownList ID="ddlTestList" runat="server" DataSourceID="SqlDSTestList" DataValueField="Id" DataTextField="Desc" SelectedValue='<%# Eval("TestId") %>' ></asp:DropDownList>
 <asp:SqlDataSource ID="SqlDSTestList" runat="server" ConnectionString="<%$ ConnectionStrings:ConnTest %>"
 ProviderName="<%$ ConnectionStrings:ConnTest.ProviderName %>" EnableCaching="false"
 SelectCommandType="Text" SelectCommand="SELECT '' [Id], '---' [Desc]
 UNION
 SELECT DISTINCT [ServiceLevelCd] [Id], [ServiceLevelCd] [Desc]
 FROM [TestTable]
 ORDER BY [Desc]">
 </asp:SqlDataSource>

Of course this can all be done programmatically as well, but I enjoy the speed available to the programmer when developing WebForm solutions using simple control drag and drop binding.

I hope this overview of binding DropDownList controls has been useful. Please leave your comments in below, I’m always happy to receive feedback!