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
Next, let’s update the “Intensity” field to use radio buttons.
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.3 -b using-radio-buttons
Additional Learning
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.
Keyboard Shortcuts
-
F12- Go To Definition
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up