BEST GLOBAL BRANDS Ranking: brands-2008/best-global-brands-2010.aspx.
Dynamic Dropdown Lists 1. Objectives You will be able to Use Dropdown Lists to solicit multiple...
-
Upload
jocelin-waters -
Category
Documents
-
view
223 -
download
0
Transcript of Dynamic Dropdown Lists 1. Objectives You will be able to Use Dropdown Lists to solicit multiple...
![Page 1: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/1.jpg)
Dynamic Dropdown Lists
1
![Page 2: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/5.jpg)
Largest US Cities
http://en.wikipedia.org/wiki/List_of_United_States_cities_by_population
5
![Page 6: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/6.jpg)
Data File
Download to desktop: http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downl
oads/
File cities.csv
6
![Page 7: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/7.jpg)
7
Dropdown List Demo Create a new C# ASP.NET empty web site.
Name: Dropdown_List_Demo
![Page 8: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/8.jpg)
Add Default.aspx
8
![Page 9: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/9.jpg)
Add Default.aspx
9
![Page 10: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/10.jpg)
Add New Folder
10
![Page 11: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/12.jpg)
The App_Data Folder
12
![Page 13: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/14.jpg)
Add cities.csv to the Project
Select “All Files”
![Page 15: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/15.jpg)
cities.csv in the Project
15
![Page 16: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/16.jpg)
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 http://en.wikipedia.org/wiki/Object-relational_mapping
Automated tools are available Best to do manually until you have a thorough understanding.
(This is an especially simple example.)
![Page 17: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/17.jpg)
17
Class City
![Page 18: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/18.jpg)
Add Class City
18
![Page 19: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/19.jpg)
Add Class City
19
![Page 20: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/20.jpg)
Class Cityusing System;
public class City : IComparable<City>
{
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<City>, the City class must implement the IComparable<City> interface and provide a CompareTo method.
![Page 21: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/21.jpg)
Design the Page
21
ddlState ddlCity
![Page 22: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/22.jpg)
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
![Page 23: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/23.jpg)
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<City> cities = new List<City>();
23
![Page 24: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/24.jpg)
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<City>)Application["cities"];
}24
![Page 25: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/25.jpg)
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;
}
}
25Build and run.
![Page 26: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/26.jpg)
Dropdown_List_Demo in Chrome
26
Note scrollbar on Dropdown List
![Page 27: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/27.jpg)
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.cs27
![Page 28: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/28.jpg)
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 29: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/29.jpg)
Page in Chrome
29
State selected.
Nothing happens!
What’s wrong?
![Page 30: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/30.jpg)
Nothing Happens
There is no postback when an item is selected from ddlState.
We need AutoPostback.
30
![Page 31: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/31.jpg)
Set AutoPostBack
31Try again
![Page 32: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/32.jpg)
Works as Expected
32
Add code to populate the City DropDownList.
![Page 33: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/33.jpg)
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
![Page 34: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/34.jpg)
ddlCity Populated
34
Add a SelectedIndexChanged event handler for ddlCity and set AutoPostBack.
![Page 35: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/35.jpg)
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!
![Page 36: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/36.jpg)
Select Tampa
36
![Page 37: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/37.jpg)
Result
37
![Page 38: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/38.jpg)
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
![Page 39: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/39.jpg)
A Minor Bug
What happens if user selects the blank entry at the beginning of the list? (after selecting a nonblank entry)
39
![Page 40: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/40.jpg)
A Minor Bug
40
![Page 41: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/41.jpg)
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
![Page 42: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/42.jpg)
Works as Expected
42
Blank initial item selected.
![Page 43: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649f005503460f94c15bea/html5/thumbnails/43.jpg)
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