Dynamic Dropdown Lists 1

Objectives You will be able to Use Dropdown Lists to solicit multiple choice user input in an ASPX web page. Populate a Dropdown List at run time using data from a file. 2

DropDownList The ASPX DropDownList generates an HTML Select control. A good way to get a user input from an extensive set of discrete choices. The list should not be too long. If there are many choices divide it into subsets. Use one DropDownList to select the subset. Use a second DropDownList to select from the subset. Second DropDownList must be dynamically populated based on choice from the first. 3

Example Select a city from a list of 275 largest US cities and display its population. Let first DropDownList select a state. Second DropDownList includes just the cities in that state. 4

Largest US Cities 5

Data File Download to desktop: File cities.csv 6

7 Dropdown List Demo Create a new C# ASP.NET empty web site. Name: Dropdown_List_Demo

Add Default.aspx 8

9

Add New Folder 10

New Folder for the Data File In Visual Studio Rename the new folder App_Data. Note: This name is significant. Open the App_Data folder in the website folder and copy the downloaded file cities.csv into it. 11

The App_Data Folder 12

Add Data File to the Project Back in Visual Studio, right click on App_Data and add the file cities.csv to the project. 13

Add cities.csv to the Project Select “All Files”

cities.csv in the Project 15

16 Class City Let’s create a class to hold information about a city. An Entity class Frequently used to create objects corresponding to information in a database. Object-Relational Mapping Automated tools are available Best to do manually until you have a thorough understanding. (This is an especially simple example.)

17 Class City

Add Class City 18

Add Class City 19

Class City using System; public class City : IComparable { public int rank; public String name; public String state; public int population; public City(string line) { string[] info; info = line.Split(','); rank = int.Parse(info[0]); name = info[1]; state = info[2]; population = int.Parse(info[3]); } public int CompareTo(City other) { int result = string.Compare(this.state, other.state); if (result == 0) { result = string.Compare(this.name, other.name); } return result; } } 20 In order for us to use the sort method for List, the City class must implement the IComparable interface and provide a CompareTo method.

Design the Page 21 ddlState ddlCity

Read the Data On Page_Load Read the file cities.csv Create a City object from each line. Add the City objects to a list. Sort the list by state name then city name. Save the list as an Application variable. Populate the State Dropdown List. It will never change. 22

Default.aspx.cs using System; using System.IO; using System.Collections.Generic; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { List cities = new List (); 23

Default.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (Application["cities"] == null) { string path = Server.MapPath("App_Data/cities.csv"); using (StreamReader readFile = new StreamReader(path)) { string line; while ((line = readFile.ReadLine()) != null) { City city = new City(line); cities.Add(city); } } cities.Sort(); Application["cities"] = cities; } else { cities = (List )Application["cities"]; } 24

Default.aspx.cs (continued) if (IsPostBack) { return; } // Initial page load only ListItem li = new ListItem("", ""); ddlState.Items.Add(li); string prev_state = ""; foreach (City city in cities) { if (city.state != prev_state) { // Add state to dropdown list. li = new ListItem(city.state, city.state); ddlState.Items.Add(li); prev_state = city.state; } } 25 Build and run.

Dropdown_List_Demo in Chrome 26 Note scrollbar on Dropdown List

Add Event Handler When the user selects a state, populate the City list with cities in that state. Need an event handler for Selected Index Changed. Double click on the States Dropdown List in the designer. Visual Studio adds event handler to Default.aspx.cs 27

SelectedIndexChanged Event Handler Start with a stub. protected void ddlState_SelectedIndexChanged(object sender, EventArgs e) { string selected_state = ddlState.SelectedValue; lblPopulation.Text = "You selected " + selected_state; } Try it! 28

Page in Chrome 29 State selected. Nothing happens! What’s wrong?

Nothing Happens There is no postback when an item is selected from ddlState. We need AutoPostback. 30

Set AutoPostBack 31 Try again

Works as Expected 32 Add code to populate the City DropDownList.

Populate ddlCity protected void ddlState_SelectedIndexChanged(object sender, EventArgs e) { string selected_state = ddlState.SelectedValue; ddlCity.Items.Clear(); ListItem li = new ListItem("", ""); ddlCity.Items.Add(li); foreach (City city in cities) { if (city.state == selected_state) { li = new ListItem(city.name, city.name); ddlCity.Items.Add(li); } } } 33

ddlCity Populated 34 Add a SelectedIndexChanged event handler for ddlCity and set AutoPostBack.

ddlCity Event Handler protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e) { int population = 0; foreach (City city in cities) { if (city.name == ddlCity.SelectedValue) { population = city.population; break; } } lblPopulation.Text = "Population of " + ddlCity.SelectedValue + " is " + population.ToString(); } 35 Try it!

Select Tampa 36

Result 37

A Rough Edge When we select a new state, the previous city population stays on the page until we select a new city. Solution: Clear the label on SelectedIndexChanged. 38

A Minor Bug What happens if user selects the blank entry at the beginning of the list? (after selecting a nonblank entry) 39

A Minor Bug 40

Solution Check for this and ignore the event. protected void ddlState_SelectedIndexChanged(object sender, EventArgs e) { lblPopulation.Text = ""; if (ddlState.SelectedIndex == 0) { return; }... protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e) { lblPopulation.Text = ""; if (ddlCity.SelectedIndex == 0) { return; }... 41

Works as Expected 42 Blank initial item selected.

Summary We can populate a DropDownList with information determed at run time. Contents of a file. Information determined by user input. If we need an immediate action when the user selects an item, set AutoPostBack to true. End of Presentation 43