🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

A new Figma course has dropped!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Working with Drop Down Lists

8:39 with James Churchill

Let’s see how we can use MVC to work with drop down lists.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Follow Along

To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:

git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v3.1 -b working-with-drop-down-lists

DropDownList vs ListBox

The <select> HTML element is flexible enough to render a list that only allows a single selection vs a list that allows multiple selections.

ASP.NET MVC distinguishes between these two approaches by giving them different names—“drop down list” and “list box”. Drop down lists can be rendered using the DropDownList or DropDownListFor methods and list boxes can be rendered using the ListBox or ListBoxFor methods. Just remember that these methods produce the same underlying element—<select>.

For more information about the HTML <select> element, see this MDN (Mozilla Developer Network) page.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[MUSIC] 0:00

In a previous section, we built a basic version of the ad entry form for 0:04

our Fitness Frog web app. 0:08

Now we'll focus on improving our form so that it's easier to use. 0:11

We'll do that by replacing our forms' text boxes 0:15

with controls that more closely match the type of data that they're associated with. 0:19

In the next two videos, we'll update the activity field to use a dropdown list, 0:23

which will restrict the user's input to a list of provided values. 0:28

Let's start by updating the activity field to use the dropdown list for 0:33

HTML helper method. 0:37

That's easy enough to do. 0:39

We just need to change the text box text here in this method call to DropDownList. 0:41

And almost immediately we can see the Visual Studio 0:47

is telling us there's a problem with our second parameter. 0:50

If we retype the comma after the first parameter Visual Studio 0:53

will display the parameter list for each of the available method overloads. 0:57

The second parameter for the first method overload is something named select list 1:02

of type IEnumerable select list item. 1:07

Select list item is a simple object that's used to represent an item 1:10

in a dropdown list. 1:15

We can define an array of select list item objects, here at the top of our view. 1:16

Var selectlistitems = new array then a set of curly braces. 1:21

Then new selectlistitem curly 1:29

braces then Value equals 1, 1:35

Text equals Item 1 and 1:41

Selected equals false. 1:45

Then a comma. 1:50

Then let's add the second item. 1:52

New SelectListItem. 1:54

Value equals 2 Text equals Item 2 and 1:59

Selected equals true. 2:07

And don't forget our ending semi colon. 2:14

This collection of selectListItem objects would render the following markup. 2:17

A select element containing an option element 2:21

with a value of 1 and content of Item 1. 2:27

Then a second option element with a value of 2. 2:32

This one would be selected with content, Item 2. 2:38

I'll select and comment out this markup by pressing control K and control C. 2:44

This comments out the markup using an eraser comment 2:49

which will prevent the markup from being sent to the client. 2:52

Let's update our call to the DropDownListFor method, and run our app. 2:56

Excellent, here's our activity field with a drop down list. 3:04

If we click on it, 3:08

we can see the two items that we added to our select list items array. 3:09

Here's something interesting. 3:14

We set the second item as the selected item, but 3:15

the first item was actually selected. 3:18

The reason for this is simple enough. 3:21

Even if it's not readily apparent, remember, we're using the strongly typed 3:23

view, and our activity field is bound to the model's ActivityId property. 3:28

On the initial page load, the selected item in the DropDownList will be set to 3:35

the item whose value matches the bound property value. 3:40

Regardless of the selected property values that we set up here. 3:44

In our controller, we're setting the value for the date property but 3:52

not the activity ID property. 3:56

That means that our property is getting the default value for 3:59

its underlying data type. 4:02

Right-click on Entry and select Go To Definition. 4:04

And scroll down to the ActivityID property. 4:10

The ActivityID property is of type int. 4:21

So our default value is zero. 4:24

We don't have an item in our SelectList whose value matches our property value. 4:30

So the first item in the list will be the selected item. 4:35

Let's stop the app. 4:38

If we set the Activity ID property value to 2. 4:44

Then the second item in the list will become the selected item. 4:47

Before we run the app, let's also update the post action method to do the same. 4:51

In an attempt to always force the selected item to the second item. 5:00

Let's also set a breakpoint on this line of code. 5:05

Go ahead and run the app. 5:10

Now, the second item is the selected item. 5:14

Select the first item in the list, remove the duration field value, and 5:17

save the form. 5:22

Here, we are in our post action method, 5:25

setting the entries activity id property value to 2. 5:27

Press F5 to continue and 5:31

we'll see another behavior that might be surprising forcing the activity id 5:33

property value to two in the action method has no effect on this like that item. 5:38

Item one is still selected. 5:43

This is happening because N.V.C. 5:46

gives priority to the model state values over the model property values. 5:48

Provided that there are model state values available. 5:53

On the initial page load the model state values collection is empty. 5:56

So the model property values are used instead. 6:01

On the second page load after our form post 6:04

the model state is populated with values. 6:08

So our model values are ignored when the view is re-rendered. 6:10

We saw in an earlier video how ModelState makes it possible to redisplay user values 6:15

even when they can't be converted to the data types defined in our model. 6:19

The behavior of our dropdown list selected item is another example 6:25

of NVC giving priority to the users provided values. 6:30

While any collection of select list item objects will work as the source of items 6:34

for the dropdown list for method, 6:38

MVC also provides a custom collection named select list. 6:40

Select list makes it easy to convert any collection 6:45

to a collection of select list item objects. 6:48

First, we need a collection of objects that will service our source data. 6:51

To keep things simple, I'll just use an array of anonymous objects. 6:55

Var items equals new array and then a set of curly braces. 6:59

Then new anonymous object Id equals 1. 7:06

Name equals Item 1, 7:11

then new anonymous object { id = 2 }. 7:15

Name = "Item 2". 7:22

And don't forget our ending semicolon. 7:26

Then we can instantiate a selectList object by calling its constructor and 7:30

passing in our source data. 7:35

Along with the names of our value and text fields. 7:37

Notice that there is a constructor overload that allows us to pass in 7:40

an object representing the selected value. 7:44

Internally the select list constructor will create a select list item object for 7:47

each item in our source data. 7:52

And for the item whose value matches are provided selected value 7:54

it's selected property will be set the true. 7:58

So attempting to set the selected value v of the select list constructor 8:01

will be as ineffective as it was with our prior approach. 8:06

Given that I'm not going to use that constructor overload. 8:10

Even though we've switched to using the select list custom collection. 8:14

We shouldn't notice a change in our page. 8:18

Save the view and refresh the page. 8:21

And everything looks and behaves as it did before. 8:28

After the break, 8:34

let's replace our temporary data with our actual available activities. 8:35

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up