Wrox’s ASP.NET 2.0 Visual Web Develope 2005 Express Edition Starter Kit phần 9 ppt

In Chapter 8, we’ll take the order process one step further by building the checkout page, where we’ll letcustomers enter payment and delivery details... Once the user confirms the order

Figure 7-25: Editing a cart item

9. Use the Delete button to delete one of the items from the cart.

How It Works

The working of this is all to do with the user control, and the ObjectDataSourceand GridViewtrols within it The ObjectDataSourcecontrol interacts with the StoredShoppingCartclass to pro-vide read and write functionality of the cart data The GridViewprovides the interface for displayingand editing that data What’s so good about this is that you haven’t had to learn anything new about the

con-GridViewto use custom classes — the grid interacts with the ObjectDataSourcecontrol, which isn’tvery different from the SqlDataSourcecontrol This means you have to learn only one set of techniquesand makes using new objects easier

Summar y

We’ve covered a lot of ground in this chapter, and although we haven’t explained all the ins and outs ofthe Visual Basic NET language, much of the code is simple We started the chapter by taking a look atthe order process, and the idea of thinking about the requirements — what is needed for ordering itemsand where they would be stored during the order

Having decided that custom classes were going to be used to store the shopping cart, we then looked athow you create classes We showed the creation of two classes (one for the cart and one for the cartitems), and how you add properties and methods to them Following that was another class, to providethe storage for the cart using the Sessionobject

We then built a page that added items into the shopping cart This was similar to the menu page, butinstead of showing just the size and price of the item, a link was added so that, when clicked, the itemwas added to the cart

Next was the creation of a user control, containing an ObjectDataSourcecontrol and a GridViewtrol, so that the display of the cart items could be seen The ObjectDataSourcecontrol interacts withthe classes to both read and write data to the cart This use control was then placed on a Web form sothat the items could be seen

con-Many of the techniques in this chapter follow similar principles to those in previous chapters: using acontrol to fetch the data and using a grid to display the data The key point that this shows is that many

of the ASP.NET controls have similar properties, or methods of working, which means that you have less

to learn

In Chapter 8, we’ll take the order process one step further by building the checkout page, where we’ll letcustomers enter payment and delivery details

234

The Checkout Process

In Chapter 7, we looked at the process of ordering items, which involved the creation of customclasses to store the order and the order items These were stored in the Sessionobject and bound

to a GridViewby way of an ObjectDataSourcecontrol We left the chapter with the shoppingcart page, showing all items in the cart Now we need to take the next step and build the checkoutprocess

In this chapter, we will build a single page that walks the user through the checkout, so we will becovering the following:

❑ The Wizardcontrol, and how you can use it for multistep operations

❑ How to make the checkout page react to user selections, by viewing and hiding sections

❑ How to use transactions so that database changes remain consistent

At the end of this chapter, we will have a page that steps the user through the purchase process

Paying for the Order

The order process requires three key pieces of information:

❑ The name and address of the user

❑ How they would like to pay

❑ Confirmation of the order

We could have all of these on the page at once, but the page would probably look a little cluttered,

so we’ll use the Wizardcontrol instead This introduces the notion of steps, where each step is atemplate into which we can place controls The Wizardmanages the navigation between the steps,

so we don’t have to worry about that ourselves As we step through the Wizard, ASP.NET showsand hides the templates so that only the correct controls are shown

Once the user confirms the order, we will need to add the order details into the database, which meanscreating an order and then copying the order items from the shopping cart into the order items table.Once this is done the shopping cart can be cleared, so that the old items don’t remain around.

We’re going to split the checkout process into several steps, one step for each of the steps in the process

Try It Out Using the Wizard Control

1. Create a new Web Form called Checkout.aspx Don’t forget to place the code in a separate fileand use the PPQ.mastermaster page

2. Switch the page to Design view, and drag a Wizardcontrol onto the Content area Set the Width

property of the Wizardto 100%

3. From the Wizard Tasks, select Add/Remove WizardSteps (see Figure 8-1).

