Using an XMLDataSource with a DropDownList Control

If you work a lot with ASP.NET then it’s likely that at some point or another you will ask yourself how to hook up an XML Data Source with a DropDownList control.

This just makes sense if you want to manage your drop-downs from a file rather than from a database, and carries a range of advantages. For example, not having to go through a DBA to update a simple DropDownList item would be a good reason in my books.

So how’s it done?

First things first, set up an XML file in Visual Studio. Here’s how to do this in Visual Studio 2010:

1. Right-click on your Web site in the Solution Explorer window and select the Add New Item option.
2. If you want to keep your XML files organized, then you could create a folder first in your Web site and then right click the folder and select the Add New Item option. In this case I will create a folder called Constants in which I’ll keep all of my XML files.
3. You will see a window pop open that is called Add New Item. In the list of file types of the Add New Item window scroll to the bottom and select the XML File option.
4. Then in the Name field, type the name you want to give to your XML file. In my case I will name the file Fields.xml
5. Finally click the Add button and you will see the new XML source file in your solution.

Once you have your XML file created you need to populate it with valid XML. I’ll create a simple example structure as follows:

<?xml version="1.0" encoding="utf-8" ?>
<Criteria>
 <Field Id="TestId" Value="TestId">
 <FieldName>TestId Name</FieldName>
 <FieldRegion>DropDownInfo</FieldRegion>
 </Field>
 <Field Id="testing 123" Value="testing 123">
 <FieldName>Here is a test</FieldName>
 <FieldRegion>DropDownInfo</FieldRegion>
 </Field>
 <Field Id="bad data" Value="3">
 <FieldName>Here is data that should not appear</FieldName>
 <FieldRegion>JunkData</FieldRegion>
 </Field>
</Criteria>

From the XML above  you can see that there are three fields. I have set the FieldRegion element to be DropdownInfo (ie: information that we want to show in our DropDownList), and the third field is marked with a FieldRegion element set to JunkData (meaning that it should not appear as an option in our DropDownList).

Adding the XMLDataSource to your page

So now you need to add the XMLDataSource to your Web Form. To do so, just open the Data section under the left hand Toolbox pane in Visual Studio. You should see the XMLDataSource  data source option directly beneath the SQLDataSource option.

Drag the XMLDataSource onto your Web form and click the option on the Visual Designer to configure your XMLDataSource. This will give you your configuration window with three fields you can enter:

1. The Data File Path
2. The TransForm File (we will not need to worry about this field in this example)
3. The XPath Expression

Providing the Data File Path

The Data File Path is the path on your Web site to the XML file you created. In this example we created an XML file called Fields.xml in a folder called Constants. The Constants folder is located directly in the root folder of our Web site.

The easiest way to provide the file path is to click the Browse button beside the Data File Path field and browse to the file we created.

Alternately you can type the relative path into the Text Box as:

~/Constants/Fields.xml

Providing the XPath Expression

The next step is to provide the XPath Expression. In our case we want to point at the attributes Id and Value that are in the FieldRegion XML element. Furthermore, we want to filter our results so that we only see nodes containing the FieldRegion text DropDownInfo. We want to screen out our node containing the FieldRegion text JunkData.

To do this we write the following expression into the XPath Expression Text Box:

Criteria/Field[FieldRegion/text()='DropDownInfo']

What this expression means is that within the node structure Criteria -> Field there is an element called FieldRegion, and in that element we only want to return results for the text DropDownInfo.

It can of course get more complicated than this, but this is the basic way to set up your XMLDataSource.

Adding the DropDownList and Hooking it up to the XMLDataSource

Now that you have created and populated your XML file and have added the XMLDataSource to your page you can hook up a DropDownList to it. To do so first drop a new DropDownList  onto your page from the Standard Controls list in the Visual Studio Toolbox.

Once the control is on your page you need to configure it to get its data from the XMLDataSource. Likely you will also want a default option in your list that is blank.

You can edit the options for the DropDownList using the Properties pane in Visual Studio, or directly by viewing the source of your page. Personally at this point I like to work with the page source so the instructions below will assume that you are viewing the page source.

Here are the options to set in your DropDownList control:

1. For starters add a new blank ListItem option to your DropDownList to show by default.
2. Then to make sure the blank default is not erased, set the option AppendDataBoundItems to be true.
3. Then set the DataSourceID of the DropDownList to the name of your XMLDataSource control. In my case I named it XmlDSAdditionalInfo.
4. Then you can set the DataTextField and DataValueField options to the Id and Value attributes of the Field elementin the XML file.

Here is the code for your new DropDownList

<asp:DropDownList id="ddlTest" runat="server" SelectedValue='<%#Bind("Field") %>'
AppendDataBoundItems="true" 
DataSourceID="XmlDSAdditionalInfo" 
DataTextField="Value" 
DataValueField="Id">
<asp:ListItem Value=""></asp:ListItem>
</asp:DropDownList>

It’s just that simple. Of course you can get fancier with a more complicated XML structure or filters, but this article explains the basics of using an XML file to drive your ASP.NET DropDownList controls