ShoppingCart using Gridview in ASP.NET

• Download ShoppingCart.zip - 16 KB

Introduction

This article will guide you to create ShoppingCart using Gridview in ASP.net with code VB.

Background

I have succeeded in creating a shopping cart use GridView combination Session .  Everyone knows Session has huge storage capacity, make use of it in this work . Although this issue has been many people do, but you can compare my post to them. You will see the difference.

Using the code

Operation process is described as follows: First created ShoppingCart using DataTable , then saved to the session variable. Session variables will keep your cart during work .Default when a user login successfull , the Shoppingcart will create, by contrast does not create.

Sub CreateShopCart()
    Dim dt As New DataTable
    If dt.TableName.Contains("tblShopCart") = True Then  //check tblShopCart have not use
        Exit Sub     
    Else
        dt = New DataTable("tblShopCart")	//create new tblshopcart						
        dt.Columns.Add("proid", GetType(Integer))
        dt.Columns.Add("proname", GetType(String))
        dt.Columns.Add("number", GetType(Integer))
        dt.Columns.Add("price", GetType(Double))
        dt.Columns.Add("total", GetType(Double))
    End If
    Session("ShopCart") = dt		//save tblshopcart into Session variable
End Sub

When login is successful, users will go shopping, when the user clicks a purchase, we will have Sub Addtocart(). The main  of this sub is to add a row to Session("shopcart"), check if the product is then automatically increase the amount of a product. and this shopcart is in the Session variable.

Sub AddToCart()
    Dim dt As DataTable = Session("ShopCart")
    If dt.Rows.Count <= 0 Then
        Dim dr As DataRow = dt.NewRow
        dr("proid") = Request("proid")
        dr("proname") = lb_proname.Text
        dr("number") = 1
        dr("price") = lb_proprice.Text
        dr("total") = dr("number") * dr("price")
        dt.Rows.Add(dr)
        Session("ShopCart") = dt
        Exit Sub
    Else
        For i As Integer = 0 To dt.Rows.Count - 1
            If dt.Rows(i)("proid") = Request("proid") Then
                dt.Rows(i)("number") += 1
                dt.Rows(i)("total") = dt.Rows(i)("number") * dt.Rows(i)("price")
                Session("ShopCart") = dt
                Exit Sub
            End If
        Next
        Dim dr As DataRow = dt.NewRow
        dr("proid") = Request("proid")
        dr("proname") = lb_proname.Text
        dr("number") = 1
        dr("price") = lb_proprice.Text
        dr("total") = dr("number") * dr("price")
        dt.Rows.Add(dr)
        Session("ShopCart") = dt
        Exit Sub
    End If  
End Sub

When users see more details on shopping cart, you will need to bind data from Session ("Shopcart") to GridView. On this Girdview, I will let the user can adjust the amount shopcart as edit or delete  

<asp:GridView ID="gv_shopcart" runat="server" AutoGenerateColumns="False" 
           DataKeyNames="proid" ShowFooter="True" 
           ShowHeaderWhenEmpty="True" 
           EmptyDataText="  Not product in shopping cart " 
           EmptyDataRowStyle-ForeColor="Red" GridLines="None">
        <HeaderStyle BackColor="LightCyan" ForeColor="MediumBlue" />
        <FooterStyle BorderStyle="Groove" BorderWidth="1" 
           BackColor="LightCyan" ForeColor="MediumBlue" />
    <Columns>
        <asp:BoundField DataField="proid" FooterText="Total Bill" 
            HeaderText="Pro ID" ReadOnly="True">
        <FooterStyle HorizontalAlign="Center" />
        <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        </asp:BoundField>
        <asp:BoundField DataField="proname" HeaderText="ProName" ReadOnly="True">
        <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        </asp:BoundField>
        <asp:BoundField DataField="number" HeaderText="Number">
        <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Left" />
        </asp:BoundField>
        <asp:BoundField DataField="price" HeaderText="Price" ReadOnly="True">
        <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        </asp:BoundField>
        <asp:TemplateField HeaderText="Total Price">
            <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
            <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
            <ItemTemplate>
                <asp:Label ID="lb_prototal" runat="server" 
                             Text='<%#Eval("total") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lb_totalbill" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:CommandField ButtonType="Image" 
            CancelImageUrl="~/Image/cancel.png"
            DeleteImageUrl="~/Image/delete.png" 
            EditImageUrl="~/Image/edit.png" HeaderText="Option" 
            ShowDeleteButton="True" ShowEditButton="True" 
            UpdateImageUrl="~/Image/ok.png">
        <HeaderStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        <ItemStyle BorderStyle="Groove" BorderWidth="1px" HorizontalAlign="Center" />
        </asp:CommandField>
    </Columns>
