ASP.Net: Creating cart using master page and content page

1. Create class file in App_Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Purchase
/// </summary>
public class Purchase
{
    public Purchase()
	{
		//
		// TODO: Add constructor logic here
		//
	}
    public string ProductName
    {
        get;
        set;
    }
    public int ProductPrice
    {
        get;
        set;
    }

}

2.Style Sheet(StyleSheet.css)

body {
    padding: 0;
    margin: 0;
    background-color:#ececec;
}
#header {
    width: 100%;
    height: 70px;
    box-shadow: 0 0 10px;   
    font-family: Myriad Pro;
    background-color:#fff;  
    position:fixed;
    top:0;      
  }
    #table {
        width: 1020px;
        margin:-12px auto;
        height:60px;       
                      
    }
#search div {
    border: 1px solid grey;
    width: 530px;
    text-align: right;
}
    #search div img {
        position: relative;
        top: 4px;
    }
    #cart a div:hover
    {
     opacity:1;
     box-shadow:0 0 10px; 
    }
    .user
    {
        text-decoration:none; color:#383838;
    }    
   .user:hover
   {      
       text-decoration:underline;
   }
#cart a {
    text-decoration: none;
    color:#454545;     
}
#cart a div {
   box-shadow:0 0 5px;
    text-align: center;
    padding-top: 2px;
    opacity:.8;
    }
#content{
 width: 1020px;
  margin:auto;
  margin-top:-23px; 
  background-color:#fff;
  }
.menu
{
   text-align:center;
   margin-bottom:15px;
   width:160px;
}

.submenu
{
    box-shadow:0 2px 15px;    
    border:2px solid #c5c5c5;
    background-color:#ececec;   
}
.menuborder
{
     box-shadow:0 0 10px; 
     width:100%;     
     background-color:#8700DD;
      margin-top:53px;     
      height:44px;   
}
.border
{
    background-color:#8700DD;
     margin-top:-12px;
     width:1020px;
     text-align:center;      
}
.items
{
    width:100%;    
}
.itm
{
    width:142px;
    font-family:Arial Narrow;
    font-size:small;
    height:200px;   
    padding:20px;    
}
.itm_1
{
    width:162px;
    font-family:Arial Narrow;
    font-size:small;
    height:200px;   
    padding:20px 0 0 30px;    
}
.itm_1:hover
{
    box-shadow:0 0 5px;   
}

.itm1
{
    width:162px;
    font-family:Arial Narrow;
    font-size:small;
    height:310px;
    padding:10px 0 0 20px;   
       
}
.itm_2
{
    width:162px;
    font-family:Arial Narrow;
    font-size:small;
    height:310px;
    padding:10px 0 0 30px;   
       
}
.itm_2:hover
{
  box-shadow:0 0 5px;   
}
.itm3
{
    width:226px;
    font-family:Arial Narrow;
    font-size:small;
    height:425px;  
     padding:10px 0 0 20px;          
}
.hed1
{
 background-color:#8700DD;
  color:White;
   font-family:Arial Narrow;
    text-align:left;
     padding:5px 15px;
     font-weight:bold;    
}
.itm2
{
  box-shadow:0 0 5px;
  margin:0 0 5px 2px;   
}
.hover:hover
{
    box-shadow:0 0 5px;
}
.hover
{
padding:5px;
border-bottom:1px solid grey;
}
.button
{
    font-size:1.0em;
    font-family:Adobe Fan Heiti Std B;  
  color:#fff;  
}
.button:hover
{
  opacity:.8;
}
.cartrow
{
padding:5px;
border-bottom:1px solid #d5d5d5 ;
}
.cartheader
{
color:#0b8ed9;
border-bottom:1px solid grey;
}
.footer
{
 border-top:1px solid #0b8ed9;  
}

           
           
           
           