Figure 8-1: Add/Remove Wizard Steps

4. On the WizardStep Collection Editor, select Step 1and change the Titleproperty to DeliveryAddress, and the StepTypeproperty to Start

5. Select Step 2and change the Titleproperty to Payment

6. Click the Add button to add a new WizardStep,and for the new step set the Titleproperty

to Shopping Cartand the StepTypeproperty to Finish

7. Click the Add button to add a new WizardStep,and for the new step set the Titleproperty

to Order Completeand the StepTypeproperty to Complete

8. Click OK to close the editor window

9. From the Wizard Tasks select AutoFormat, and on the Auto Format window select the Simple

scheme and click OK Your Wizardcontrol should look like Figure 8-2

236

Figure 8-2: The formatted Wizard control

10. Save the file and View the page in the browser Step through the wizard, using both the linksand the buttons provided Notice how the buttons change depending on your current step.Let’s see how this works

How It WorksAll you’ve done in this exercise is to use one control, but you can see that it provides quite a bit of functionality What you did was configure the steps through the Wizard Tasks interface, so let’s have alook at the code and see what it created, starting with the definition of the control and the styling:

<asp:Wizard ID=”Wizard1” runat=”server”

BackColor=”#E6E2D8” BorderColor=”#999999”

BorderStyle=”Solid” BorderWidth=”1px” Font-Names=”Verdana” Font-Size=”0.8em”>

<StepStyle BackColor=”#F7F6F3”

BorderColor=”#E6E2D8” BorderStyle=”Solid” BorderWidth=”2px” />

<SideBarStyle BackColor=”#1C5E55” Font-Size=”0.9em” VerticalAlign=”Top” />

BorderColor=”#E6E2D8” BorderStyle=”Solid” BorderWidth=”2px”

Font-Bold=”True” Font-Size=”0.9em” ForeColor=”White”

HorizontalAlign=”Center” />

Here you can see what the AutoFormat has done by setting colors and styles You can see that there areseparate styles for the steps, the sidebar, the buttons in the sidebar, the header, and for the navigationbuttons, which gives you a great deal of flexibility in how the Wizardlooks You can even remove thesidebar and just rely on the buttons, as well as configuring steps to disallow backward movement Some

of the styles shown here may actually appear after the WizardStepsin the code, but that’s OK — wherethey appear doesn’t matter We’ve moved them together here so that it’s easier to read

237

For the steps, you can see that there are four WizardStepcontrols within the WizardStepssection

Each of the WizardStepcontrols has a Titleproperty, which is shown in the sidebar The StepType

property defines the functionality of the step, and the values are described in Table 8-1

Table 8-1: The StepType Values

Type Description

Auto This is the default value for StepTypeand means that the type of step is

decided by the order in which it is declared For example, if the step is the firstdeclared then it automatically becomes a Start step

Complete The step is the last one to appear, and no navigation buttons are shown

Finish The step is the final data collection step, and the Finish and Previous buttons

are shown

Start The step is the first one to appear, and a Next button is shown but a Previous

button is not

Step The step is any step between the Start and the Finish step, and the Previous

and Next buttons are shown

You set the StepTypeproperty of the first step, the Delivery Address, to be Start, since that is thefirst step, which means that only the Next button is displayed — you can’t go backward from the firststep Paymentdoesn’t have a specific StepType, so it defaults to Auto, which means no specific functionality is associated with the step, but that Previous and Next buttons are shown The ShoppingCartstep had the StepTypeset to Finish, which means that it is the last step where data is collected,and a Previous button is shown, but the Next button isn’t — instead a Finish button is shown, letting theuser know that this is the last step The Completestep had a StepTypeof Complete, and there are nobuttons shown This is because the navigation process has finished, and this step will be used to display

a message to let the user know the order is on its way

238

Collecting the Deliver y Address

Now that the Wizardand steps have been set, it’s time to start filling in those steps The first part of thisprocess is to collect the delivery address In Chapter 9, you’ll see how we can have users join a membership

