This is the Solution for the first Challenge in this course. Remember that these challenges are designed to help you learn the concepts taught in the lessons, so struggling with the concepts is not only natural, but important. Only read as much of the solution as you need in order to solve the problem you’re having, then try to finish the challenge on your own. Use this as a tool to help you, but do as much as you can on your own.

Step 1: Setup the Project

This Challenge was designed to cement the ideas from Lesson 3’s MyFirstWebApp and can be solved mostly by copying that code. To begin, create a new Project, an ASP.NET Web Application and call it MyFirstChallenge.

2016-07-20 (13)

Use an Empty template, but include references to Web Forms.

2016-07-20 (14)

The first step is to add a new Web Form to the Project by right-clicking the Project in the Solution Explorer and selecting:

Add > Web Form

Name the Web Form Default.aspx, and click OK. Move to the Design view by clicking the button in the bottom left-hand corner.

Step 2: Add Server Controls

In the designer area, type in "How old are you?" followed by two spaces. From the Toolbox, double-click the TextBox control to insert it next to your text. The result should look like this:

TextBox1

Use the right arrow to move your cursor to the right side of the TextBox, then press enter twice and type in "How much money do you have in your pocket?" followed by two spaces. Repeat the process above to insert another TextBox. Move your cursor to the right of the TextBox and hit enter twice, then double-click the Button control to insert a button:

Button1

Below the Button, insert a Label control by double-clicking the icon in the Toolbox.

Step 3: Edit the Controls

Select the first TextBox you inserted, and in the Properties window, change its ID to ageTextBox.

AgeId

Tip While you could name your server controls anything you want, giving them specific names helps you to remember what control you’re referencing. For instance, the ID of ageTextBox not only indicates what type of Server Control it is, but what its purpose is. When you type in ageTextBox, you will know exactly what you want that control to do.

Follow these same steps to change the ID’s for the second TextBox, Button, and Label to ‘moneyTextBox’, ‘okButton’ and ‘resultLabel’. In the Properties panel for the okButton, change the Text property to "Click Me To See Your Fortune", as specified by the Challenge. Then, select the resultLabel and clear the Text property so that it is empty. The result should look like this:

DesignFinal

Step 4: The Event Handler Code

Double click the okButton to enter the Event Handler called okButton_Click in the Default.aspx.cs. What we need to do next is gather the information that user input for their age and money. So, create a string property called ‘age’, and set it equal to the Text property of the ageTextBox. Do the same for a string ‘money’ variable:

Strings

Tip Remember, strings are useful for holding alphanumeric values, such as the Text property of your TextBoxes. By assigning these strings to the text that the user input, you can reference that text programmatically.

Remember that the goal is to concatenate the user’s input text with a predetermined string to display their fortune. In order to do this, create a string variable called ‘result’ and assign it the value "At " + age + " years old, I would have expected you to have more than " + money + " in your pocket." Note: Make sure that you include the spaces at the end of the literal strings, or else your formatting will be incorrect.

resultText

Finally, assign the resultLabel’s Text property to the ‘result’ variable you created. Your final code should look like this:

resultLabel

Step 5: Debug and Test

Save your Project, and click the Run button to test it out in your browser. Type in appropriate values into the TextBoxes, and click on the button to view the result:

Final

Where to Go from Here

If you had trouble completing this challenge, try this challenge again. Do it as often and as much as you need until you can firmly cement this concept in your mind. Or, create your own version of this challenge to get creative. In any event, do your best to understand the concepts in this Challenge before moving on. Good luck, and good work!


Lessons in this Course