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.
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 up