1 00:00:00,038 --> 00:00:04,377 [MUSIC] 2 00:00:04,377 --> 00:00:08,867 In a previous section, we built a basic version of the ad entry form for 3 00:00:08,867 --> 00:00:11,130 our Fitness Frog web app. 4 00:00:11,130 --> 00:00:15,750 Now we'll focus on improving our form so that it's easier to use. 5 00:00:15,750 --> 00:00:19,000 We'll do that by replacing our forms' text boxes 6 00:00:19,000 --> 00:00:23,750 with controls that more closely match the type of data that they're associated with. 7 00:00:23,750 --> 00:00:28,440 In the next two videos, we'll update the activity field to use a dropdown list, 8 00:00:28,440 --> 00:00:31,850 which will restrict the user's input to a list of provided values. 9 00:00:33,060 --> 00:00:37,510 Let's start by updating the activity field to use the dropdown list for 10 00:00:37,510 --> 00:00:39,770 HTML helper method. 11 00:00:39,770 --> 00:00:41,670 That's easy enough to do. 12 00:00:41,670 --> 00:00:47,110 We just need to change the text box text here in this method call to DropDownList. 13 00:00:47,110 --> 00:00:50,430 And almost immediately we can see the Visual Studio 14 00:00:50,430 --> 00:00:53,660 is telling us there's a problem with our second parameter. 15 00:00:53,660 --> 00:00:57,650 If we retype the comma after the first parameter Visual Studio 16 00:00:57,650 --> 00:01:02,030 will display the parameter list for each of the available method overloads. 17 00:01:02,030 --> 00:01:07,370 The second parameter for the first method overload is something named select list 18 00:01:07,370 --> 00:01:10,630 of type IEnumerable select list item. 19 00:01:10,630 --> 00:01:15,170 Select list item is a simple object that's used to represent an item 20 00:01:15,170 --> 00:01:16,610 in a dropdown list. 21 00:01:16,610 --> 00:01:21,273 We can define an array of select list item objects, here at the top of our view. 22 00:01:21,273 --> 00:01:29,913 Var selectlistitems = new array then a set of curly braces. 23 00:01:29,913 --> 00:01:35,702 Then new selectlistitem curly 24 00:01:35,702 --> 00:01:41,267 braces then Value equals 1, 25 00:01:41,267 --> 00:01:45,496 Text equals Item 1 and 26 00:01:45,496 --> 00:01:50,880 Selected equals false. 27 00:01:50,880 --> 00:01:51,430 Then a comma. 28 00:01:52,510 --> 00:01:54,240 Then let's add the second item. 29 00:01:54,240 --> 00:01:59,274 New SelectListItem. 30 00:01:59,274 --> 00:02:07,955 Value equals 2 Text equals Item 2 and 31 00:02:07,955 --> 00:02:14,110 Selected equals true. 32 00:02:14,110 --> 00:02:16,180 And don't forget our ending semi colon. 33 00:02:17,220 --> 00:02:21,740 This collection of selectListItem objects would render the following markup. 34 00:02:21,740 --> 00:02:27,604 A select element containing an option element 35 00:02:27,604 --> 00:02:32,725 with a value of 1 and content of Item 1. 36 00:02:32,725 --> 00:02:38,618 Then a second option element with a value of 2. 37 00:02:38,618 --> 00:02:44,313 This one would be selected with content, Item 2. 38 00:02:44,313 --> 00:02:49,980 I'll select and comment out this markup by pressing control K and control C. 39 00:02:49,980 --> 00:02:52,960 This comments out the markup using an eraser comment 40 00:02:52,960 --> 00:02:56,260 which will prevent the markup from being sent to the client. 41 00:02:56,260 --> 00:03:02,010 Let's update our call to the DropDownListFor method, and run our app. 42 00:03:04,200 --> 00:03:08,450 Excellent, here's our activity field with a drop down list. 43 00:03:08,450 --> 00:03:09,570 If we click on it, 44 00:03:09,570 --> 00:03:14,150 we can see the two items that we added to our select list items array. 45 00:03:14,150 --> 00:03:15,560 Here's something interesting. 46 00:03:15,560 --> 00:03:18,790 We set the second item as the selected item, but 47 00:03:18,790 --> 00:03:21,700 the first item was actually selected. 48 00:03:21,700 --> 00:03:23,840 The reason for this is simple enough. 49 00:03:23,840 --> 00:03:28,913 Even if it's not readily apparent, remember, we're using the strongly typed 50 00:03:28,913 --> 00:03:33,771 view, and our activity field is bound to the model's ActivityId property. 51 00:03:35,653 --> 00:03:40,252 On the initial page load, the selected item in the DropDownList will be set to 52 00:03:40,252 --> 00:03:44,270 the item whose value matches the bound property value. 53 00:03:44,270 --> 00:03:48,104 Regardless of the selected property values that we set up here. 54 00:03:52,137 --> 00:03:56,834 In our controller, we're setting the value for the date property but 55 00:03:56,834 --> 00:03:59,440 not the activity ID property. 56 00:03:59,440 --> 00:04:02,922 That means that our property is getting the default value for 57 00:04:02,922 --> 00:04:04,500 its underlying data type. 58 00:04:04,500 --> 00:04:07,947 Right-click on Entry and select Go To Definition. 59 00:04:10,970 --> 00:04:13,909 And scroll down to the ActivityID property. 60 00:04:21,316 --> 00:04:24,790 The ActivityID property is of type int. 61 00:04:24,790 --> 00:04:26,760 So our default value is zero. 62 00:04:30,680 --> 00:04:35,040 We don't have an item in our SelectList whose value matches our property value. 63 00:04:35,040 --> 00:04:38,970 So the first item in the list will be the selected item. 64 00:04:38,970 --> 00:04:39,800 Let's stop the app. 65 00:04:44,120 --> 00:04:47,993 If we set the Activity ID property value to 2. 66 00:04:47,993 --> 00:04:51,430 Then the second item in the list will become the selected item. 67 00:04:51,430 --> 00:04:56,018 Before we run the app, let's also update the post action method to do the same. 68 00:05:00,795 --> 00:05:05,770 In an attempt to always force the selected item to the second item. 69 00:05:05,770 --> 00:05:08,329 Let's also set a breakpoint on this line of code. 70 00:05:10,883 --> 00:05:12,529 Go ahead and run the app. 71 00:05:14,182 --> 00:05:17,790 Now, the second item is the selected item. 72 00:05:17,790 --> 00:05:22,079 Select the first item in the list, remove the duration field value, and 73 00:05:22,079 --> 00:05:23,003 save the form. 74 00:05:25,025 --> 00:05:27,413 Here, we are in our post action method, 75 00:05:27,413 --> 00:05:31,100 setting the entries activity id property value to 2. 76 00:05:31,100 --> 00:05:33,835 Press F5 to continue and 77 00:05:33,835 --> 00:05:38,220 we'll see another behavior that might be surprising forcing the activity id 78 00:05:38,220 --> 00:05:43,980 property value to two in the action method has no effect on this like that item. 79 00:05:43,980 --> 00:05:46,780 Item one is still selected. 80 00:05:46,780 --> 00:05:48,680 This is happening because N.V.C. 81 00:05:48,680 --> 00:05:53,640 gives priority to the model state values over the model property values. 82 00:05:53,640 --> 00:05:56,970 Provided that there are model state values available. 83 00:05:56,970 --> 00:06:01,180 On the initial page load the model state values collection is empty. 84 00:06:01,180 --> 00:06:04,660 So the model property values are used instead. 85 00:06:04,660 --> 00:06:08,020 On the second page load after our form post 86 00:06:08,020 --> 00:06:10,670 the model state is populated with values. 87 00:06:10,670 --> 00:06:15,016 So our model values are ignored when the view is re-rendered. 88 00:06:15,016 --> 00:06:19,991 We saw in an earlier video how ModelState makes it possible to redisplay user values 89 00:06:19,991 --> 00:06:25,230 even when they can't be converted to the data types defined in our model. 90 00:06:25,230 --> 00:06:30,114 The behavior of our dropdown list selected item is another example 91 00:06:30,114 --> 00:06:34,046 of NVC giving priority to the users provided values. 92 00:06:34,046 --> 00:06:38,842 While any collection of select list item objects will work as the source of items 93 00:06:38,842 --> 00:06:40,919 for the dropdown list for method, 94 00:06:40,919 --> 00:06:45,080 MVC also provides a custom collection named select list. 95 00:06:45,080 --> 00:06:48,330 Select list makes it easy to convert any collection 96 00:06:48,330 --> 00:06:51,280 to a collection of select list item objects. 97 00:06:51,280 --> 00:06:55,634 First, we need a collection of objects that will service our source data. 98 00:06:55,634 --> 00:06:59,830 To keep things simple, I'll just use an array of anonymous objects. 99 00:06:59,830 --> 00:07:06,120 Var items equals new array and then a set of curly braces. 100 00:07:06,120 --> 00:07:11,460 Then new anonymous object Id equals 1. 101 00:07:11,460 --> 00:07:15,429 Name equals Item 1, 102 00:07:15,429 --> 00:07:22,932 then new anonymous object { id = 2 }. 103 00:07:22,932 --> 00:07:26,351 Name = "Item 2". 104 00:07:26,351 --> 00:07:30,570 And don't forget our ending semicolon. 105 00:07:30,570 --> 00:07:35,610 Then we can instantiate a selectList object by calling its constructor and 106 00:07:35,610 --> 00:07:37,390 passing in our source data. 107 00:07:37,390 --> 00:07:40,950 Along with the names of our value and text fields. 108 00:07:40,950 --> 00:07:44,420 Notice that there is a constructor overload that allows us to pass in 109 00:07:44,420 --> 00:07:47,620 an object representing the selected value. 110 00:07:47,620 --> 00:07:52,910 Internally the select list constructor will create a select list item object for 111 00:07:52,910 --> 00:07:54,680 each item in our source data. 112 00:07:54,680 --> 00:07:58,490 And for the item whose value matches are provided selected value 113 00:07:58,490 --> 00:08:01,780 it's selected property will be set the true. 114 00:08:01,780 --> 00:08:06,460 So attempting to set the selected value v of the select list constructor 115 00:08:06,460 --> 00:08:10,660 will be as ineffective as it was with our prior approach. 116 00:08:10,660 --> 00:08:14,240 Given that I'm not going to use that constructor overload. 117 00:08:14,240 --> 00:08:18,000 Even though we've switched to using the select list custom collection. 118 00:08:18,000 --> 00:08:19,970 We shouldn't notice a change in our page. 119 00:08:21,130 --> 00:08:24,390 Save the view and refresh the page. 120 00:08:28,850 --> 00:08:31,910 And everything looks and behaves as it did before. 121 00:08:34,070 --> 00:08:35,170 After the break, 122 00:08:35,170 --> 00:08:39,170 let's replace our temporary data with our actual available activities.