06:01 AM MT
In this week’s lab assignment, we’ll be developing credit card information checkout pages of an online book store. Such pages are necessary in any developed e-commerce application. In these pages, users are required to enter information related to their payment and shipping options.
We will develop two pages. On the first page, the user provides personal, payment, and shipping information for the order submitted. The second page summarizes the user’s input and requires the user to confirm.
Create an ASP.NET web project in Visual Studio 2010 or Visual Studio 2012.
Create and design ASP.Net web forms.
Cross-page posting in ASP.NET
How to use ASP.NET web server controls (DropDownList, TextBox, RadioButtonList, Label, and Button)
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.
(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)
A zip archive of the ASP.NET Application implementing cross-page posting consisting of the following files:
– pgCheckOut.aspx web form with all server controls defined in requirements
– pgCheckOut.aspx.cs with code for cross-page posting
– pgConfirm.aspx web form with all server controls defined in requirements
– pgConfirm.aspx.cs with code for cross-page posting and exception handling
Visual Studio 2012
Set up the Visual Studio development environment and test the web server on your machine. More information on how you can get the most recent version of VS is found in Course Home.
STEP A: Create a New Web Site Project
Go to the File menu and select New. From the New sub-menu, select Web Site to create a new Web Site project.
In the New Web Site dialog box, select the language you want to use in developing your web application; for our applications choose Visual C#.
Select ASP.NET Empty Web Site to create a project with only a web.config file.
In this course, every time you start a new project, you must select
ASP.NET Empty Web Site.
If you do not, many additional files that are not needed for our applications will be added to your project. Also, Visual Studio uses namespaces, which can reduce the portability of your application and create problems in future labs.
Then specify the location of your project or website. Note that in ASP.NET, you have the option of creating your website in different locations, whether in any folder on your local file system, on the local IIS server you have on your computer, or on a remote HTTP or FTP server. ASP.NET has an integrated IIS server with the Visual Studio .Net IDE.
I recommend using the default Web Sites folder in the Visual Studio project folder. This allows the development of web applications without the hassle of setting up an IIS server on your computer. If you don’t have IIS server installed on your computer, this is the best option to select for your lab.
STEP B: Create and Design a New Web Form, pgCheckOut.aspx
Add the first web form to the web application by right-clicking on the project name and selecting Add New Item. Name the web form pgCheckOut.aspx.
Add the controls in the table below to the form. If desired, you can visually lay out the form using HTML and CSS after adding the controls.
The first column in the table shows the data the control represents or their label, the second column is the type of control, and the last column is the ID or name of the actual control. If the Visual Studio web form Toolbox Pane is not displayed, you can show it by going to the View menu and selecting Toolbox. All of these controls can be found in the Toolbox Pane.
Data or Label Control Type Control ID or Name
First Name TextBox txtFirstName
Last Name TextBox txtLastName
Address Line 1 TextBox txtLine1
Address Line 2 TextBox txtLine2
City TextBox txtCity
State TextBox txtState
Payment Method RadioButtonList rblCCType
Credit Card Number TextBox txtCCNumber
Submit Button btnSubmit
The control IDs and names link the control to the C# code that manages the control. If you are given a specific control name (as in the table above), you must use the given name so that the control links to the code supplied in the lab.
When the user clicks on the submit button, pgConfirm.aspx should be displayed.
This is done with cross-page posting. To implement this, set the PostBackUrl property of the Submit button to ~/pgConfirm.aspx. This will cause the pgCheckOut.aspx to post user requests to the web page pgConfirm.aspx, which we will create shortly.
STEP C: Add Code to the pgCheckOut.aspx Form (to Read User Input and Implement Cross-page Posting)
Implement public methods in the pgCheckOut.aspx.cs code file to expose the form’s control values to other pages. The code below is an example of how to retrieve the value of the txtFirstName and txtLastName.
Be sure to implement similar methods for all controls holding any user input. Add comments for each line of code.
STEP D: Create and Design Another Web Form, pgConfirm.aspx
Add the second web form to your web application. Name the form pgConfirm.aspx.
Add label controls to display the user input values for the name, address, credit card type, and credit card number.
This allows the user to review and confirm order information before final submission. Add the controls in the table below to the form. The application will fill in the text displayed by the labels, so you don’t need to. You should provide additional labels that describe these values for the user.
Control Type Control ID or Name Control Purpose
Label lblName Holds the concatenation string of first name and last name entered in pgChekout.aspx
Label lblAddress Holds the concatenation of all address-related fields user input in pgCheckOut.aspx
Label lblCCType Displays the credit card type the user selected in pgCheckOut.aspx
Label lblCCNumber Displays the credit card number the user entered in pgCheckOut.aspx
Label lblStatus Displays the message of any run time exception that might happen during run time
Button btnSubmit When the user clicks on the submit order button, this displays a note to the user that his or her order was submitted successfully. You should use the status label to display the message.
STEP E: Add Code to the pgConfirm.aspx Form (to Allow User to Verify Order Input and Submit for Final Processing)
In the pgConfirm.aspx page, add the following code to the PreviousPageType directive to the pgConfirm.aspx file, and set it to the pgCheckOut.aspx.
<%@ Page Language="C#" AutoEventWireup=“true" CodeFile="pgConfirm.aspx.cs" Inherits="pgConfirm" %>
<%@ PreviousPageType VirtualPath=\"~/pgCheckOut.aspx\" %>
Next, in the Page_Load() event of the pgConfirm.aspx.cs code page, check whether there is any cross-page posting by checking whether there is a cross-page post back, and set the values of the label controls with the corresponding user input values from the previous page as shown below. Be sure to implement for all controls on the form.
Enclose your code in a try/catch block to handle any run time exception thrown by the application for any reason, as shown below.
Add code to have lblStatus display the message of any thrown exception. Don’t forget to add comments explaining what each line of code does.
pgConfirm Page_Load method
STEP F: Compile, Test, Save, and Submit Your Project
Save your work!
Test it! Make changes as appropriate until it works.
Remember to add comments for each step being performed.
Please zip and submit the entire web project folder to the iLab Dropbox.
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at firstname.lastname@example.org.
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at email@example.com and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at firstname.lastname@example.org.
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.