to the PPQ restaurant, so instead of filling in their details, it will remember who they are You’ll still beusing the controls you created in this chapter, so let’s go ahead and create them

Try It Out Collecting the Delivery Address

1. On the Checkout.aspxpage, select the Delivery Addressstep You can do this either byclicking the link or by selecting the Stepfrom the Wizard Tasks

2. Click into the area to the right of the steps and above the Next button From the main Layoutmenu, select Insert Table On the Insert Table window (see Figure 8-3), select the Custom option,and change the Rows to 4and the Columns to 2 Tick the Widthand Heightproperties, makingsure that the value for both is set to 100%.Set the Alignproperty to left, and from theAttributes area, tick Borderand set the value to 0

Figure 8-3: Inserting a table onto a form

3. Click the Cell Properties button, and on the Cell Properties window set the Vertical align

property to top(see Figure 8-4)

239

Figure 8-4: Setting the Cell Properties of a table

4. You now have a two-column, four-row table Into the first cell on row 1, type Name, and drag a

TextBoxcontrol into the second cell on row 1 Set the IDproperty of the TextBoxto txtName

5. In the first cell on row 2, type Address, and drag a TextBoxcontrol into the second cell on row

2 Set the IDproperty of the TextBoxto txtAddress, the TextModeproperty to MultiLine,the Rowsproperty to 5, and the Columnsproperty to 30

6. In the first cell of row 3, type Zip Code, and drag a TextBoxcontrol into the second cell on row

3 Set the IDproperty of the TextBoxto txtZipCode

7. In the first cell of row 4, type Area Into cell 2, place an ObjectDataSourcecontrol, from theData area of the Toolbox

8. Select Configure Data Source from the ObjectDataSource Tasks, and for the business object,select StoredShoppingCart

9. For the SELECTmethod, pick Read(see Figure 8-5), and for the UPDATEmethod pick Update

(see Figure 8-6) Leave INSERTand DELETEempty Click the Finish button to close the datasource configuration

Figure 8-5: Setting the SELECTmethod for the ObjectDataSource

control

240

Figure 8-6: Setting the UPDATEmethod for the ObjectDataSource

control

10. With the ObjectDataSourceselected, view the events (the lightning icon in the propertiesarea), and find the Updatingevent Double-click into the area to the right of it to open the codewindow Between the Protected Suband End Sub, add the following:

Dim ddl As DropDownList = _DirectCast(FormView1.FindControl(“DropDownList1”), DropDownList)e.InputParameters.Add(“DeliveryCharge”, ddl.SelectedValue)

11. Back in Checkout.aspx, underneath the ObjectDataSource, place a FormView, also from theData section of the Toolbox Don’t select the data source because this creates lots of controls, and

we don’t need them all — we’ll set the data source manually a little later Set the DefaultMode

property of the FormViewto Edit

12. On the FormView Tasks, select EditItemTemplate from the Display list

13. From the Data section of the Toolbox, drag an XmlDataSourcecontrol, and drop it into the

EditItemTemplate From the XmlSource Tasks, select Configure Data Source On the ration window, click the XML-Data button alongside the Data file, and pick delivery-costs.xml

configu-from the XML-Datafolder Click OK to close the window

14. Underneath the XmlDataSource, type Deliver to, and alongside that place a DropDownList.From the DropDownList Tasks select Choose DataSource , and pick XmlDataSource1from

the data source list Enter name for the display field and delivery-cost for the value field (see

Figure 8-7) Click OK to close the window

241

Figure 8-7: Configuring the delivery costs list

15. Select Edit DataBindings from the DropDownList Tasks Ensure that SelectedValueishighlighted on the “Bindable properties” list, and that the “Custom binding” option is selected.Into the “Code expression” text box, enter the following:

Bind(“DeliveryCharge”)

16. Click OK to close the bindings window

17. On the DropDownList Tasks, tick the Enable AutoPostBack option.

18. With DropDownList1selected, view the events, and double-click into the area next to the

242

Figure 8-8: The completed first step

