Tuvian : Discussion forum for ASP.Net,C#,Ajax,JQuery,JavaScript,HTML,CSS..

Simple steps to create a ListView Control in ASP.Net,C#

In ASP.Net 3.5 Microsoft introduced a new control Listview, can be used to repeated controls as per the data like repeater, gridview etc.. Listview is a very simple control to use for a developer for displaying multiple items like products, employee details etc.. There is very useful events are available from the ListView control like item databound and item command.

ListView contros to display product/item boxes for shopping cart

Here we are going to demonstrate how we can create a simple listview control for shopping cart. Commonly a shopping cart site must have a page which display searched item details with n number of product boxes, each of them having product details like image, code, name, and also some butoon like details, add to cart etc.. This requirement can be easily achieved by using ListView control.

Listview Control Features/Options :

Layout Template : Allows to define a custom user interface (UI) for the root container of the ListView control.

GroupTemplate: Use the GroupTemplate property to create a tiled layout in the ListView control. In a tiled table layout, the items are repeated horizontally in a row. The numbers of times that an item is repeated is specified by the property.

ItemTemplate : Use the ItemTemplate property to define a custom user interface (UI) to display the data items. Here we can design a template that will be a single part of the listview, that means this part is repeated according to the number of data.

EmptyDataTemplate : The empty template is displayed in a ListView <http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.aspx>  control when the data source that is bound to the control does not contain any records.

Create a simple listview control to display products

We are going to display product details, like a shopping site. For doing this first of all create a listview control, which shows the product image, item code, item name and more.. Here also create a Empty Template and included a message like ‘No items Found’ so that this messgae will display once the datasource does not contain any data.

<asp:ListView runat="server" ID="lstViewItems" GroupItemCount="100" 
OnItemCommand="lstViewItems_ItemCommand"
OnItemDataBound="lstViewItems_ItemDataBound">
<LayoutTemplate>
    <div>
        <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
    </div>
</LayoutTemplate>
<GroupTemplate>
    <div style="width: 100%;">
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
    </div>
</GroupTemplate>
<ItemTemplate>
    <div>
        <asp:HiddenField ID="hdItemID" runat="server" Value='<%# Eval("ID") %>' />
        <asp:HiddenField ID="hdItemName" runat="server" Value='<%# Eval("Name") %>' />
        <asp:HiddenField ID="hdItemImage" runat="server" Value='<%# Eval("Image") %>' />
        <asp:HiddenField ID="hdPriceValue" runat="server" />
        <table width="100%" border="0" cellpadding="1" cellspacing="3">
        <tr>
            <td align="center" valign="middle">
                <asp:ImageButton ID="imgItem" runat="server" CommandName="ViewDetails" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblItemDescription" runat="server" Text='<%# Eval("Name") %>' />
            </td>
        </tr>
        <tr>
            <td style="padding-left: 15px;">
                Code:<asp:Label ID="lblItemCode" runat="server" Text='<%# Eval("ItemCode") %>' />
            </td>
        </tr>
        <tr>
            <td id="tdPrice" runat="server" style="padding-left: 15px;">
                <%--Price: Rs:<asp:Label ID="lblPrice" runat="server" 
Text='<%# Eval("Price") %>' />--%>
            </td>
        </tr>
        <tr>
            <td id="tdOffer" runat="server" style="padding-left: 15px;">
                <%--<asp:Label ID="lblOfferPrice" runat="server" 
Text='<%# Eval("OfferPrice") %>' />--%>
            </td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td>
                Qty :
                <asp:TextBox ID="txtQnty" runat="server" Text="1" CssClass="QtyTextBox" />
            </td>
            <td style="text-align: left;">
                <asp:ImageButton ID="btnAddToCart" runat="server"
                    ToolTip="Add To Cart" CommandName="AddToCart" />
            </td>
            <td style="text-align: right;">
                <asp:Button ID="Button1" ToolTip="View Details" runat="server" Text="Details" 
                    CommandName="ViewDetails" />
            </td>
        </tr>
        </table>
    </div>
</ItemTemplate>
<EmptyDataTemplate>
    <div style="text-align: left; padding: 6px 0px 0px 6px;
        font-family: Verdana;">
        No items found</div>
</EmptyDataTemplate>
</asp:ListView>

Main events provided by ListView Control are OnItemDataBound and OnItemCommand events. We implemented events OnItemCommand and OnItemDataBound for doing something with the data which are bounded to listview control. OnitemDatabound event fired once the data are binding to each control in the listview. OnItemDataCommand event fired once the button or other server control clicked by user, we have to mention the command name for the control like button we mentioned above. So we can identify that which control in the listview clicked by user by by checking this command name.

OnItem DataBound Event in ListviewControl

Here we are assigning image url to img control in the listview control and all particular data manipulation can be done in the event

protected void lstViewItems_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    try
    {
        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
            ListViewDataItem dataItem = (ListViewDataItem)e.Item;
            if (dataItem.DataItem != null)
            {
                DataRowView view = (DataRowView)dataItem.DataItem;
                Image imgItem = (Image)e.Item.FindControl("imgItem");
                    imgItem.ImageUrl = view["Image"];
            }
        }
    }
    catch (Exception ex)
    {
        throw;
    }
}

OnItemCommand Event in the ListView Control

We got controls here once the user press details button or image in the listview control. We can identify the control that a user clicked by checking the command name as follows. Then we can easily doing the coding for particular event.

protected void lstViewItems_ItemCommand(object sender, ListViewCommandEventArgs e)
{
switch (e.CommandName)
{
case "ViewDetails":
    HiddenField hdItemID = (HiddenField)e.Item.FindControl("hdItemID");
    SelectedItemID = hdItemID.Value;
    break;
case "AvailableAt":
    Server.Transfer("AvailableAt.aspx");
    break;
case "AddToCart":
    List<eMallEntity.OrderDetails> shoppinCart = 
    new List<eMallEntity.OrderDetails>();
    shoppinCart = (List<eMallEntity.OrderDetails>)Session["Cart"];
    eMallEntity.OrderDetails newItem = new eMallEntity.OrderDetails();
    newItem.ItemCode = ((Label)e.Item.FindControl("lblItemCode")).Text;
    newItem.ItemID =
    int.Parse(((HiddenField)e.Item.FindControl("hdItemID")).Value);
    newItem.ItemName =
    ((HiddenField)e.Item.FindControl("hdItemName")).Value;
    newItem.Price =
    Double.Parse(((HiddenField)e.Item.FindControl("hdPriceValue")).Value);
    int qnty = 1;
    int.TryParse(((TextBox)e.Item.FindControl("txtQnty")).Text, out qnty);
    newItem.Image = ((HiddenField)e.Item.FindControl("hdItemImage")).Value;
    if (shoppinCart == null)
        shoppinCart = (List<eMallEntity.OrderDetails>)eMallBL.createDefaultCart();
    shoppinCart.Add(newItem);
    break;
}
}