CIS407 Ilab2

Open the payroll system website from Lab 1..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig1.png” alt=””>2. Create a new form called frmPersonnel. To do this, pull down the website menu, select Add New Item, then type frmPersonnel.aspx for the name..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig2.png” alt=””>And you will get the following screen:.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig3.png” alt=””>Change Default.aspx to frmPersonnel.aspx..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig4.png” alt=””>And get the following Screen:.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig5.png” alt=””>3. Go to the Design mode of the form by clicking the Design tab (as opposed to the Source tab).4. From the ToolBox, drag and drop an Image control.5. Next, right click on the Project folder name in the Solution folder. Click Add-> New Folder and name the folder Images..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure22.jpg” alt=””>6. Right click on the Images folder and choose Add->Existing item. We will add our logo to our Images folder. Be sure to choose All Filesfrom the Files of Type
and navigate to where you saved the image. The logo image is located in
Doc Sharing in our course for you to download to your own machine or
upload to Citrix.7. After you have loaded the logo to the project, select the image control on your page.8. On the Properties window, choose the ImageURL property and the ellipse to the right of this property to open a Browse dialog box and add the ACITLogo to the page..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure23.png” alt=””>9. The Logo should appear on your page as shown..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure24.jpg” alt=””>.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure25.jpg” alt=””>10. From the ToolBox, drag-and-drop a Panel control underneath the logo image.11. Click the A/Z button in the Properties dialog so that all of the properties are sorted alphabetically..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig6.png” alt=””>12.
Change the height property of the Panel to 250px and the width to
300px. To do this, select the Panel, then go to the Properties pane
(usually in the lower right corner of the Visual Studio.NET Design view;
if you don’t see it, click the View Properties window OR press the F4
key). Scroll down the list, then type the value in for each property.13. Change the panel’s HorizontalAlign property to left..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure26.jpg” alt=””>14. Save your work!15.
From the ToolBox, drag-and-drop five Labels and five TextBoxes onto the
Panel. To make each Label/TextBox pair appear on a separate line, put
the cursor after each TextBox, then press the [ENTER] key (much like you
would a with a word processing program)..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig11.png” alt=””>Rename
the Label’s properties as defined below. You can do this by selecting
each Label, scrolling to the property, and then typing in the value.PropertyValueLabel1 – TextFirst Name:Label2 – TextLast Name:Label3 – TextPay Rate:Label4 – TextStart Date:Label5 – TextEnd Date:Rename
each TextBox’s property as defined below. You can do this by selecting
each TextBox, scrolling to the property, and then typing in the value.PropertyValueTextBox1 – (ID)txtFirstNameTextBox2 – (ID)txtLastNameTextBox3 – (ID)txtPayRateTextBox4 – (ID)txtStartDateTextBox5 – (ID)txtEndDateChange
each button’s ID and Text properties as defined below. You can do this
by selecting each button, scrolling to the property, and then typing in
the value.PropertyValueButton1 – (ID)btnSubmitButton1 – TextSubmitButton2 – (ID)btnCancelButton2 – TextCancelSave your work!16.
If you would like, you can make the labels the same size by selecting
the first label, pressing and holding Control, and selecting the rest of
the labels. Then, choose Format-> Make Same Size ->Width as shown below:.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig9.png” alt=””>17.
When we click the Submit button, we want the contents of the form to be
passed to another form. In the Solution Explorer, right click on the
project name and choose Add-> Add New Item.Choose Web Form and name the form frmPersonnelVerified.aspx.18. On this form, we will add an image and panel like the previous form. Within the panel, add a label and a textbox. The width of the panel should be 650 and the height 250. The label should say Information to Submit. The textbox ID should be txtVerifiedInfo. Also, change the TextMode Property of the textbox to MultiLine, the height to 80, and the width to 400.Click the Design tab for the frmPersonalVerified.aspx, and add a Label and a TextBox. Set the properties as follows:PropertyValueLabel – TextInformation to submitTextbox – (ID)txtVerifiedInfoTextbox – Height80pxTextbox – Width400pxTextbox – TextModeMultiline.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure34.jpg” alt=””>19.
Next, we will write the code that will load the information from the
frmPersonnel page to the frmPersonnelVerified page. Be sure that your
cursor is not selecting the panel. Double click on the blank part of the
page to open the page_load event handler and add the following code.//Add your comments here
txtVerifiedInfo.Text=Request[“txtFirstName”]+”n”+Request[“txtLastName”]+”n”+Request[“txtPayRate”]+”n”+Request[“txtStartDate”]+”n”+Request[“txtEndDate”];.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure29.jpg” alt=””>20. Return to the frmPersonnel Web page, click the btnSubmit button, go to the PostBackUrL property and set it to frmPersonalVerified.aspx
by clicking the ellipse to the right of the property to open a Browse
dialog, and click frmPersonalVerified.aspx there. This will insert the
correct path to the PostBackUrl Property..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/week1_cis407Lab2Fig12.png” alt=””>21.
Test your Web page. On the frmPersonnel.aspx page, right click and
choose View in Browser. Test the application with test data and press
Submit. You should see your test data appear in the frmPersonnelVerified
page..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure30.jpg” alt=””>
STEP 2: Adding Navigation
.equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/CIS407A_W2_iLab.html#top”>Back to Top

22. Add a new Web form called frmMain.aspxAdd the ACIT Logo to the top of the form and a panel below the image with height = 350 and width = 500.Add an ImageButton control, then, space over, and next, add a LinkButton.23.
For the Image button, you will need to download an image from the
Internet or create an image yourself. Right click on the Images folder
and choose Add->Existing item and browse to add the image that you want to use as part of your project.24. Click on the ImageButton and the ImageUrl property. Then, select the image that you added to the project. Modify the text of the LinkButton to Annual Salary Calculator.25. Set the PostBackURL property for the image and the link to the frmSalaryCalculator.aspx from last week.26. Right click on the frmMain.aspx and choose Set As Start Page.
27. Test your Web page. Press F5, or click the Start Debugging (Citrix
users, press Start Without Debugging) button on the toolbar, or pull
down the Debug menu and select Start Debugging.Test your link. Does it take you to the Annual Salary Calculator page?NOTE: To execute the application, you have these options:If you are using Citrix, press CTRL + F5 to Start Without Debugging. You will not be deducted points for this partIf you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL + F5 to Start Without Debugging..equella.ecollege.com/file/fbbe7da4-4be1-44e1-948f-6330ab89548e/63/Week2_CIS407Figure33.jpg” alt=””>On your own:Repeat this process to create an image and link for the frmPersonnel.aspx page. Remember to set the PostbackURL properties.On
the frmPersonnel page, make the ACIT logo be a link that will take the
user to the frmMain page. Use an ASP.Net Hyperlink control to do this
task.Update the frmPersonnel, frmPersonnelVerified, and
frmSalaryCalculator to include the ACIT logo at the top of each page
(centered) with the logo set as a hyperlink that will return to the
frmMain page.On the frmPersonnel page, make it so that if the user presses the Cancel button, then that user is taken back to the frmMain.
STEP 4: Verify and Submit