How It WorksThe first part of this exercise was simple, as you added a table Using the Insert Table window, you created a four-row, two-column table and set some properties for it Using the Insert Table windowmeans that you don’t have to know what these properties are in HTML, nor even what HTML is usedfor a table — it makes creating Web pages easier Within the table cells for the first three rows, you addedtext and TextBoxcontrols to collection the name and address:

<asp:WizardStep runat=”server” Title=”Delivery Address” StepType=”Start” >

<table border=”0” style=”width: 100%; height: 100%”>

<asp:TextBox ID=”txtAddress” runat=”server”

Columns=”30” Rows=”5” TextMode=”MultiLine”></asp:TextBox>

The first cell of the final table row just contains the text description of the row, but the second cell ismore complex because you added two lots of data bound controls:

<asp:ObjectDataSource ID=”ObjectDataSource1” runat=”server”

to supply the controls You set the DataSourceIDproperty of the FormViewto ObjectDataSource1,

so it will be bound to the shopping cart The DefaultModeproperty is Editso that the FormViewisalways in Edit mode, which allows us to update the underlying data (the shopping cart) without explic-itly clicking Edit and Update buttons

<asp:FormView ID=”FormView1” runat=”server”

Next you added a DropDownList, binding it to the XmlDataSourceand setting the AutoPostBack

property to True, so that simply selecting a value causes the page to be refreshed Nothing visiblychanges from that refresh, but an event procedure is raised (the SelectedIndexChangedevent, as set

by the OnSelectedIndexChangedproperty — we’ll be coming to that shortly)

The DataTextFielddefines the value that is seen on the form, while the DataValuefield is used

to store the value The SelectedValueproperty is bound to the DeliveryChargeproperty of the

FormView, which itself is bound to the shopping cart Since you used the Bindstatement, the binding

is two-way, meaning that any changes to the selection will be pushed back to the shopping cart

244

<asp:DropDownList ID=”DropDownList1” runat=”server”

Falseindicates that no validation should be performed

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object,ByVal e As System.EventArgs)

FormView1.UpdateItem(False)

End Sub

That’s the first step complete, so let’s move on to the next

Collecting the Payment Details

For the next part in the process, we have to ask how the customer is going to pay for the order There aretwo options here: cash on delivery or by credit card (because, you know, on those late night beer andpizza nights, you never have enough cash) This step will introduce a little code, because you don’t need

to see the credit card data entry area if cash is being used

Try It Out Collecting the Payment Details

1. Back on the Checkout.aspxpage, select the Paymentstep, and into the empty area above thePrevious and Next buttons, place a RadioButtonListcontrol

2. Click the Edit Items link, and from the ListItem Collection Editor window Click the Addbutton For the new ListItem, set the Selectedproperty to True, the Textproperty to Cash

On Delivery, and the Value property to COD Click the Add button to add another ListItem,and set the Textproperty to Credit Card,and the Valueproperty to CC.Click OK to closethe ListItem Collection Editor

3. Set the AutoPostBackproperty of the RadioButtonListto True, and view the events (thelightning icon) Double-click next to the SelectedIndexChangedevent to open the code window Between the Protected Suband End Sub, add the following code:

Dim rbl As RadioButtonList = DirectCast(source, RadioButtonList)Dim ccp As Panel = DirectCast(Wizard1.FindControl(“CreditCardPayment”), Panel)

If rbl.SelectedValue = “CC” Then

245

ccp.Visible = TrueElse

ccp.Visible = FalseEnd If

4. Back on the Checkout.aspxpage, drag a Panelcontrol from the Toolbox, and drop it neath the RadioButtonList, set the IDproperty to CreditCardPayment, and set the Width

under-property to 100%and the Visibleproperty to False

5. Click into the Panel and type Card Type:.

6. Drag a DropDownListfrom the Toolbox and drop it next to the Card Typetext, and from theDropDownList Tasks select Edit Items From the ListItem Collection Editor, click Add to add anew ListItem Set the Textand Valueproperties to MasterCard Add another ListItem,and set the Textand Valueproperties to Visa Click OK to close the ListItem Collection Editorwindow Set the IDproperty of the DropDownListto lstCardType

