Advertisements
Home > DotNet > How to use Listview control in ASP.Net

How to use Listview control in ASP.Net


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;
}
}
Advertisements
  1. fgg
    September 22, 2011 at 8:57 am

    it’s not work?

  2. September 22, 2011 at 4:36 pm

    Its working fine.
    You can see implemented code in http://www.supershope.com/products.aspx

  3. July 13, 2012 at 7:29 pm

    nice site pal

  4. p
    October 6, 2012 at 4:06 pm

    code for add to cart

  5. Abhinav Ashish
    August 3, 2013 at 4:51 pm

    Error 1 Cannot implicitly convert type ‘object’ to ‘string’. An explicit conversion exists (are you missing a cast?)
    Error 2 The name ‘SelectedItemID’ does not exist in the current context
    Error 3 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 4 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 5 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 6 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 7 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 8 The type or namespace name ‘eMallEntity’ could not be found (are you missing a using directive or an assembly reference?)
    Error 9 The name ‘eMallBL’ does not exist in the current context

    I got these errors in executing this.
    Please sugess some solutions.

  6. August 5, 2013 at 11:46 am

    Hi Abhinav,

    Thanks for reading our blog..

    The application contains multiple projects such as ‘eMallBL’, ‘eMallEntity’, ‘eMallDA’.
    So you have to replace with yours. If you want full source code please post your email ID so that I will send you the details.

  7. vinh.lt
    August 15, 2013 at 3:11 pm

    Hi tuvian,
    I got error: “Error9 The name ‘SelectedItemID’ does not exist in the current context”
    Where is SelectedItemID? I can’t find that element. Can you help me to resolve that error or can you send me your source code?
    My email ID is: thevinh2302@gmail.com

  8. August 16, 2013 at 9:58 am

    Hi vinh.It,

    The ‘SelectedItemID’ is a integer variable so that you can assign selected product’s ID to the variable. So you just declare a integer variable with name SelectedItemID in the cs file.

    Thanks,

  1. June 14, 2011 at 5:53 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: