Let's continue to improve our form by updating the exclude field

to use a checkbox.

Here's our intrigue data model class.

I'll navigate to the exclude property using this dropdown

at the top of the file.

A checkbox is a natural fit as the exclude property

is defined using the bool data type.

A checkbox can either be checked or

unchecked, which maps perfectly to a boolean value.

The mark up that we want to render for our checkbox looks like this.

Notice that the input elements type attribute is set to the value checkbox and

the display name is just plain text following the input element.

Switch into the Add view.

Go ahead and remove the calls to the label for and text box for

methods here in our Exclude field.

We can render the required markup using the check box for and

display name for methods.

@html.CheckBoxFor (m

=> m.Exclude) then

outside of the method

@Html.DisplayNameFor(m =>

m.Exclude).

The CheckBoxFor method just requires a lambda expression for

the model property that we're rendering a CheckBoxFor.

The display name for method will render the name for the provided property.

Let's run the app and review our changes.

And here's our checkbox.

I'm going to review the markup that was rendered by MVC.

By right clicking on the check box and selecting inspect.

Here's the HTML for our check box.

Nothing surprising about that.

But what's this hidden input element?

Right below our check box input element that has the same name.

To understand why NVC is rendering this additional element.

Let's switch back to our view.

Comment out our call to the checkbox for method.

And manually write the HTML for our checkbox element.

Input id= Exclude name="Exclude"

type="checkbox" and

value="true" then close the element and

then to the right of that the text, Exclude.

Press Ctrl+S to save the view.

Then let's set a break-point in our add action method and refresh the page.

Check the check-box and save the form.

Here we are at our break-point.

Using the locals window, let's take a look at the posted value for the exclude field.

Expand model state, then keys.

The exclude field is the fifth key.

Expand the values collection and then the fifth element.

If we then expand the value property we can see that the attempted value

is true press F5 to continue.

Now let's save the form without checking the check box

here we are at our break point again.

Let's expand the ModelState keys property.

We've got keys for everything but exclude.

As odd as this might seem, this is the expected behavior.

Check boxes are only posted to the server if they are checked.

So to ensure that the posted data, and

by extension the ModelState contains a key value pair for checkbox fields in VC.

We'll include a hidden field with the same name set to the value false.

This ensures that a value is sent for our field.

Regardless if the checkbox is checked or not.

When the checkbox is checked two values are sent to the server.

One for the checkbox and one for the hidden field.

When the checkbox is not checked, one value was sent to the server,

the value for the hidden field.

Let's see this in action, press F5 to continue.

In our view, let's switch back to using the checkbox form method.

Remove the manual input element and

uncomment the call to the CheckBoxFor method.

Be sure to save the view.

Instead of refreshing the page, I'll click in the address bar and

press return to reload the page using a GET request.

Check the checkbox, and save the form.

If we drill down into model state to view the value for the exclude field,

We can see that the attempted value is true, false.

And the raw value is an array of two strings.

Containing true and false.

We have two values because both the check box and

hidden values are being posted to the server.

Fortunately MVC is able to gracefully handle the dual values and

set the bound property on our model to true.

Press F5 to continue.

Now, uncheck the check box and save the form.

If we drill down into the ModelState again to view the value for

the exclude field, we can see that the attempted value is just false this time.

Only the hidden field value was posted to the server.

Press F5 to continue.

Before we commit our changes, let's fix our checkbox styles.

To start, I'll browse to the Bootstrap documentation at getbootstrap.com.

Click on CSS at the top, and then Forms here on the right.

I'll scroll down a bit, and a little bit more.

Here it is, the checkbox examples.

Looks like we need to surround our input element with a div element

containing the CSS class check box and then a label element.

Let's switch back to our view and make those changes.

Div class = Checkbox, close the div, and then a label.

Cut and paste are called to the CheckBoxFor method inside of the label.

Let's fix the indentation.

Save the view.

And refresh the page.

To review our new check box style.

Not much of a change, but we can click on the label now to check and

uncheck the checkbox which is a nice improvement.

Go ahead and stop the app, If you're using GitHub, let's commit our changes.

Enter a commit message of updated

the Exclude field to use a checkbox and

click the Commit All button.

In the next video we'll complete our form improvements

by adding a date picker to the date field.