Now to create Products page, add a new webform and name it Products.aspx, add sqldataSource and configure it for select statement,
Add a DataList Control on the page and make SqlDataSource1 it’s source.
Configure Datalist according to below mentioned source
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”
ConnectionString=”<%$ ConnectionStrings:ConnectionString %>”
SelectCommand=”SELECT [ProductID], [Name], [Description],
[Price], [ImageUrl] FROM [Products]”>
</asp:SqlDataSource>
</div>
<asp:DataList ID=”DataList1″ runat=”server”
DataSourceID=”SqlDataSource1″
RepeatColumns=”4″
RepeatDirection=”Horizontal”>
<ItemTemplate>
<asp:ImageButton ID=”ImageButton1″ runat=”server”
ImageUrl='<%# Eval(“ImageUrl”, “Images\\thumb_{0}”) %>’
PostBackUrl='<%# Eval(“ProductID”,
“ProductDetails.aspx?ProductID={0}”) %>’ />
<br />
<asp:Label ID=”NameLabel” runat=”server”
Text='<%# Eval(“Name”) %>’>
</asp:Label>
<asp:Label ID=”PriceLabel” runat=”server”
Text='<%# Eval(“Price”, “{0:C}”) %>’>
</asp:Label><br />
<br />
<br />
</ItemTemplate>
</asp:DataList><br />
<asp:HyperLink ID=”CartLink” runat=”server”
NavigateUrl=”~/UserCart.aspx”>
View Shopping Cart
</asp:HyperLink><br />
</form>
Now add a new webform and name it ProductDetails.aspx , this page is used for showing details for selected product from product catalog page, again add a SqlDataSource and DataList Control on this page and configure them according to source shown below, this time datalist is populated using QueryString Parameters.
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”
ConnectionString=”<%$ ConnectionStrings:ConnectionString %>”
SelectCommand=”SELECT [ProductID], [Name], [Description],
[Price], [ImageUrl] FROM [Products]
WHERE ([ProductID] = @ProductID)”>
<SelectParameters>
<asp:QueryStringParameter Name=”ProductID”
QueryStringField=”ProductID”
Type=”Decimal” />
</SelectParameters>
</asp:SqlDataSource>
</div>
<asp:DataList ID=”DataList1″ runat=”server”
DataSourceID=”SqlDataSource1″>
<ItemTemplate>
<asp:Image ID=”Image1″ runat=”server”
ImageUrl='<%# Eval(“ImageUrl”,”~/Images\\{0}”) %>’/>
<asp:Label ID=”ImageUrlLabel” runat=”server”
Text='<%# Eval(“ImageUrl”) %>’
Visible=”False”>
</asp:Label><br />
<asp:Label ID=”NameLabel” runat=”server”
Text='<%# Eval(“Name”) %>’>
</asp:Label><br />
<asp:Label ID=”DescriptionLabel” runat=”server”
Text='<%# Eval(“Description”) %>’>
</asp:Label><br />
<asp:Label ID=”PriceLabel” runat=”server”
Text='<%# Eval(“Price”, “{0:##0.00}” ) %>’>
</asp:Label><br />
</ItemTemplate>
</asp:DataList><br />
<asp:Button ID=”btnAdd” runat=”server” OnClick=”Button1_Click”
Text=”Add to Cart” /><br /><br />
<asp:HyperLink ID=”HyperLink1″ runat=”server”
NavigateUrl=”~/Products.aspx”>
Return to Products Page
</asp:HyperLink>
Write this code in C# code behind of ProductDetails.aspx page
protected void Button1_Click(object sender, EventArgs e)
{
double Price = double.Parse(((Label)
DataList1.Controls[0].FindControl(“PriceLabel”)).Text);
string ProductName = ((Label)
DataList1.Controls[0].FindControl(“NameLabel”)).Text;
string ProductImageUrl = ((Label)
DataList1.Controls[0].FindControl(“ImageUrlLabel”)).Text;
int ProductID = int.Parse(Request.QueryString[“ProductID”]);
if (Profile.SCart == null)
{
Profile.SCart = new ShoppingCartExample.Cart();
}
Profile.SCart.Insert
(ProductID, Price, 1, ProductName, ProductImageUrl);
Server.Transfer(“Products.aspx”);
}
Now right click on solution explorer and add new web user control, name it CartControl.ascx
In design view of this control add a new GridView control and a label below gridview, html shource of this control should look like this
<%@ Control Language=”C#” AutoEventWireup=”true”
CodeFile=”CartControl.ascx.cs”
Inherits=”CartControl” %>
<asp:GridView ID=”grdCart” runat=”server”
AutoGenerateColumns=”False”
DataKeyNames=”ProductID”
OnRowCancelingEdit=”grdCart_RowCancelingEdit”
OnRowDeleting=”grdCart_RowDeleting”
OnRowEditing=”grdCart_RowEditing”
OnRowUpdating=”grdCart_RowUpdating”>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID=”Image1″ runat=”server”
ImageUrl='<%#Eval(“ImageUrl”,”~/Images/thumb_{0}”)%>’/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField=”ProductName”
HeaderText=”Product” ReadOnly=”True”/>
<asp:BoundField DataField=”Quantity” HeaderText=”Quantity”/>
<asp:BoundField DataField=”Price” DataFormatString=”{0:c}”
HeaderText=”Price” ReadOnly=”True” />
<asp:BoundField DataField=”SubTotal” DataFormatString=”{0:c}”
HeaderText=”Total” ReadOnly=”True” />
<asp:CommandField ShowDeleteButton=”True”
ShowEditButton=”True”/>
</Columns>
<EmptyDataTemplate>
Your Shopping Cart is empty, add items
<a href=”Products.aspx”>Add Products</a>
</EmptyDataTemplate>
</asp:GridView>
<asp:Label ID=”TotalLabel” runat=”server”></asp:Label>
Open web.config file and add this section for enabling anonymous users to add items to cart
<system.web>
<authorization>
<allow users=”?” />
<allow roles=”admin” />
</authorization>
<roleManager enabled=”true” />
<authentication mode=”Forms” />
<compilation debug=”true”>
</compilation>
</system.web>
<system.web>
<anonymousIdentification enabled=”true”/>
<profile enabled=”true”>
<properties>
<add name=”SCart” serializeAs=”Binary”
type=”ShoppingCartExample.Cart”
allowAnonymous=”true”/>
</properties>
</profile>
</system.web>
Now go to code behnd of CartControl.ascx and write this code
protected void Page_Load(object sender, EventArgs e)
{
if (Profile.SCart == null)
{
Profile.SCart = new ShoppingCartExample.Cart();
}
if (!Page.IsPostBack)
{
ReBindGrid();
}
if(Profile.SCart.Items == null)
{
TotalLabel.Visible = false;
}
}
protected void grdCart_RowEditing
(object sender, GridViewEditEventArgs e)
{
grdCart.EditIndex = e.NewEditIndex;
ReBindGrid();
}
protected void grdCart_RowUpdating
(object sender, GridViewUpdateEventArgs e)
{
TextBox txtQuantity = (TextBox)
grdCart.Rows[e.RowIndex].Cells[2].Controls[0];
int Quantity = Convert.ToInt32(txtQuantity.Text);
if (Quantity == 0)
{
Profile.SCart.Items.RemoveAt(e.RowIndex);
}
else
{
Profile.SCart.Items[e.RowIndex].Quantity
= Quantity;
}
grdCart.EditIndex = -1;
ReBindGrid();
}
protected void grdCart_RowCancelingEdit
(object sender, GridViewCancelEditEventArgs e)
{
grdCart.EditIndex = -1;
ReBindGrid();
}
protected void grdCart_RowDeleting
(object sender, GridViewDeleteEventArgs e)
{
Profile.SCart.Items.RemoveAt(e.RowIndex);
ReBindGrid();
}
private void ReBindGrid()
{
grdCart.DataSource = Profile.SCart.Items;
DataBind();
TotalLabel.Text = string.Format(“Total:{0,19:C}”,
Profile.SCart.Total);
}
Now add Global Application Class (Global.asax) by right clicking on solution explorer > add new Item. and write code mentioned below in it.
01void Profile_OnMigrateAnonymous(object sender, ProfileMigrateEventArgs e)
02 {
03 ProfileCommon anonymousProfile = Profile.GetProfile(e.AnonymousID);
04 if (anonymousProfile.SCart != null)
05 {
06 if (Profile.SCart == null)
07 Profile.SCart = new ShoppingCartExample.Cart();
08
09 Profile.SCart.Items.AddRange(anonymousProfile.SCart.Items);
10
11 anonymousProfile.SCart = null;
12 }
13
14 ProfileManager.DeleteProfile(e.AnonymousID);
15 AnonymousIdentificationModule.ClearAnonymousIdentifier();
16 }
17
Add another webform and name it UserCart.aspx, in design view of this page drag the CartControl we’ve just created and put a hyperlink for going back to products cataloge page
Tha’s it , build and run the application
Have fun