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