Completing the “Activity” Field Drop Down List

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