Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s continue to improve our form by updating the “Exclude” field to use a check box.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v3.4 -b using-check-boxes
Additional Learning
For more information on how to style forms using Bootstrap, see this page on the Bootstrap documentation website.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's continue to improve our form
by updating the exclude field
0:00
to use a checkbox.
0:03
Here's our intrigue data model class.
0:05
I'll navigate to the exclude
property using this dropdown
0:07
at the top of the file.
0:11
A checkbox is a natural fit
as the exclude property
0:13
is defined using the bool data type.
0:16
A checkbox can either be checked or
0:19
unchecked, which maps
perfectly to a boolean value.
0:22
The mark up that we want to render for
our checkbox looks like this.
0:26
Notice that the input elements type
attribute is set to the value checkbox and
0:30
the display name is just plain
text following the input element.
0:35
Switch into the Add view.
0:40
Go ahead and remove the calls to
the label for and text box for
0:42
methods here in our Exclude field.
0:45
We can render the required markup
using the check box for and
0:49
display name for methods.
0:53
@html.CheckBoxFor (m
0:55
=> m.Exclude) then
1:00
outside of the method
1:05
@Html.DisplayNameFor(m =>
1:09
m.Exclude).
1:16
The CheckBoxFor method just
requires a lambda expression for
1:19
the model property that we're
rendering a CheckBoxFor.
1:22
The display name for method will render
the name for the provided property.
1:26
Let's run the app and review our changes.
1:31
And here's our checkbox.
1:35
I'm going to review the markup
that was rendered by MVC.
1:38
By right clicking on the check box and
selecting inspect.
1:41
Here's the HTML for our check box.
1:45
Nothing surprising about that.
1:49
But what's this hidden input element?
1:52
Right below our check box input
element that has the same name.
1:55
To understand why NVC is
rendering this additional element.
1:59
Let's switch back to our view.
2:03
Comment out our call to the checkbox for
method.
2:05
And manually write the HTML for
our checkbox element.
2:08
Input id= Exclude name="Exclude"
2:14
type="checkbox" and
2:20
value="true" then close the element and
2:24
then to the right of that the text,
Exclude.
2:31
Press Ctrl+S to save the view.
2:38
Then let's set a break-point in our add
action method and refresh the page.
2:40
Check the check-box and save the form.
2:53
Here we are at our break-point.
3:00
Using the locals window, let's take a look
at the posted value for the exclude field.
3:02
Expand model state, then keys.
3:10
The exclude field is the fifth key.
3:19
Expand the values collection and
then the fifth element.
3:22
If we then expand the value property
we can see that the attempted value
3:28
is true press F5 to continue.
3:32
Now let's save the form
without checking the check box
3:38
here we are at our break point again.
3:41
Let's expand the ModelState keys property.
3:44
We've got keys for everything but exclude.
3:48
As odd as this might seem,
this is the expected behavior.
3:52
Check boxes are only posted to
the server if they are checked.
3:56
So to ensure that the posted data, and
4:00
by extension the ModelState contains a key
value pair for checkbox fields in VC.
4:03
We'll include a hidden field with
the same name set to the value false.
4:08
This ensures that a value is sent for
our field.
4:13
Regardless if the checkbox is checked or
not.
4:16
When the checkbox is checked two
values are sent to the server.
4:20
One for the checkbox and
one for the hidden field.
4:24
When the checkbox is not checked,
one value was sent to the server,
4:27
the value for the hidden field.
4:31
Let's see this in action,
press F5 to continue.
4:34
In our view, let's switch back to
using the checkbox form method.
4:37
Remove the manual input element and
4:48
uncomment the call to
the CheckBoxFor method.
4:51
Be sure to save the view.
4:55
Instead of refreshing the page,
I'll click in the address bar and
4:57
press return to reload
the page using a GET request.
5:01
Check the checkbox, and save the form.
5:05
If we drill down into model state to
view the value for the exclude field,
5:09
We can see that the attempted
value is true, false.
5:17
And the raw value is
an array of two strings.
5:22
Containing true and false.
5:28
We have two values because
both the check box and
5:30
hidden values are being
posted to the server.
5:34
Fortunately MVC is able to gracefully
handle the dual values and
5:37
set the bound property
on our model to true.
5:42
Press F5 to continue.
5:44
Now, uncheck the check box and
save the form.
5:46
If we drill down into the ModelState
again to view the value for
5:50
the exclude field, we can see that the
attempted value is just false this time.
5:53
Only the hidden field value
was posted to the server.
6:00
Press F5 to continue.
6:03
Before we commit our changes,
let's fix our checkbox styles.
6:05
To start, I'll browse to the Bootstrap
documentation at getbootstrap.com.
6:09
Click on CSS at the top, and
then Forms here on the right.
6:15
I'll scroll down a bit,
and a little bit more.
6:22
Here it is, the checkbox examples.
6:28
Looks like we need to surround our
input element with a div element
6:32
containing the CSS class check box and
then a label element.
6:36
Let's switch back to our view and
make those changes.
6:41
Div class = Checkbox,
close the div, and then a label.
6:50
Cut and paste are called to the
CheckBoxFor method inside of the label.
7:00
Let's fix the indentation.
7:11
Save the view.
7:20
And refresh the page.
7:24
To review our new check box style.
7:29
Not much of a change, but
we can click on the label now to check and
7:32
uncheck the checkbox which
is a nice improvement.
7:37
Go ahead and stop the app, If you're
using GitHub, let's commit our changes.
7:42
Enter a commit message of updated
7:50
the Exclude field to use a checkbox and
7:55
click the Commit All button.
8:00
In the next video we'll
complete our form improvements
8:04
by adding a date picker to the date field.
8:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up