This table is within a form that has runat="server" attribute and also has a repeat region pre-applied to one of the table rows, this lists every product in the database.
Begin adding the cart functionality by inserting a cart control
Give the cart an ID of "Cart1" and set the OnAddedToCartURL property to = ../cart/cart.aspx, this will redirect the customer to the cart display page after the items have been added.
Next place your cursor in the empty table cell with the white background below the heading "Qty", then insert an "Add To Cart FormField"
and the following dialog will appear:
Set the properties as shown in the dialog image:
| FieldName = ID (select it from the dropdown box)
|
| FieldValue = <%# DataSet1.FieldValue("PartNo", Container) %> (use dynamic data button)
|
| FieldType = hidden
|
Click "OK" and the "webxelcart:formfield" tag will be added to the table cell
Repeat this process another three times inserting three more "webxelcart:formfield" tags with the following property values:
| FieldName = Description
|
| FieldValue = <%# DataSet1.FieldValue("Description", Container) %>
|
| FieldType = hidden
|
|
|
| FieldName = RawCost
|
| FieldValue = <%# DataSet1.FieldValue("Price", Container) %>
|
| FieldType = hidden
|
|
|
| FieldName = Quantity
|
| FieldType = text
|
|
|
This should result in having four "webxelcart:formfield" tags in the table cell, three hidden fields and one text field as shown in the following image:
That's it, the page is ready to run.
What is happening with this page is that when the customer fills in some quantities in the form and clicks the button the page posts back to itself, the cart control automatically detects the PostBack and checks to see if a field called "Quantity_0" exists in the posted form collection, if it does the cart then executes it's internal method that harvests the form collection looking for field sets.
A field set is the set of webxelcart:formfield's you inserted in the table row, each "webxelcart:formfield" in the table row will have it's rendered field name ending with "_#" where # will be the ItemIndex number of the dataset item bound to that table row, so in the client side HTML rendered from this page the first table row will contain the fields:
ID_0
Description_0
RawCost_0
Quantity_0
The next table row will contain the fields:
ID_1
Description_1
RawCost_1
Quantity_1
And so on, the cart checks each Quantity_# field to see if the posted value is a numeric value over 0, if it is the whole field set for that row is used to add a new item to the cart, then the cart checks the posted value of the next field set index # and so on, once it's finished adding the item/s to the cart it then redirects the customer to the cart display page.