CIS 407 DeVry iLab 2 of 7 latest
Downloading is very simple, you can download this Course here:
Contact us at:
CIS 407 DeVry iLab 2 of 7 Latest
CIS 407 DeVry iLab 2 of 7 Latest
In this lab, we will demonstrate how to create an ASP.NET Web application having a single form with five text boxes and a Submit button. We will use the form to send information to a second form where data from the first form will be displayed. We will also add a main navigation page with two different ways of linking to other pages.
Please watch the tutorial before beginning the iLab.
CIS407A Week 2 iLab Part 1 Transcript
The purpose of this session is to do a demonstration of the skill sets that you will need in order to complete Week 2, allowing us time and all the CIS407A. And so to that end, I have prepared an agenda which is as follows. First, we are going to open the payroll system from Week 1 Llab. Next, we are going to create three new forms and they are FRM Personnel for ASPX. We’ll test it after we create it. FRM Personnel verified their ASPX. Test it after we create it and then FRM Main add our ASPX. Now this one will be partially completed so that you can complete the rest of it based on what you have learned, and then of course, we’ll test it. So you get to see what the end result would be. Okay? Now in order to do this, in order to complete the main, you will need to download some images, okay? So and I will show you that, so let me just add that. We’ll need to download images to be used in the forms. So we’ll go through that. So without any further delay, let’s go ahead and get started by opening up Visual Studio. It’s already open, and actually, I already opened it to our Week 1 Lab. Now this, you’re going to see a one here, because I already created a payroll system website on my system on my laptop, and so when I started a new one it shows up as one, but I wanted you to see everything being done from scratch, and so I created a fresh one. So to that end, this has always—I’ve already opened the website from Week 1 Lab. And the other way you could have done it would have been to go to the recent projects and solutions and then select what you did for Week 1. All right. I did that already. So the next step would be to create and inform and to do that I’m going to right click on the project, go to Add, and then choose a new item. And I choose web form, change from default ASPX to FRM Personnel. FRM Personnel go to ASPX. Notice that ASC Shop is case sensitive and you want to follow this naming convention exactly, because we will be referencing this file in later assignments, and so you want to be totally consistent. It does, the checkbox to place a code in a separate file need to be checked, and then you click Add. And this window comes up, so on this window you see this is the source window that shows you the HTML code and this also a design which is the what you see is what you get editor. So I’m going to switch to design. Once I do that, you notice that this are an area up here where you can put your first—you can place your first component there, and so we are going to go to the toolbox and put an image there. So we’re going to put an image there. Now, on that image, actually what I need to do is to on my Solution Explorer I need to create a folder that has images. So let me do that right now. So we are going to add a new folder and we’ll call it images. Now in this folder, I’m going to load the images that we already have. I know we have a logo. It’s not the best one yet, but we’ll probably improve on it before you get this material. So I’m going to load that image from ____ and I need to select all files so I can find the image. Okay. Go back, yes. This one. Okay. So that’s, so I’m going to load that into my project.
STEP 1: Create Web Forms
Open the payroll system website from Lab 1.
- Create a new form called frmPersonnel. To do this, pull down the websitemenu, select Add New Item, then type aspx for the name.
And you will get the following screen:
Change Default.aspx to frmPersonnel.aspx.
And get the following Screen:
- Go to the Design mode of the form by clicking the Design tab (as opposed to the Source tab).
- From the ToolBox, drag and drop an Image control.
- Next, right click on the Project folder name in the Solution folder. Click Add-> New Folderand name the folder Images.
- Right click on the Imagesfolder and choose Add->Existing item. We will add our logo to our Images Be sure to choose All Files from 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.
- After you have loaded the logo to the project, select the image control on your page.
- On the Properties window, choose theImageURL property and the ellipse to the right of this property to open a Browse dialog box and add the ACITLogo to the page.
- The Logo should appear on your page as shown.
- From the ToolBox, drag-and-drop a Panel control underneath the logo image.
- Click the A/Z button in the Properties dialog so that all of the properties are sorted alphabetically.
- 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.
- Change the panel’s HorizontalAlignproperty to left.
- Save your work!
- 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).
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.
|Label1 – Text||First Name:|
|Label2 – Text||Last Name:|
|Label3 – Text||Pay Rate:|
|Label4 – Text||Start Date:|
|Label5 – Text||End 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.
|TextBox1 – (ID)||txtFirstName|
|TextBox2 – (ID)||txtLastName|
|TextBox3 – (ID)||txtPayRate|
|TextBox4 – (ID)||txtStartDate|
|TextBox5 – (ID)||txtEndDate|
Change 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.
|Button1 – (ID)||btnSubmit|
|Button1 – Text||Submit|
|Button2 – (ID)||btnCancel|
|Button2 – Text||Cancel|
Save your work!
- 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 ->Widthas shown below:
- 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 chooseAdd-> Add New Item. Choose Web Form and name the form aspx.
- On this form, we will add an image and panel like the previous form. Within the panel, add a label and a textbox. The widthof 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:
|Label – Text||Information to submit|
|Textbox – (ID)||txtVerifiedInfo|
|Textbox – Height||80px|
|Textbox – Width||400px|
|Textbox – TextMode||Multiline|
- 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 thepage_load event handler and add the following code.
- Return to the frmPersonnel Web page, click the btnSubmit button, go to the PostBackUrLproperty and set it to 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.
- 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.
STEP 2: Adding Navigation
- Add a new Web form called frmMain.aspx
- Add 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.
- 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 chooseAdd->Existing item and browse to add the image that you want to use as part of your project.
- Click on the ImageButtonand the ImageUrl Then, select the image that you added to the project. Modify the text of the LinkButton to Annual Salary Calculator.
- Set the PostBackURL propertyfor the image and the link to theaspx from last week.
- Right click on the frmMain.aspx and choose Set As Start Page.
- 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 part
- If you are using a standalone version, press F5 to Start with Debugging, or you can press CTRL + F5 to Start Without Debugging.
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 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 3: Verify and Submit
- Save your work and run the project. You should be able to go to both areas of your site and enter the information in the pages. Your calculator should properly calculate without errors, and then on the frmPersonel Web page, you can click the Submit button and have it display in the frmPersonalVerified Web page. Once you have verified that it works, save your project, zip up all files, and submit in the Dropbox.
NOTE: Make sure that you include comments in the C# code where specified (where the “//Your comments here” is mentioned), or else a 5-point deduction per item (form, class, function) will be made. This includes code that you will be creating in the coming weeks. To comment on the code, you basically put two forward slashes to start the comment; anything after the slashes on that line is disregarded by the compiler. Then, type a brief statement on what is happening in the line under it. Comments show professionalism and are a must in systems. As a professional developer, comments will set you apart from others and make your life much easier if maintenance and debugging are needed.