• http://www.techneurons.com/career/
  • experienced programming consultants for hire !!!

    Contact Now

    ASP.NET Articles

    KB: Shopping Cart display using ASP.NET ListView and floating DIV (CSS)

    TUESDAY, MARCH 30, 2010

    A shopping cart application would require to display the products in a multicolumn 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:

     ListView Example as in Internet Explorer

     

    ConsultSarath - We provide end to end outsourcing solutions for .net programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for php programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for python programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India.

    Other Popular Articles
    We are experts in Cloud Computing Technologies. We can assist you to build high scalable business applications using Amazon Web Services (Amazon EC2, Amazon S3, Amazon SES, SNS, CloudFront), Windows Azure Platforms - Windows Azure and SQL Server Azure, Google App Engine using Python and Django Framework. We are Expert Programming Consultants available at affordable rates per hour. We work on several technologies - .NET, Python, Google App Engine, PHP, Windows Azure, Amazon Web Services ...