Ok, now we are on the first of the checkout pages, open the file cart/getcustinfo.aspx
This page is used to obtain customer information and save the data in the database, for new customers is will insert a new record into the database, for return customers is will updated the record to reflect any changes to the data made by the customer.
When you first open this page you will see a table containing all the form fields required to obtain the data from the customer, the table and form should look similar to the following:
Begin by adding a cart control, as in the previous pages by clicking on the
icon in the insert bar, the cart dialog will then appear, give the cart an ID of "Cart1" and click "OK"
Next insert an "Insert Database Record" control
don't let the name confuse you, this control will also perform updates if required, as you will soon see.
The following dialog will appear when the "Insert Database Record" control is inserted:
In the general section of this dialog set the following properties:
ID = WriteToDB1
ConnectionString = ConStr
DBtable = Customers
DataBaseType = OleDb
CheckAndUpdate = True (check the checkbox)
CheckSQL = see below
The CheckSQL should be set to an SQL statement that the control can use to check if a record that matches the customer already exists in the database, if it does the existing record gets updated, otherwise a new record will be inserted, the syntax will be different depending on whether your using VB or C#.
For this walkthrough set the CheckSQL propertiy to:
C#
| <%# "[EmailAddress] = '" + this.EmailAddress.Text + "'" %>
|
VB
| <%# "[EmailAddress] = '" & Me.EmailAddress.Text & "'" %>
|
This expression is saying select from the specified DBtable where the EmailAddress field = the value the user puts for their email address in the provided EmailAddress textbox, whether this finds a matching record in the database or not is how the control decides to perform an insert onto or an update of the database.
Next navigate the "Parameters" section of the "Insert Database Record" dialog and define what database field gets which form field value:
Using the fields on the dialog define the following parameters:
C#
FirstName gets the value: <%# this.FirstName.Text %>
LastName gets the value: <%# this.LastName.Text %>
EmailAddress gets the value: <%# this.EmailAddress.Text %>
Address gets the value: <%# this.Address.Text %>
LoginPass gets the value: <%# this.Password.Text %>
VB
FirstName gets the value: <%# Me.FirstName.Text %>
LastName gets the value: <%# Me.LastName.Text %>
EmailAddress gets the value: <%# Me.EmailAddress.Text %>
Address gets the value: <%# Me.Address.Text %>
LoginPass gets the value: <%# Me.Password.Text %>
This will control what value is inserted into which database field.
Next click the "OK" button on the dialog and the "webxelcart:writetodb" tag will be inserted into your page.
NOTE: due to the fact that the expression used for the CheckSQL property contains both ' and " characters it is necessary to remove the delaminating characters from around the CheckSQL property value, currently the property will be defined as:
C#
| CheckSQL="<%# "[EmailAddress] = '" + this.EmailAddress.Text + "'" %>"
|
VB
| CheckSQL="<%# "[EmailAddress] = '" & Me.EmailAddress.Text & "'" %>"
|
You must remove the first and last " characters to avoid a parser error caused by the mixture of " and ' confusing the ASP.NET page parser, change it in the source code so it look like:
C#
| CheckSQL=<%# "[EmailAddress] = '" + this.EmailAddress.Text + "'" %>
|
VB
| CheckSQL=<%# "[EmailAddress] = '" & Me.EmailAddress.Text & "'" %>
|
Ok, you should now have the Cart and Insert Database Record controls added to the page and they will show up on the page like below:
We now have to write some code used to take the customer input and store it within the carts StorageItems for displaying on pages we will be working on later, we need to store this data using one of two different methods depending on whether the "Insert Database Record" control performed an update or an insert, thankfully the control raises different events depending on which action was taken, these events even expose the data in the database, this easy access to the data combined with powerful methods for storing data in the cart make this a real simple task.
Begin by selecting the "Insert Database Record" control
and then look at the property inspector:
Click the "Wire Event..." button and the following dialog will appear:
Select the "RecordInserted" event and then click "OK", the following code block will be inserted into your page:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordInserted(object sender, WebXelCart.RecordInsertedEventArgs e)
|
| {
|
| //code here
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordInserted(sender As Object, e As WebXelCart.RecordInsertedEventArgs)
|
| 'code here
|
| End Sub
|
| </script>
|
Modify this event procedure to contain the following code:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordInserted(object sender, WebXelCart.RecordInsertedEventArgs e)
|
| {
|
| Cart1.Store(Request.Form);
|
| Cart1.CustomerID = e.Identity;
|
| Response.Redirect("summery.aspx");
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordInserted(sender As Object, e As WebXelCart.RecordInsertedEventArgs)
|
| Cart1.Store(Request.Form)
|
| Cart1.CustomerID = e.Identity
|
| Response.Redirect("summery.aspx")
|
| End Sub
|
| </script>
|
|
|
Next we will define the controls RecordUpdated event and associated code, select the "Insert Database Record" control
and then click the "Wire Event..." button again, this time select "RecordUpdated" form the list and the following code block will be inserted into the page:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordUpdated(object sender, WebXelCart.RecordUpdatedEventArgs e)
|
| {
|
| //code here
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordUpdated(sender As Object, e As WebXelCart.RecordUpdatedEventArgs)
|
| 'code here
|
| End Sub
|
| </script>
|
Modify this event procedure to contain the following code:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordUpdated(object sender, WebXelCart.RecordUpdatedEventArgs e)
|
| {
|
| Cart1.Store(e.DataRow);
|
| Cart1.CustomerID = e.DataRow["CustomerID"];
|
| Response.Redirect("summery.aspx");
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordUpdated(sender As Object, e As WebXelCart.RecordUpdatedEventArgs)
|
| Cart1.Store(e.DataRow)
|
| Cart1.CustomerID = e.DataRow.Item("CustomerID")
|
| Response.Redirect("summery.aspx")
|
| End Sub
|
| </script>
|
This code will run after the WriteToDB1 control Updates a record, it calls the Carts store method and stores all the values in the exposed DataRow (the updated record), then it sets the Carts CustomerID to the value of the DataRows CustomerID field and finally it redirect to the summery.aspx page that we will be looking at later.
Before we move to the next stage select the cart
and using the property inspectors "Wire Event.." button define the Carts load event, then edit the inserted code block to contain the folowing code:
C#
<script runat="server">
| void Cart1_Load(object sender, System.EventArgs e)
|
| {
|
| if(!Page.IsPostBack)
|
| {
|
| this.FirstName.Text = Cart1["FirstName"];
|
| this.LastName.Text = Cart1["LastName"];
|
| this.EmailAddress.Text = Cart1["EmailAddress"];
|
| this.Address.Text = Cart1["Address"];
|
| }
|
| }
|
VB
<script runat="server">
| Sub Cart1_Load(sender As Object, e As System.EventArgs)
|
| If Not Page.IsPostBack Then
|
| Me.FirstName.Text = Cart1.Item("FirstName")
|
| Me.LastName.Text = Cart1.Item("LastName")
|
| Me.EmailAddress.Text = Cart1.Item("EmailAddress")
|
| Me.Address.Text = Cart1.Item("Address")
|
| End If
|
| End Sub
|
This last addition of code will pre-fill the form fields with existing date if the customer is a return customer or has filled the form in already but navigated away from this page and then returned, it will save then having to fill the form in again.
One last point to make before moving to the next section, ASP.NET will not allow you to set the Text value of a Textbox control if the Textbox is a password field and is a feature of the .NET Framework, albeit an annoying feature. This has the effect of the customer having to fill in the password field even when they have previously logged in, that is why it's an annoying feature, to get round the problem you can place the following client site JavaScript into the page after the closing </HTML> tag, this will insert the customers password into the appropriate fields once the page loads.
C#
<script language="JavaScript">
| document.forms[0].Password.value = '<%= Cart1["LoginPass"] %>';
|
| document.forms[0].PasswordConfirm.value = '<%= Cart1["LoginPass"] %>';
|
VB
<script language="JavaScript">
| document.forms[0].Password.value = '<%= Cart1.Item("LoginPass") %>';
|
| document.forms[0].PasswordConfirm.value = '<%= Cart1.Item("LoginPass") %>';
|
Next: Customer Login