3. Add Master.Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>shopping online</title>
    <link href="StyleSheet.css" rel="stylesheet" />  
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">
            <div align="right">                
                <table  style="font-size:.7em; width:90px; font-family:Arial; text-align:center">
                    <tr>
                        <td style="border-right:1px solid grey"><a href="#" class="user" >Signup</a></td>
                        <td><a href="#" class="user" >Login</a></td>
                    </tr>
                </table>                                     
            </div>
            <table id="table">
                <tr>
                <td valign="top"><a href="index.aspx" style=" text-decoration:none"><img src="image/shoppinglogo.jpg" style=" border:2px solid #fff" /></a></td>
                    <td id="search"><div>
                        <img src="image/search.png"/>&nbsp
                        <asp:TextBox ID="TextBox1" runat="server" Width="400px" BorderStyle="None" ></asp:TextBox><asp:Button ID="Button1" runat="server" Text="SEARCH" Height="26px" Width="100px" BackColor="#8003d8" ForeColor="White" Font-Bold="true"  Font-Names="arial" BorderStyle="None" /></div> </td>
                    <td id="cart">
                        <a href="cart.aspx" ><div><img src="image/cart2.jpg" style="border:2px solid #fff" />
                         <span style=" font-size:small;  vertical-align:super;">CART&nbsp
                         <asp:Label ID="Label1" runat="server" Text="0" BackColor="#0F9DC5" style="text-align:center; padding:4px; border-radius:10px" Width="12px" Height="12px" ForeColor="White" Font-Size="Smaller"></asp:Label>
                         </span>
                        </div></a>
                        <asp:Label ID="Label2" runat="server" Font-Size="Small" Font-Names="arial narrow" ForeColor="Green" Text=""></asp:Label>
                        </td>
                </tr>
            </table>            
        </div><br />
       <div class="menuborder"></div>
       <div id="content"> 
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="border" 
                StaticEnableDefaultPopOutImage="False">
        <DynamicHoverStyle BackColor="#8003D8" ForeColor="White" />
        <DynamicMenuItemStyle Font-Names="Arial Narrow" Width="160px" 
            VerticalPadding="8px" ForeColor="#8003D8"  />
        <DynamicMenuStyle 
            CssClass="submenu"  />
        <Items>
            <asp:MenuItem Text="ELECTRONICS" Value="ELECTRONICS">
                <asp:MenuItem NavigateUrl="~/camera.aspx" Text="CAMERA" Value="CAMERA"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/watch.aspx" Text="WATCH" Value="WATCH"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/notebook.aspx" Text="NOTEBOOK" Value="NOTEBOOK"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="MEN" Value="MEN">
                <asp:MenuItem NavigateUrl="~/tshirt.aspx" Text="T-SHIRT" Value="T-SHIRT"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/shoes.aspx" Text="SHOES" Value="SHOES"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="WOMEN" Value="WOMEN">
                <asp:MenuItem NavigateUrl="~/bag.aspx" Text="BAGS" Value="BAGS"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/jwellery.aspx" Text="JWELLERYS" Value="JWELLERYS"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/saree.aspx" Text="SAREES" Value="SAREES"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="BABY&amp;KIDS" Value="BABY&amp;KIDS"></asp:MenuItem>
            <asp:MenuItem Text="HOME&amp;KITCHEN" Value="HOME&amp;KITCHEN"></asp:MenuItem>
            <asp:MenuItem Text="MORE STORES" Value="MORE STORES"></asp:MenuItem>
        </Items>
        <StaticHoverStyle ForeColor="#11c2dc"/>
        <StaticMenuItemStyle Font-Names="Arial Narrow" CssClass="menu"           
            ForeColor="White" /> 
        <StaticMenuStyle HorizontalPadding="5px"  />
</asp:Menu>       
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
    </div>
    <br />
    <div style="background-color:#0b8ed9; width:100%; height:150px"></div>
    </form>
</body>
</html>


4. Content Page (Index.aspx)

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INDEX.aspx.cs" Inherits="INDEX" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    
<style type="text/css">
    .style1
    {
        text-align: right;
    }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <center><table cellpadding="10px" cellspacing="10px">
