ASP.NET e-Commerce website GridView with Product Listing

Introduction :

E-Commerce web applications are everywhere these days, and many share a common set of functionality. In this article, I will show how to use the GridView and ListView controls to build a powerful product page with many of the features found on today's e-commerce sites. We'll build a bicycle store product grid using some free clip art bicycle images. The example files are user controls which can be easily added to a page. We're only using three images here to keep the size of the sample application small.

In previously I was explained about Sending Email from Asp.net With Dynamic Content , How To Export gridview data to Excel/PDF , CSV Formates in asp.net C# ,How to print Specific Area in asp.net web page
How To- Search records or data in gridview using jQuery .

A shopping cart application would require to display the products in a multi column grid, rather than a straight down list or a table. The each item in a product grid would have a product photo thumbnail, name of the product, price (optional), as well as additional metadata like reviews, ratings, etc. This articles explains how to set up a product grid using ASP.NET ListView control and floating DIVs.
 ASP.NET ListView control is basically used to display data-bound elements, and optionally to group them. Like other databound listing controls like GridView, Repeater, DataList, etc., this control has several templates. You can bind data to the ListView using DataSourceId property connecting to an SqlDataSource or similar controls, or by assigning DataTable or DataSet to its DataSource property.
The following template properties of ListView needs to be utilized to generate the product grid.

LayoutTemplate	This is the outer countainer template.
GroupTemplate	This is the template for every product row in the grid.
GroupSeparatorTemplate	This template contains the seperator between each product row in the grid.
ItemTemplate	This template contains the controls for displaying each product item. The width of this template must be controlled to have the grid look proper.
ItemSeperatorTemplate	(Optional) If a seperator line, etc.. is required vertically between each product, then this template has to be used.

The GroupItemProperty of the ListView controls the number of columns in the display. You should take care of the width of each product grid to keep the structure of the grid intact.
The Product grid is constructed using CSS float and clear styles. The source view of this implementation is as follows:

 

    <style type="text/css">

        .productItem

        {

            width: 140px;

            float: left;

            padding: 5px;

            margin: 5px;

            text-align: center;

        }

        .groupSeparator

        {

            border-top: 1px dotted Gray;

            height: 1px;

            clear: both;

        }

        .itemSeparator

        {

            height: 180px;

            width: 1px;

            border-left: 1px dotted Gray;

            margin-top: 5px;

            margin-bottom: 5px;

            float: left;

        }

    </style>

 

    <asp:ListView runat="server" ID="listView" GroupItemCount="3">

        <LayoutTemplate>

            <div style="width: 500px;">

                <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />

            </div>

        </LayoutTemplate>

        <GroupTemplate>

            <div style="clear: both;">

                <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />

            </div>

        </GroupTemplate>

        <ItemTemplate>

            <div class="productItem">

                <div>

                    <img src='<%# "/Products/" + Eval("Picture") %>'

                        height="120" width="120" />

                </div>

                <div>

                    <b>

                        <%# Eval("Name") %></b></div>

                <div>

                    Price: $<%# Eval("Price") %></div>

            </div>

        </ItemTemplate>

        <ItemSeparatorTemplate>

            <div class="itemSeparator">

            </div>

        </ItemSeparatorTemplate>

        <GroupSeparatorTemplate>

            <div class="groupSeparator">

            </div>

        </GroupSeparatorTemplate>

        <EmptyDataTemplate>

        </EmptyDataTemplate>

    </asp:ListView>

The LayoutTemplate contains the outer container, which has width of 500px. The GroupTemplate contains template for the each group, which is another div with style clear:both, this allows each group to stay distinct. The ItemTemplate is the actual product template, and has a fixed width. The width of the outer container should be GroupItemCount times the width of each item + the total morgins.
Databinding of this ListView is done as it is done usually with all databound controls. The code used for this example is as follows:

        protected void Page_Load(object sender, EventArgs e)

        {

            SqlConnection conn = new SqlConnection("Connection_String_Here");

            conn.Open();

            SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Products", conn);

            DataTable dt = new DataTable();

            da.Fill(dt);

            conn.Close();

 

            listView.DataSource = dt;

            listView.DataBind();

        }

Finally, when the page is rendered on the Internet Explorer, it looked like this :


 

More Reference about This :

http://www.codeproject.com/Articles/113261/ASP-NET-e-Commerce-GridView-with-Product-Compariso

http://www.4guysfromrolla.com/articles/122607-1.aspx#postadlink

http://www.asp.net/web-forms/tutorials/tailspin-spyworks/tailspin-spyworks-part-4