Working with Drop Down Lists

[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