</asp:GridView>

// this is  VB code Cart.aspx.vb

Sub load_cart()
    If Session("ShopCart") Is Nothing Then
        gv_shopcart.DataSource = ""
        gv_shopcart.DataBind()
    Else
        gv_shopcart.DataSource = Session("ShopCart")
        gv_shopcart.DataBind()
    End If
End Sub

Protected Sub gv_shopcart_RowCancelingEdit(ByVal sender As Object, ByVal e As _
  System.Web.UI.WebControls.GridViewCancelEditEventArgs) Handles gv_shopcart.RowCancelingEdit
        gv_shopcart.EditIndex = -1
        load_cart()
    End Sub

Protected Sub gv_shopcart_RowDataBound(ByVal sender As Object, ByVal e As _
  System.Web.UI.WebControls.GridViewRowEventArgs) Handles gv_shopcart.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim price As Double = 0.0
        Double.TryParse(e.Row.Cells(4).Text, price)
        priceTotal += Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "total"))
    End If
    If e.Row.RowType = DataControlRowType.Footer Then
        Dim lbtotalbill As Label = DirectCast(e.Row.FindControl("lb_totalbill"), Label)
        lbtotalbill.Text = priceTotal.ToString("c")
    End If
End Sub

Protected Sub gv_shopcart_RowDeleting(ByVal sender As Object, ByVal e As _
  System.Web.UI.WebControls.GridViewDeleteEventArgs) Handles gv_shopcart.RowDeleting
    Dim dt As DataTable = Session("ShopCart")
    If dt.Rows.Count <= 0 Then
        load_cart()
    Else
        dt.Rows(e.RowIndex).Delete()
        dt.AcceptChanges()
        Session("ShopCart") = dt
        load_cart()
    End If
End Sub

Protected Sub gv_shopcart_RowEditing(ByVal sender As Object, ByVal e _
  As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gv_shopcart.RowEditing
    gv_shopcart.EditIndex = e.NewEditIndex
    load_cart()
End Sub

Protected Sub gv_shopcart_RowUpdating(ByVal sender As Object, ByVal e As _
          System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles gv_shopcart.RowUpdating
    Dim dt As DataTable = Session("ShopCart")
    Dim txt_number As TextBox = gv_shopcart.Rows(e.RowIndex).Cells(2).Controls(0)
    Dim reg_exp As New Regex("^\d+$")
    Dim arow As GridViewRow = gv_shopcart.Rows(e.RowIndex)
    If Not reg_exp.IsMatch(DirectCast(arow.Cells(2).Controls(0), TextBox).Text) Then
        DirectCast(arow.Cells(2).Controls(0), TextBox).Text = "Only number positive"
        DirectCast(arow.Cells(2).Controls(0), TextBox).ForeColor = Drawing.Color.Red
        e.Cancel = True
    Else
        Dim number_pro As Integer = Integer.Parse(txt_number.Text)
        If number_pro = 0 Then
            dt.Rows(e.RowIndex).Delete()
            dt.AcceptChanges()
            Session("ShopCart") = dt
            load_cart()
        Else
            dt.Rows(e.RowIndex)("number") = number_pro
            dt.Rows(e.RowIndex)("total") = dt.Rows(e.RowIndex)("price") * dt.Rows(e.RowIndex)("number")
            dt.AcceptChanges()
            Session("ShopCart") = dt
            gv_shopcart.EditIndex = -1
            load_cart()
        End If
    End If
End Sub

Demo

You can see it at: http://www.youtube.com/watch?v=fygTXk7_wHQ

Note

To check the work process, I should remind you to change the name server in the web.config file of the project  

<appSettings>
    <add key="stringconnect" 
      value="server=You change name your Server in here ;database=ShopCart ; integrated security=true"/>
</appSettings>