Preview
Video Player
00:00
00:00
Completing the “Activity” Field Drop Down List
4:33Now that we’ve seen how to work with drop down lists, let’s wrap up work on the “Activity” field.
Now that we've seen some examples
of how to create items for
0:00
the drop down list for
method using temporary data,
0:03
let's work on the actual implementation
by updating our action methods.
0:06
I'll add a property on the ViewBag
object ActivitiesSelectListItems
0:12
and set it to an instance of SelectList.
0:18
Passing in the Data.Data.Activites,
0:22
static collection.
0:28
And the names of the properties for
the value, And text fields.
0:31
This looks odd, but it's correct.
0:40
The first Data is the namespace for
our data static class.
0:43
Let's also remove this line of code
that's setting the ActivityId property.
0:47
Drop down list items don't automatically
repopulate on a post back, so
0:53
we also need to set this ViewBag
property in our post action method.
0:57
I'll just copy and
paste this line of code from here.
1:01
Down to here.
1:11
And I'll remove our line of code that is
setting the entry.ActivityId property.
1:12
Now, let's update our view.
1:18
To start with,
we can remove all of this temporary code.
1:20
Then we just need to update our
call to the DropDownListFor
1:30
method to use our new ViewBag property.
1:36
ViewBag.ActivitiesSelectListItems.
1:40
The only thing that's tricky here
is that we need to explicitly cast
1:49
the ViewBag property to its
actual type of select list.
1:53
That's necessary because
ViewBag is a dynamic object.
1:57
Let's run our app and test our changes.
2:05
And here's our list of
available activities.
2:11
What if we wanted to insert
an empty item as the first item so
2:16
users would need to select a value?
2:20
Turns out, there's a method overload
that makes this easy to do.
2:22
We can add an empty string,
just after the SelectList parameter, and
2:27
the DropdownListFor method will
create a default empty item.
2:31
We could supply a prompt for our value.
2:39
Something like Select an Activity,
but I prefer to use an empty string.
2:42
Also it's worth noting that
if you pass in null for
2:48
the value,
MVC won't create the default empty item.
2:51
You need to pass a string value,
save the view, and refresh the page.
2:55
And now the empty item
is selected by default,
3:01
if we right-click on
the drop-down list and
3:04
select the inspect menu item, we can see
what our controls markup looks like.
3:06
The first option is our
default empty item.
3:13
The remaining items are the available
activities that we can select from.
3:19
The value attributes represent
the activity ID values, and
3:23
the option element inner text is
populated with the activity name values.
3:27
When the form is submitted to the server,
the selected items value attribute,
3:33
is used for
the activity ID form fields value.
3:37
It's worth noting,
that when we save an entry,
3:40
we only have the activity ID value
on hand, not the activities name.
3:43
We don't need the activity name, until
we display the entry on the list page.
3:48
This might be surprising the first
time you see this approach in use.
3:53
But it's a very common way
of handling related data.
3:56
Go ahead and stop the app.
4:00
If you're using GitHub
let's commit our changes.
4:03
Enter a commit message of,
4:10
Updated the "Activity" field to use a drop
4:13
down list, and
click the Commit All button.
4:18
In the next video,
we'll continue with improving our form
4:26
by updating the intensity
field to use radio buttons.
4:29