Binding an ASP.Net Control to a Generic ListIn this tutorial I will show you how to bind ASP.Net Control to a Generic List or array of objects and control how they dispay.
.Net makes it very easy to bind its data objects to data controls, but sometimes, you may wish to bind a generic or even custom data structure to data control. This tutorial will show how to bind a generic data object and a custom class to data-bound controls to behave like the .Net native data structures.
Binding ASP.Net Control to a Generic List
In this first example, I will show you how to bind a simple List object to a drop-down box. First, we need some data so that I will create a static list of colours.
List<string> colours = new List<string>();
colours.Add("Black");
colours.Add("Slate Gray");
colours.Add("Midnight Blue");
colours.Add("Steel Blue");
colours.Add("Firebrick");
colours.Add("Purple");
colours.Add("Cyan");
colours.Add("Sea Green");
colours.Add("Dark Green");
colours.Add("Yellow");
colours.Add("Khaki");
colours.Add("Dark Orange");
colours.Add("Red"); Now, you may be tempted to loop through each item and add it to a list by creating a new list item:
foreach (string colour in colours)
lstColours.Items.Add(new ListItem(colour)); While this method will certainly get the job done, it is not the most efficient or correct way. Instead, you should bind the data to the list box, and that is done just like binding an ADO.Net DataSet.
lstColours.DataSource = colours; lstColours.DataBind();
This will produce a user-selectable list (ListBox, ComboBox, CheckListBox, etc.) of colours where the key and the value are both set to the colour name. While this may be the result you need, more often than not, you will need a separate value, or code, for each item, which you can later use. In this instance, you will need to use a generic data type that supports a key/value pair, such as a Dictionary or Hashtable.
Let us recreate the colours data list using a Dictionary using the HTML hex colour codes as the key.
Dictionary<string, string> colours = new Dictionary<string, string>();
colours.Add("#000000", "Black");
colours.Add("#657383", "Slate Gray");
colours.Add("#151B54", "Midnight Blue");
colours.Add("#4863A0", "Steel Blue");
colours.Add("#800517", "Firebrick");
colours.Add("#8E35EF", "Purple");
colours.Add("#00FFFF", "Cyan");
colours.Add("#4E8975", "Sea Green");
colours.Add("#254117", "Dark Green");
colours.Add("#FFFF00", "Yellow");
colours.Add("#ADA96E", "Khaki");
colours.Add("#F88017", "Dark Orange");
colours.Add("#FF0000", "Red"); When we bind the list to a control, we get a different and unexpected result, as shown in the image to the right. This is because the standard ToString() method of the Dictionary class will return the key and the value together - not what we were looking to get!
We need to tell the list box what to use as the key and what to use as the value. This is where it gets slightly confusing as the key of the colours object will become the value of the list item, and the value of the colours object will be the list item text.
lstColours.DataSource = colours;
lstColours.DataValueField = "Key";
lstColours.DataTextField = "Value";
lstColours.DataBind(); This will now result in a list that is shown like the first example, but the value of the selected item will be the hexadecimal colour code of the chosen colour!
Remember: Unless you tell the list otherwise, it will use the default .ToString() method to set both the item value and item text. You must use DataValueField and DataTextField to tell it which fields to use.
Control Data Binding to a Class
This technique can also bind a collection of classes to a list. For this to work, you need to specify the properties and values to be used as the key.
// The class we are going to use in this example
public class Customer
{
private string _accountNumber;
public string AccountNumber
{
get { return _accountNumber; }
set { _accountNumber = value; }
}
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
private string _address;
public string Address
{
get { return _address; }
set { _address = value; }
}
public Customer(string account, string name, string address)
{
_accountNumber = account;
_name = name;
_address = address;
}
public override string ToString()
{
return string.Format("{0} ({1})", Name, AccountNumber);
}
} This class defines three public properties: a constructor to make adding new items more straightforward and an override for the ToString() method. Next, we populate a list of Customer classes.
List<Customer> customers = new List<Customer>();
customers.Add(new Customer("123456", "Bob Smith", "1 Some Street"));
customers.Add(new Customer("789012", "Jane Doe", "2 Example Road"));
customers.Add(new Customer("345678", "John Smith", "3 Sample Lane"));
customers.Add(new Customer("901234", "Jane Fonda", "4 Sample Avenue")); We can bind this list to a list box control as before.
lstCustomers.DataSource = customers; lstCustomers.DataBind();
As seen in the previous examples, this default binding will use the ToString() method of the List item object. This is shown in the image to the right, which shows our overridden ToString() being used. As with the colours list, we can tell the list box which class properties to use for the key and the value.
lstCustomers.DataSource = customers;
lstCustomers.DataValueField = "AccountNumber";
lstCustomers.DataTextField = "Name";
lstCustomers.DataBind(); This will now bind the class property AccountNumber to the list item value property and the Name property of the class to the list item text.
In your C# code, when the form is submitted, you can retrieve the account number of the selected item from the list by accessing its SelectedItem property.
When binding complex data structures to ASP.Net controls, accessing the full record, not just the value and description, are often helpful. You can use the code below to get the complete list item from a list box data source.
protected void ListBox_OnClick(object sender, EventArgs e)
{
ListBox lb = sender as ListBox;
if (lb != null)
{
foreach (ListItem item in lb.Items)
{
object o = lb.DataSource;
List<Customer> data = o as List<Customer>;
// Now get the customer selected
Customer cust = data.Find(toFind => toFind.AccountNumber == item.Value);
// ...
}
}
} And that's how to bind generics to data controls!
