ASP.NET Shopping Cart Gridview

Question

Hey I am building a shop (without payment)

i.e.

1) Select Products 2) Checkout 3) Confirmation

The selecting products screen will look like a gridview which will display

name price quantity Text Text Input box

So i.e. lets say I have 10 products per page so i.e. 10 quantity input boxes per gridview.

And then I have 2 Buttons below my gridview i.e. Update and Checkout.

Just even worrying about Update for now.

How could that work i.e. would I have to check every input box in gridview for which a value was entered ?

I.e. is there any example how I can loop through gridview row check for a value which is greater than 0 or null for example and if there is a value then perform a function like

ShoppingCart.Instance.AddItem(5, 5)

My Gridview Code at the moment

<asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark"  HeaderStyle-CssClass="header_req" BorderWidth="0px" GridLines="None" AllowPaging="true" PageSize="25" EmptyDataText="No records." AllowSorting="true" Width="100%">         
    <Columns>                         
            <asp:TemplateField HeaderText="Product Name" HeaderStyle-Width="130px" SortExpression="productName">
                <ItemTemplate>   
                <asp:Label ID="ProductNameField" runat="server" Text='<%# Eval("productName").ToString() %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Pack Size" HeaderStyle-Width="70px" SortExpression="packSize">
                <ItemTemplate>  
                <asp:Label ID="PackSizeField" runat="server" Text='<%#  Eval("packSize").ToString()%>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Trade Price" HeaderStyle-Width="130px" SortExpression="address">
                <ItemTemplate>   
                <asp:Label ID="TradePriceField" runat="server" Text='<%#  DisplayMoney(Eval("tradePrice").ToString())%>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Discount" HeaderStyle-Width="60px" SortExpression="discount">
                <ItemTemplate>   
                <asp:Label ID="DiscountField" runat="server" Text='<%# Eval("discount").ToString() %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Actual Price" HeaderStyle-Width="130px" SortExpression="actualPrice">
                <ItemTemplate>   
                <asp:Label ID="ActualPriceField" runat="server" Text=''></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
    <Columns>                         
            <asp:TemplateField HeaderText="Stock" HeaderStyle-Width="130px" SortExpression="stock_indicator">
                <ItemTemplate>   
                <asp:Label ID="StockField" runat="server" Text='<%# DisplayStockLevel(Eval("stock_indicator").ToString()) %>'></asp:Label>
                </ItemTemplate>                     
            </asp:TemplateField> 

    </Columns>
     <Columns>  

    <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="txtQuantity" Columns="5"></asp:TextBox><br />
                        <asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("product_ID_key") %>' style="font-size:12px;"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
    </Columns>
    <HeaderStyle CssClass="header_req" />
    <AlternatingRowStyle CssClass="tr_dark" />
    <PagerStyle CssClass="pagination" />
    <PagerSettings PageButtonCount="3" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" Mode="NumericFirstLast" />      
</asp:GridView>

Answer 1

Place this code in your button click event to iterate through each row of your productList GridView and call ShoppingCart.Instance.AddItem(productId, qty) or any other method you want, to update the product list and their quantities:

For i As Integer = 0 To Me.productListTable.Rows.Count - 1
            Dim txtQuantity As TextBox = CType(productListTable.Rows(i).FindControl("txtQuantity"), TextBox)
            If Not txtQuantity Is Nothing Then
                Dim qty As Integer = 0
                If txtQuantity.Text.Trim() <> String.Empty Then
                    qty = Integer.Parse(txtQuantity.Text.Trim())

                    'get unique id of product - it can be SKU code or whatever that is unique for every product
                    Dim productId As String = productListTable.DataKeys(i).Value

                    'Update product list and quantities
                    ShoppingCart.Instance.AddItem(productId, 5)
                End If
            End If
        Next

If you have noticed in ShoppingCart.Instance.AddItem method, there is a product Id I am passing so in code we update the correct item, in order to retrieve this unique key, you need to add DataKeyName property in your GridView tags with value equals to the name of unique key... e.g.: DataKeyNames="ProductId"

<asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" DataKeyNames="ProductId"
        AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark" HeaderStyle-CssClass="header_req"
        BorderWidth="0px" GridLines="None" AllowPaging="true" PageSize="25" EmptyDataText="No records."
        AllowSorting="true" Width="100%">

Answer 2

You could update each row with AJAX as you type in the updated quantity. An easy way to do this would be to wrap the GridView in an UpdatePanel, and then go from there.

More advanced would be to use various other methods of AJAX.

The basic way though would be to loop through each GridView row, get the textbox value for each, and then update the cart if needed.

For the storage side, what do you mean by the Shop Data? Is this all the products? or just the Cart data?

If it is just the Cart data then putting this in a session is fine for a small scale site. For a larger scale site you would want to look into storing this in a database.