[MUSIC]

In a previous section, we built a basic version of the ad entry form for

our Fitness Frog web app.

Now we'll focus on improving our form so that it's easier to use.

We'll do that by replacing our forms' text boxes

with controls that more closely match the type of data that they're associated with.

In the next two videos, we'll update the activity field to use a dropdown list,

which will restrict the user's input to a list of provided values.

Let's start by updating the activity field to use the dropdown list for

HTML helper method.

That's easy enough to do.

We just need to change the text box text here in this method call to DropDownList.

And almost immediately we can see the Visual Studio

is telling us there's a problem with our second parameter.

If we retype the comma after the first parameter Visual Studio

will display the parameter list for each of the available method overloads.

The second parameter for the first method overload is something named select list

of type IEnumerable select list item.

Select list item is a simple object that's used to represent an item

in a dropdown list.

We can define an array of select list item objects, here at the top of our view.

Var selectlistitems = new array then a set of curly braces.

Then new selectlistitem curly

braces then Value equals 1,

Text equals Item 1 and

Selected equals false.

Then a comma.

Then let's add the second item.

New SelectListItem.

Value equals 2 Text equals Item 2 and

Selected equals true.

And don't forget our ending semi colon.

This collection of selectListItem objects would render the following markup.

A select element containing an option element

with a value of 1 and content of Item 1.

Then a second option element with a value of 2.

This one would be selected with content, Item 2.

I'll select and comment out this markup by pressing control K and control C.

This comments out the markup using an eraser comment

which will prevent the markup from being sent to the client.

Let's update our call to the DropDownListFor method, and run our app.

Excellent, here's our activity field with a drop down list.

If we click on it,

we can see the two items that we added to our select list items array.

Here's something interesting.

We set the second item as the selected item, but

the first item was actually selected.

The reason for this is simple enough.

Even if it's not readily apparent, remember, we're using the strongly typed

view, and our activity field is bound to the model's ActivityId property.

On the initial page load, the selected item in the DropDownList will be set to

the item whose value matches the bound property value.

Regardless of the selected property values that we set up here.

In our controller, we're setting the value for the date property but

not the activity ID property.

That means that our property is getting the default value for

its underlying data type.

Right-click on Entry and select Go To Definition.

And scroll down to the ActivityID property.

The ActivityID property is of type int.

So our default value is zero.

We don't have an item in our SelectList whose value matches our property value.

So the first item in the list will be the selected item.

Let's stop the app.

If we set the Activity ID property value to 2.

Then the second item in the list will become the selected item.

Before we run the app, let's also update the post action method to do the same.

In an attempt to always force the selected item to the second item.

Let's also set a breakpoint on this line of code.

Go ahead and run the app.

Now, the second item is the selected item.

Select the first item in the list, remove the duration field value, and

save the form.

Here, we are in our post action method,

setting the entries activity id property value to 2.

Press F5 to continue and

we'll see another behavior that might be surprising forcing the activity id

property value to two in the action method has no effect on this like that item.

Item one is still selected.

This is happening because N.V.C.

gives priority to the model state values over the model property values.

Provided that there are model state values available.

On the initial page load the model state values collection is empty.

So the model property values are used instead.

On the second page load after our form post

the model state is populated with values.

So our model values are ignored when the view is re-rendered.

We saw in an earlier video how ModelState makes it possible to redisplay user values

even when they can't be converted to the data types defined in our model.

The behavior of our dropdown list selected item is another example

of NVC giving priority to the users provided values.

While any collection of select list item objects will work as the source of items

for the dropdown list for method,

MVC also provides a custom collection named select list.

Select list makes it easy to convert any collection

to a collection of select list item objects.

First, we need a collection of objects that will service our source data.

To keep things simple, I'll just use an array of anonymous objects.

Var items equals new array and then a set of curly braces.

Then new anonymous object Id equals 1.

Name equals Item 1,

then new anonymous object { id = 2 }.

Name = "Item 2".

And don't forget our ending semicolon.

Then we can instantiate a selectList object by calling its constructor and

passing in our source data.

Along with the names of our value and text fields.

Notice that there is a constructor overload that allows us to pass in

an object representing the selected value.

Internally the select list constructor will create a select list item object for

each item in our source data.

And for the item whose value matches are provided selected value

it's selected property will be set the true.

So attempting to set the selected value v of the select list constructor

will be as ineffective as it was with our prior approach.

Given that I'm not going to use that constructor overload.

Even though we've switched to using the select list custom collection.

We shouldn't notice a change in our page.

Save the view and refresh the page.

And everything looks and behaves as it did before.

After the break,

let's replace our temporary data with our actual available activities.