<tr><td class="style1">
    <br />
    <asp:Image ID="Image1" runat="server" Height="100px" 
        ImageUrl="~/image/canon-digital-ixus-265-hs-125x125-imadw2dzwfccygyg.jpeg" 
        Width="150px" style="text-align: center" />
    <br />
    <br />
    Product
    <asp:TextBox ID="TextBox2" runat="server" ReadOnly="True">Canon SmartCam</asp:TextBox>
    <br />
    Price
    <asp:TextBox ID="TextBox3" runat="server" ReadOnly="True">10000</asp:TextBox>
    <br />
    <br />
    <asp:Button ID="Button2" runat="server" BackColor="Lime" Text="BUY" 
        onclick="Button2_Click" style="height: 26px" />
    </td><td class="style1">
        <asp:Image ID="Image2" runat="server" Height="150px" 
            ImageUrl="~/image/bns-0119-butterflies-shoulder-bag-quilting-design-275x275-imadu2p7ht5jzwzf.jpeg" 
            Width="150px" />
        <br />
        Product
        <asp:TextBox ID="TextBox4" runat="server" ReadOnly="True">Caprese Trendy Bags</asp:TextBox>
        <br />
        Price
        <asp:TextBox ID="TextBox5" runat="server" ReadOnly="True">10000</asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button3" runat="server" BackColor="Lime" Text="BUY" 
            onclick="Button3_Click" />
    </td></tr>
<tr><td class="style1">
    <asp:Image ID="Image3" runat="server" Height="150px" 
        ImageUrl="~/image/dell-vostro-2420-notebook-125x125-imadkj6a3jbtvqa5.jpeg" 
        Width="150px" />
    <br />
    <br />
    Product
    <asp:TextBox ID="TextBox6" runat="server" ReadOnly="True">Dell Vostro 3551</asp:TextBox>
    <br />
    Price
    <asp:TextBox ID="TextBox7" runat="server" ReadOnly="True">40000</asp:TextBox>
    <br />
    <br />
    <asp:Button ID="Button4" runat="server" BackColor="Lime" Text="BUY" 
        onclick="Button4_Click" />
    </td><td class="style1">
        <asp:Image ID="Image4" runat="server" Height="150px" 
            ImageUrl="~/image/6201-vibhavari-designer-275x340-imads2csvrughsw2.jpeg" 
            style="margin-left: 0px" Width="150px" />
        <br />
        <br />
        Product
        <asp:TextBox ID="TextBox8" runat="server" ReadOnly="True">Designer Saree</asp:TextBox>
        <br />
        Price
        <asp:TextBox ID="TextBox9" runat="server" ReadOnly="True">5000</asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button5" runat="server" BackColor="Lime" Text="BUY" 
            onclick="Button5_Click" />
    </td></tr>
</table>

        
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>

</center>
</asp:Content>

