Using Check Boxes

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