"Annual Salary Calculator" ASP.NET Web Application Assignment description:
STEPS 1 through 3: Create Website and Home Page
In this ilab, we will learn how to create a simple ASP.NET web application using Microsoft Visual Studio.NET 2008. The application will display the text "Hello, World" on the home page.
Open Microsoft Visual Studio 2008.
Create a new ASP.NET website called "PayrollSystem." To do this, select "File, New Website
When the "New Website" dialog opens, select "ASP.NET Website" as the Template, select "File System" as the Location, and select "Visual C#" as the Language. Click Browse and navigate to the folder where you want to save your website. Add "PayrollSystem" at the end of the file path. Click OK if you are prompted to create a new folder. Click OK in the New Website dialog to finish creating the website.
Edit the Default.aspx file (the home page for your site) to add the message "Hello, World." To do this, if necessary, click the Design button below the editing window to switch to Design view, then click in the editing window and type "Hello, World" (without the quotes).
Click the Save button on the toolbar to save the changes to Default.aspx.
STEPS 4 through 5: Start Debugging NOTE: Citrix users have different steps!
To ensure that everything is working properly, click the Start Debugging button on the toolbar, or press the F5 key on the keyboard, or pull down the Debug menu and select "Start Debugging."
If the "Debugging Not Enabled" dialog box appears, select the option to add or modify the Web.config file to enable debugging and click OK. You should only have to do this the first time you debug the site.
STEP 6 through 7 : Display the "Hello, World" web page
The Internet Explorer web browser will open and display your Default.aspx page containing the "Hello, World" message.
Stop debugging and return to the design mode by closing the browser.
Add a new form to your web application called frmSalaryCalculator.aspx. Make sure "Place Code in separate file" is checked when you add the form. To add a new form, click (single-click, not double-click) on the project node in the solution explorer.
With the project node highlighted, right-click on the project node and select "Add New Item" from the popup menu. The following dialog will be displayed:
Select the name of the form you will add frmSalaryCalculator.aspx. Make sure "Place code in separate file" is checked and "Select master page" is unchecked.
You will create a web-based salary calculator on this new page. To do this, open the aspx page in Design view and, from the Toolbox, add three labels, two text box controls, and a button control. You can add controls by dragging the control from the Toolbox - Standard section onto your form. Your form should look like this:
Change the text displayed in each label so that the first label displays "Annual Hours"; the second label should display "Rate" and the third label should display "tiny_mce_markerquot;. (Hint: To change the text displayed, change the Text property of each control.)
Change the button text to display "Calculate Salary." (Hint: To change the text displayed as the button label, change the Text property of the button.) Your form should now look like this:
Set the ID property of the top text box to txtAnnualHours. Set the ID property of the second textbox to txtRate. Set the ID of the bottom label (the one we set the text property to "tiny_mce_markerquot;) to lblSalary. (Note: We set these IDs as we will be accessing the control values from the C# code. You can set the button ID and the other two labels' ID properties as well, but we won't be accessing them from our code.)
In Design view, add a C# event handler for the button-click event by double-clicking on the Calculate Salary button. This will place you in the page code behind file the editor. (Remember that ASP.Net pages have a file containing the HTML markup with an extension of .aspx and a C# 'code behind' file with an extension of .aspx.cs.) This is the code that should be displayed: (If you changed the ID of the button, it will be a different method name.)
This code will be called each time the user presses the button. It is important to remember that code in the code behind page executes on the server - not on the user's browser. This means that when the button is pressed, the page is submitted back to the web server and is processed by the ASP.Net application server on the web server. It is this code (between the { and } in this method) that will execute on the server. Once it is done executing the page will be sent back to the browser. Any changes we make to the page or controls on the page will be shown to the user in the updated page.
In this method, add code that will get the text in the txtAnnualHours text box, convert it to a Double, and store it in a double variable. Add code that will get the text from the txtRate text box, convert it to a Double, and store it in another variable. Create a third variable of type Double and set its value to the annual hours variable value multiplied by the rate double variable value. Take this resulting value and convert it to a string (text), and update the lblSalary Text property with this new string.
Hints:
A control's property can be accessed by simply using the control ID followed by a . followed by the name of the property. For example, the value stored in the Text property of the txtAnnualHours control can be accessed by using this: txtAnnualHours.Text. Text properties on controls are of type string.
To convert a string to a Double you can use the Convert class. If we had a string variable called str1 and a double variable called myNumber, the C# code to convert this would be as follows:
When converting from one type to another, we are assuming that the value stored in the type being converted is compatible with the type we are converting to. In the example above, if the value stored in str1 was not type compatible with a Double (for example "tiger") an error would be raised.
To set the value of a control on a web form, you can access the control and set the property directly. If I had a label control called lblCar and I wanted to update the text that was displayed in the label, I could do something like this:
Note that following code would be incorrect and cause an error:
lblCar is a Label - it isn't a string so we can't assign a string directly to it, but we can assign a string directly to the Text property of the label.
All of the base types in C# (double, int etc) have a ToString() method you can call. If you had a double variable that you wanted to convert to a string and set that string to my label's text, you would do the following:
This would take whatever value was stored in the myNumber Double and convert it to a string.
To add a $ to output you can use string concatenation in C# like this:
Set your new form as the start page by clicking once on the form name in the Solution Explorer and then right-clicking on the form name and selecting "Set as Start Page." You can now test your application and make sure it works correctly as you did with the Hello World form above.
You can switch back and forth between which form runs when you run your application by setting the different forms as the start page.
Once you have verified that your project works, save your project, zip all files, and submit in the Dropbox.