7. Underneath the card type DropDownList, type Card Number: Next to that, place a TextBox

control, and set its IDproperty to txtCardNumber

8. Underneath the card number, type Expires:, and place a TextBoxcontrol there, setting its ID

property to txtExpiresMonth, and its Columnsproperty to 2 Type a / character after the

TextBox, and after the / character add another TextBoxcontrol Set its IDproperty to

txtExpiresYearand its Columnsproperty to 4 Your finished payment step should now looklike Figure 8-9

Figure 8-9: The second step designed

9. Save the page and run it Select the Paymentstep and notice that the cash option is selected, and the details of the credit card aren’t shown Select Credit Cardand see how the details nowappear

How It Works

The placement of the controls you added to the page follows the same rules as the previous step, withthem being placed into the Wizard Step The first control was the list:

<asp:RadioButtonList ID=”RadioButtonList1” runat=”server” AutoPostBack=”True”>

<asp:ListItem Selected=”True” Value=”COD”>Cash on Delivery</asp:ListItem>

<asp:ListItem Value=”CC”>Credit Card</asp:ListItem>

</asp:RadioButtonList>

246

Here the list contains two items, for selecting cash or credit card You set the AutoPostBackproperty

to True, which means that when the selection changes, the page is posted back to the Web server Whenyou created the event procedure by double-clicking next to the SelectedIndexChangedevent, the following was created:

Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object,ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChangedEnd Sub

This is the event procedure and will be used to run code when the radio button selection changes, which is what the SelectedIndexChangedevent means Each ListItemhas an index number (createdautomatically by ASP.NET), and when the selected item changes, so does its index number, and thisevent is raised when that index number changes

Within the event procedure, the first line of code is as follows:

Dim rbl As RadioButtonList = DirectCast(source, RadioButtonList)

This defines a variable as a RadioButtonListand takes its value from the sourceargument of theevent procedure, which identifies the control that raised the event However, the sourceargument ispassed into this event procedure by ASP.NET as an objecttype, so you used DirectCastto convert it

to a RadioButtonList.The next line declares a Panelobject, which is used to reference the panel containing the credit card details.You use the FindControlmethod of the Wizardcontrol to find the panel (called CreditCardPayment),and use the DirectCaststatement to convert this to a Paneltype (FindControlreturns an objecttype)

Dim ccp As Panel = DirectCast(Wizard1.FindControl(“CreditCardPayment”), Panel)

Next, you test the SelectedValueof the RadioButtonListto see if it is CC If it is, then the user hasselected credit card option, so you set the Visibleproperty of the Panelto True This shows the panelcontaining the credit card details If the SelectedValueis not CC, then the user has selected the cashoption, so the panel is hidden by setting the Visibleproperty to False

If rbl.SelectedValue = “CC” Thenccp.Visible = True

Elseccp.Visible = FalseEnd If

This code makes the page react to the user, showing and hiding controls depending upon what the userdoes It’s a common, and very useful, technique

Once you finished the code, the Paneland credit card details were added

<asp:Panel ID=”CreditCardPayment” runat=”server”

Height=”50px” Width=”100%” Visible=”false”>

Confirming the Order

Confirming the order requires two sets of information:

❑ The shopping cart needs to be shown, so that the customer can see what has been ordered

❑ The totals (including delivery charge and sales tax) need to be shown

The cart items is easy, because you created a user control for that in Chapter 7, so you only need to adddata binding for the totals

Try It Out Confirming the Order

1. Select the Shopping Cartstep From the Solution Explorer, open the user-controlsfolderand drag Cart.ascxonto the page, dropping it into the empty area on above the Previous andFinish buttons (see Figure 8-10)

Figure 8-10: The Shopping Cartuser control in the Wizard

2. From the Data section of the Toolbox, drag an ObjectDataSourcecontrol onto the page, ping it to the right of the Shopping Cartuser control

drop-248