Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s see how we can use MVC to work with drop down lists.
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
[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