Radical Development

Series DropDownList: Binding XML Data to a DropDownList

Amazon ImageWho doesn’t love XML? Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards.  The design goals of XML emphasize simplicity, generality, and usability over the Internet. It is a textual data format with strong support via Unicode for the languages of the world. Although the design of XML focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services. Bottom line XML is easily created, consumed, and understood.

In this article we will focus on the basic idea of binding XML data to a DropDownList. When it is all said and done your DropDownList will look similar to the following example.

dropdown list bound with xml data

XML Source

First we need a XML file. In this example we have XML that contains countries, regions, and cities.

<?xml version="1.0" encoding="utf-8" ?>
<Countries>
<Country name="Korea">
<Region name="South Korea">
<City>
Seoul
</City>
<City>
Taegu
</City>
<City>
Songtan
</City>
</Region>
</Country>
<Country name="USA">
<Region name="California">
<City>
Los Angeles
</City>
<City>
Bakersfield
</City>
<City>
Oakland
</City>
<City>
San Diego
</City>
</Region>
<Region name="Missouri">
<City>
Kansas City
</City>
<City>
St. Louis
</City>
</Region>
<Region name="Texas">
<City>
Dallas
</City>
<City>
Houston
</City>
<City>
San Antonio
</City>
</Region>
</Country>
</Countries>

Web Form

Next you need to create your form and add the necessary DropDownList that you will be working with, here I have three:

  1. Country
  2. Region
  3. City
<label for="ddlCountry">Country:</label>
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" Width="160px">
</asp:DropDownList>
<label for="ddlRegion">Region:</label>
<asp:DropDownList ID="ddlRegion" runat="server" AutoPostBack="True" Width="160px">
</asp:DropDownList>
<label for="ddlCity">City:</label>
<asp:DropDownList ID="ddlCity" runat="server" Width="160px"></asp:DropDownList>

Code Behind

So at this point we are ready to begin the process of retrieving and binding the data we will to consume. Before we do this it is important to point out the class will performs the work when it comes to interfacing with the XML file. You will see in the class RetrieveDataFromXML a number of methods which returns a list of countries, regions, and finally cities.

public class RetrieveDataFromXml
{
public RetrieveDataFromXml() { }

private static string strXmlPath = HttpContext.Current.Server.MapPath(
"App_Data") + "\CustomDataSource.xml";

public static List<string> GetAllCountry()
{
XmlDocument document = new XmlDocument();
document.Load(strXmlPath);
XmlNodeList nodeList = document.SelectNodes("Countries/Country");
List<string> list = new List<string>();
foreach (XmlNode node in nodeList)
{
list.Add(node.Attributes["name"].Value);
}

return list;
}

public static List<string> GetRegionByCountry(string strCountry)
{
XmlDocument document = new XmlDocument();
document.Load(strXmlPath);
XmlNodeList nodeList = document.SelectNodes(
"Countries/Country[@name='" + strCountry + "']/Region");
List<string> list = new List<string>();
foreach (XmlNode node in nodeList)
{
list.Add(node.Attributes["name"].Value);
}

return list;
}

public static List<string> GetCityByRegion(string strRegion)
{
XmlDocument document = new XmlDocument();
document.Load(strXmlPath);
XmlNodeList nodeList = document.SelectNodes(
"Countries/Country/Region[@name='" + strRegion + "']/City");
List<string> list = new List<string>();
foreach (XmlNode node in nodeList)
{
list.Add(node.InnerText.ToString());
}
return list;
}
}

Now all that remains is to begin to populate the DropDownList once the web page is rendered.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Bind Country dropdownlist
BindddlCountry();
ddlRegion.Enabled = false;
ddlCity.Enabled = false;

// Insert one item to dropdownlist top
ddlRegion.Items.Insert(0, new ListItem("Select Region", "-1"));
ddlCity.Items.Insert(0, new ListItem("Select City", "-1"));
}
}

public void BindddlCountry()
{
List<string> list = RetrieveDataFromXml.GetAllCountry();
ddlCountry.DataSource = list;
ddlCountry.DataBind();
ddlCountry.Items.Insert(0, new ListItem("Select Country", "-1"));
}

Conclusion

At the end of the day consuming and binding data via XML is really no different that a traditional datasource such as a database. If you’re not familiar with the XmlDocument Class then be sure to head over to MSDN and check out the documentation.

Author: Steven Swafford

Highly motivated information technology professional with 16+ years of experience. Working as a software engineer Steven develops and maintains web based software solutions. As a skilled professional he is focused on the design and creation of software. Because communication skills are extremely important Steven continues to expand his knowledge in order to communicate clearly with all facets of business. Recently Steven has been leading efforts to standardize software development tools and technology, plans and coordinates web accessibility as applied to IT Solutions, and he is tackling application security in terms of best practices and implementation of the Security Development Life-cycle.

Comments are closed.