This is the Solution for the Challenge titled ChallengeConditionalRadioButton. As always, read only as much as you need to solve the specific issue you’re having, but try to solve the rest on your own. Struggling with concepts is part of learning, and overcoming these challenges will give you an advantage down the road in this course.

Step 1: Add the Server Controls

By now you should be familiar with creating a Project and your Default.aspx page, so create those as we have been in the lessons. Switch to the Design view in Visual Studio to begin adding Server Controls to your form. You’ll need to style your form as shown below, with four RadioButtons, a Button and a Label:

InitialForm

Next, change the programmatic ID’s of each of the Server Controls to the following:

  1. pencilRadioButton
  2. penRadioButton
  3. phoneRadioButton
  4. tabletRadioButton
  5. okButton
  6. resultLabel

Step 2: Working with the okButton_Click

Once all of this is set up as shown, double-click on the okButton to generate an EventHandler for when the okButton is clicked. Inside this code block, write if() and else if() statements to check which RadioButton is selected:

okButtonClick

Note: While you could create each individual if() and else if() statement in its entirety before creating the next, creating all of them at the same time will allow you to copy and paste the code for your conditional into the next.

Inside the first if() statement, set the resultLabel’s Text property to "You selected Pencil". Copy and paste this code into each of the else if() statements:

IfElseIf

Now, simply change the word Pencil in the literal string to the appropriate RadioButton. i.e. Pen for penRadioButton. Finally, add an else() statement in the event that the user doesn’t select a RadioButton at all. Inside the else(), set the resultLabel’s Text to "Please select an option". Your code should look like this:

resultLabelFinal

Now, save and run your code to test the Project. You’ll notice that the program runs as intended if you select a RadioButton, but it allows multiple RadioButtons to be selected at the same time.

MultipleSelections

Step 3: RadioButton Groups

To fix this, go back to the Default.aspx page and select the pencilRadioButton. In the Properties window, under Behavior, you will find the GroupName property. Set this property to NoteGroup for all the RadioButtons. This will force their selection to be mutually exclusive so that only one condition can be true at a time.

groupName

Save and run your Project again. This time, you will find that the resultLabel displays the appropriate value for the selection, and only one RadioButton can be selected at a time.

FinalGroup

Bonus: Image Control

This bonus challenge deals with a Server Control we have not discussed yet: Image. What you need to do is display one of four images provided in the code folder for this Challenge depending on what the user’s selection was.

To begin with, open up the code folder for this lesson and drag the four images under the "Assets" section into your Project:

SolutionExplorer

Next, add a space underneath your okButton and insert the Image Server Control by double-clicking it. Change its programmatic ID to ‘resultImage’. You’ll also see in the Properties window for the Image, under Appearance, there is a property called ImageUrl:

ImageUrl

While the Properties window allows you to manually set the ImageUrl, this Challenge requires you to change it at runtime. In order to do this, go back into the okButton_Click Event. Copy and paste the if() and else if() statements, then comment out the originals. Clear out the resultLabel code in each of the if() and else if() statements you just pasted, with the exception of the else():

CopyPaste

In the if() statement for the pencilRadioButton, add a line that says, ‘resultImage.ImageUrl = "pencil.png" ‘ Note the quotation marks around "pencil.png", this is necessary in order to reference the file you added to your Project. Repeat this step for each of the else if() statements, selecting the appropriate ImageUrl for each:

finalIf

Save and run your Project to see the result:

Phone

Conclusion

Congratulations on completing the ChallengeConditionalRadioButton! If you had trouble, I encourage you to revisit this Challenge and try again. Keep trying until this becomes second nature to you, as repetition will reinforce what you are learning. You’re doing a great job so far, keep it up!


Lessons in this Course