Using Radio Buttons7:50 with James Churchill
Next, let’s update the “Intensity” field to use radio buttons.
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.3 -b using-radio-buttons
See the following pages for more information about C# enums.
For more information on how to style forms using Bootstrap, see this page on the Bootstrap documentation website.
F12- Go To Definition
Next, let's update the intensity field to use radio buttons. 0:00 Why radio buttons? 0:04 To answer that question, let's review our entry data model. 0:06 We can use this drop-down list to navigate to the Intensity property. 0:10 The Intensity property is of type IntensityLevel. 0:14 We can put our cursor on the data type and press F12 to navigate to the definition. 0:18 IntensityLevel is defined as an enum containing three values, 0:24 Low, Medium and High. 0:28 We could use a drop-down list for this field. 0:31 But with only three possible values, I think it makes sense to use radio buttons. 0:33 Radio buttons are like check boxes, in that they are either on or off. 0:38 But unlike check boxes, 0:43 when they are put into groups only one radio button can be selected at a time. 0:45 This sounds perfect for the Intensity field. 0:50 Here's the markup that we want to implement. 0:52 Notice that the input elements all have the same name attribute value. 0:55 This is what groups these radio buttons together, so 1:02 only one of them can be selected at a time. 1:05 The value attribute is the value that will be submitted to the server for 1:07 the selected item. 1:11 Let's open our Add View. 1:16 We can render this markup using the radio button for HTML helper method. 1:18 Go ahead and remove the call to the TextBoxFor method. 1:23 Add a div element. 1:31 Then make our first call to the RadioButtonFor method. 1:34 The first parameter is the lambda expression for 1:43 the model property that we're rendering a radio button for. 1:46 The second parameter is the object representing the radio button's value. 1:54 I'll start with using the string literal Low. 1:59 Then, after the method call, 2:02 we can type the text that will display to the right of the radio button. 2:04 Now we just need to repeat that twice more, once each for Medium and High. 2:09 @Html.RadioButtonFor, m 2:14 goes to m.Intensity. 2:20 Then the value Medium, and 2:28 to the right of the method call the text Medium. 2:31 @Html.RadioButtonFor, m goes to 2:36 m.Intensity, then the value High, 2:41 and then to the right High again. 2:47 Let's review our progress. 2:52 Press F5 to run our app. 2:53 Here are our radio buttons. 2:57 So far so good, but you can't click on the label to select a radio button. 3:00 You have to click on the radio button itself. 3:06 We'll work on fixing that in a bit. 3:09 Switching back to our view, I'm not happy with the string literals that we used for 3:12 Low, Medium and High. 3:16 Remember our IntensityLevel enum? 3:18 Let's see how we can use enums instead of strings. 3:20 First, we need to add the namespace for 3:23 our data models by adding a using directive right below the model directive. 3:26 @using Treehouse.FitnessFrog.Models. 3:30 If we didn't define our namespace we'd need to use the fully qualified 3:39 namespace for our IntensityLevel enum, which is 3:44 Treehouse.FitnessFrogModels.Entry.Intensi- tyLevel. 3:48 I'd much rather type Entry.IntensityLevel. 3:52 Now we can replace our strings with the corresponding enum values. 3:56 Entry.IntensityLevel.Low 4:11 Then to the right, @Entry.IntensityLevel.Low. 4:20 Then for Medium, Entry.IntensityLevel.Medium, 4:31 and to the right again, 4:38 @Entry.IntensityLevel.Medium. 4:41 And for High, Entry.IntensityLevel.High, 4:54 and again to the right, @Entry.IntensityLevel.High. 5:00 Save the view and refresh the page. 5:07 Great, looks the same as it did before. 5:11 By switching to the enum values we've reduced the chance for errors, and 5:14 made it easier to maintain our app. 5:18 Before we wrap up this video, let's fix our radio button labels by reviewing 5:20 the Bootstrap documentation at getbootstrap.com. 5:25 Click on CSS at the top, and then on Forms here on the right. 5:30 Then scroll down until you see the radio button examples. 5:37 Here's the Checkboxes and radio buttons section. 5:44 And a bit further down is an example of inline radio buttons. 5:49 Looks like we just need to surround each of the radio buttons with a label 5:54 containing the CSS class radio-inline. 5:59 Label class= radio-inline, 6:09 Then cut and paste our call to the RadioButtonFor method inside of the label. 6:16 Label class= radio-inline. 6:28 Again, cut and paste the RadioButtonFor method call inside of the label. 6:35 And one more time. 6:48 label class= radio-inline, and then cut and 6:50 paste the call to the RadioButtonFor method. 6:55 Save the view and refresh the page. 7:07 The layout is improved, and 7:13 we can now click on a label to select that radio button. 7:14 Having a larger click target will help users select the correct value. 7:19 Go ahead and stop the app. 7:24 If you're using GitHub, let's commit our changes. 7:27 Enter a commit message of Updated the Intensity field 7:33 to use radio buttons, and click the Commit All button. 7:38 Next up, we'll update the exclude field to use a check box. 7:46
You need to sign up for Treehouse in order to download course files.Sign up