Code behind (Index.aspx.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;

public partial class INDEX : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }
    
    protected void Button2_Click(object sender, EventArgs e)
    {
        Purchase p = new Purchase();
        p.ProductName = TextBox2.Text;
        p.ProductPrice = int.Parse(TextBox3.Text);
        if (Page.Session["BUY"] == null)
        {
            List<Purchase> pc = new List<Purchase>();
            pc.Add(p);
            Page.Session["BUY"] = pc;
            
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = pc.Count.ToString();

        }
        else 
        {
            List<Purchase> y = Page.Session["BUY"] as List<Purchase>;
            y.Add(p);
            Page.Session["BUY"] = y;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = y.Count.ToString();
        }
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        Purchase p = new Purchase();
        p.ProductName = TextBox4.Text;
        p.ProductPrice = int.Parse(TextBox5.Text);
        if (Page.Session["BUY"] == null)
        {
            List<Purchase> pc = new List<Purchase>();
            pc.Add(p);
            Page.Session["BUY"] = pc;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = pc.Count.ToString();
        }
        else
        {
            List<Purchase> y = Page.Session["BUY"] as List<Purchase>;
            y.Add(p);
            Page.Session["BUY"] = y;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text =y.Count.ToString();
        }
    }
    protected void Button4_Click(object sender, EventArgs e)
    {
        Purchase p = new Purchase();
        p.ProductName = TextBox6.Text;
        p.ProductPrice = int.Parse(TextBox7.Text);
        if (Page.Session["BUY"] == null)
        {
            List<Purchase> pc = new List<Purchase>();
            pc.Add(p);
            Page.Session["BUY"] = pc;

            
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = pc.Count.ToString();
        }
        else
        {
            List<Purchase> y = Page.Session["BUY"] as List<Purchase>;
            y.Add(p);
            Page.Session["BUY"] = y;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = y.Count.ToString();
        }
    }
    protected void Button5_Click(object sender, EventArgs e)
    {
        Purchase p = new Purchase();
        p.ProductName = TextBox8.Text;
        p.ProductPrice = int.Parse(TextBox9.Text);
        if (Page.Session["BUY"] == null)
        {
            List<Purchase> pc = new List<Purchase>();
            pc.Add(p);
            Page.Session["BUY"] = pc;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = pc.Count.ToString();

        }
        else
        {
            List<Purchase> y = Page.Session["BUY"] as List<Purchase>;
            y.Add(p);
            Page.Session["BUY"] = y;
            Label masterlbl = (Label)Master.FindControl("Label1");
            masterlbl.Text = y.Count.ToString();
        }
    }
   
}


5. Show Cart(cart.aspx)

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="cart.aspx.cs" Inherits="cart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<center>
<table>
<tr>
<td>
    <asp:GridView ID="GridView1" runat="server" 
         OnRowCommand="GridView1_RowCommand"  AutoGenerateColumns="false"  ShowFooter="true"  OnRowDataBound="GridView1_RowDataBound" >
        <Columns>
                
                 <asp:BoundField  DataField="ProductName"  HeaderText="Product Name" /> 
                 
                 <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="Label1" runat="server" Text="Amount"/>
                    </HeaderTemplate>

                    <ItemTemplate>
                      <asp:Label id="Amount" Runat="Server" Text=<%#Eval("ProductPrice") %> />
                    </ItemTemplate>
                    
                    <FooterTemplate>
                        <asp:Label ID="Label2" runat="server" Text="0"></asp:Label>
                    </FooterTemplate>
                 
                 </asp:TemplateField>
               
               
                 <asp:BoundField  DataField="ProductPrice"  HeaderText="Product Name" /> 
                 
                 <asp:ButtonField  Text="X" ButtonType="Button" CommandName="del" />




        </Columns>
    </asp:GridView>
</td>
</tr>
</table>
</center>
</asp:Content>


Code behind (cart.aspx.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class cart : System.Web.UI.Page
{
    Decimal gtot;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["BUY"] != null)
        {
            showItem();
        }
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            Decimal p = Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "ProductPrice"));
           
            gtot = gtot + p;
           
        }



        if (e.Row.RowType == DataControlRowType.Footer)
        {
            Label lbl2 = (Label)e.Row.FindControl("Label2");
            //lbl2.Text = gtot.ToString();
            lbl2.Text = String.Format("{0:0.00}", gtot);
        }
    }
    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "del")
      {
      
            int index = Convert.ToInt32(e.CommandArgument);
            delItem(index);
     
            
        }
    }


    protected void delItem(int i)
    {
        List<Purchase> y = Page.Session["BUY"] as List<Purchase>;
        y.RemoveAt(i);
        Page.Session["BUY"] = y;
        showItem();
        gtot = 0;
    }
    protected void showItem()
    {
        List<Purchase> y = Page.Session["BUY"] as List<Purchase>;

        gtot = 0;

        Page.Session["BUY"] = y;
        GridView1.DataSource = y;
        GridView1.DataBind();
        Label masterlbl = (Label)Master.FindControl("Label1");
        masterlbl.Text = y.Count.ToString();
    }

}

6. Output

Add item to cart

item1

 

After Item add into cart

item2

 

Click cart Button to show cart

item3