CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » ListView Control in ASP.Net 3.5   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
ListView Control in ASP.Net 3.5

By Satheesh babu
Posted On Jul 07,2008
Article Rating: (Login)
Average Rating: 5
No of Ratings: 2
No of Comments: 20
Print this article.
Category: ASP.Net 3.5

Subscribe to our feed!

ListView Control in ASP.Net 3.5


Introduction

ListView is a new databound control that is shipped with ASP.Net 3.5. ListView control is similar to GridView, Repeater, and DataList which helps us to display a table of data with awesome additional features.  We can use repeater control whenever we need to display the data in a custom format, as opposed to only tabular view in GridView control. The Repeater control lacks in certain features like edit, update and paging. Using GridView control it is possible to Edit/Update/Delete data but with a big limitation on the layout of the data display. There is no single control available in earlier versions of asp.net that accommodates all the above features. The introduction of ASP.Net 3.5 answers this with the new ListView control.

In short, ListView control can be thought as a hybrid between GridView and Repeater control. ListView control gives us more control on the rendered HTML output with edit/update/delete feature. Also, ListView control has a built in support for adding new row, sorting, etc.  Refer the below figures which shows some of sample formats that can be achieved through ListView control for a better understanding.          

Sample Format 1

Sample Format 2

Sample Format 3


Features of ListView Control

·          Can define our own template/Layout/Structure for the data display.

·          Edit/Update/Delete capabilities on the data displayed.

·          Built-in support for inserting new row.

·          Built-in support for sorting

·          Supports databinding via DataSource Controls including LINQ DataSource controls.

·          Paging via DataPager control, which can be part of ListView control or can be kept outside the control. Means, DataPager can be kept at any part of page as opposed to GridView where the built-in paging is packed with the control itself.

 

Using ListView Control

In this section, we will learn to use the ListView control with a simple databinding. We will create an Employee table and populate the data in ListView.

One thing to note here is, the ListView by default will not output any HTML output hence binding it to any datasource simply will not output anything.  If you execute the below code,

lvEmployee.DataSource = GetEmployee("Select * from Employee");

lvEmployee.DataBind();

It will give the following error,

An item placeholder must be specified on ListView 'lvEmployee'. Specify an item placeholder by setting a control's ID property to "itemPlaceholder". The item placeholder control must also specify runat="server".

The similar code with GridView will output the employee details without any error.

Since ListView is designed to provide more flexibility and control on the rendered HTML it never outputs any HTML by default. We need to provide the basic required templates for the ListView to output the data and it should have an item placeholder tag with the attribute runat=”server”. 

Consider, we need to output the employee table in a tabular view, refer Sample Format 1 in the above figures.

The basic required templates for a ListView control to display the data are,

·          Layout Template

This is the template which decides the Layout of the data display and it will have the root element. It should have an item placeholder tag with runat=”server” attribute.  The item placeholder can be anything with runat=”server” attribute like, <asp:PlaceHolder> control, DIV tag, table, etc. We can specify the headers for the displayed data here. The default value for item placeholder is “itemplaceholder”. If we change this name explicitly then we need to reference this name in ItemPlaceholderID property of ListView.

·          Item Template

This template will have content to render the actual data.

There are many other optional templates available for ListView control which can be used on need basis. So, with the above code and defining these 2 minimum required templates will output the data as Sample Format 1.

The Layout Template will be,

<table ID="itemPlaceholderContainer" >

   <tr>                               

              <th>

              EmpID

</th>

              <th>

              EmpName

              </th>

<th>

              Department

              </th>

               <th>

              Age

              </th>

              <th>

              Address

              </th>

   </tr>

 

   <tr runat="server" ID="itemPlaceholder">

   </tr>

</table>

While rendering the output the ListView control will emit all the data in item template in the itemplaceholder tag in the above mark-up.

Item Template will be,

<tr>

             <td>

            <asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />

             </td>

             <td>

           <asp:Label ID="EmpNameLabel" runat="server"

                     Text='<%# Eval("EmpName") %>' />

             </td>

             <td>

                 <asp:Label ID="DepartmentLabel" runat="server"

                     Text='<%# Eval("Department") %>' />

             </td>

             <td>

                 <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />

             </td>

             <td>

                 <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />

             </td>

</tr>



ASP.Net Hosting

Recent Articles

 

The final ListView mark up will be,

 

<asp:ListView ID="ListView1" runat="server">

<LayoutTemplate>

<table ID="itemPlaceholderContainer" >

   <tr>                               

              <th>

              EmpID

</th>

              <th>

              EmpName

              </th>

<th>

              Department

              </th>

               <th>

              Age

              </th>

              <th>

              Address

              </th>

   </tr>

 

   <tr runat="server" ID="itemPlaceholder">

   </tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

            <td>

          <asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />

            </td>

            <td>

           <asp:Label ID="EmpNameLabel" runat="server"

                    Text='<%# Eval("EmpName") %>' />

            </td>

            <td>

                <asp:Label ID="DepartmentLabel" runat="server"

                    Text='<%# Eval("Department") %>' />

            </td>

            <td>

                <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />

            </td>

            <td>

               <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />

            </td>

</tr>

</ItemTemplate>

</asp:ListView>

 

If we want to use DIV tag, then we can specify the outer DIV in the Layout template and specify an item DIV with runat attribute.

The Sample Format 2 can be achieved by the following markup,

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">

<LayoutTemplate>      

 <table ID="itemPlaceholderContainer" >  

<tr runat="server" ID="itemPlaceholder">

   </tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

<td>

EmpID:  <asp:Label ID="EmpIDLabel" runat="server" Text='<%# Eval("EmpID") %>' />

<br />

EmpName: <asp:Label ID="EmpNameLabel" runat="server"

                        Text='<%# Eval("EmpName") %>' />

<br />

Department:<asp:Label ID="DepartmentLabel" runat="server"

                        Text='<%# Eval("Department") %>' />

<br />

Age:  <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />

<br />

Address:<asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />

</td>

</tr>

</ItemTemplate>

</asp:ListView>

 

The above ListView for Sample Format 2 uses SqlDataSource control to pull the data from the database. Download the source attached with this article and see it action.


Other Optional Template

The other optional templates that can be used in ListView are,

         ItemSeparatorTemplate

Ø      Renders the content defined between the data item in ItemTemplate.

         GroupTemplate

Ø      Renders the content defined in ItemTemplate and EmptyItemTemplate to group the data items.

         GroupSeparatorTemplate

Ø      Renders the content defined between the data item in GroupTemplate.

         EmptyItemTemplate

Ø      Renders the content for an empty item when GroupTemplate is used.

         EmptyDataTemplate

Ø      Renders the content when no data is returned from data source.

         SelectedItemTemplate

Ø      Renders the content for the selected data item to differentiate from other data item.

         AlternatingItemTemplate

Ø      Renders the alternate data item.

         EditItemTemplate

Ø      Renders the item when the data item is edited.

         InsertItemTemplate

Ø       Renders the content to insert a new row.

We will see more about these templates with examples in the coming articles.


Downloads

ListView in ASP.Net 3.5


Reference

ListView in ASP.Net 3.5

 

Conclusion

By this article on ListView control in ASP.Net 3.5, we understood the basics of ListView control with a sample data binding. This article will be a kick start for using the ListView control that is introduced in ASP.Net 3.5. With ListView control it is now possible to render the table of data with whatever layout we require, and thus giving more flexibility to the users to decide the HTML output. Going forward we will see more about ListView controls and its usages.

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    good article
    good article

    http://www.microsoft-csharp-tutorials.com/post/2012/12/23/Listview-Control-in-Net-ItemInsert-in-Listview-ItemTemplate-and-AlternatingItemTemplate-in-Listview
    My ListView
    <LayoutTemplate>
    <table border="0" cellpadding="1">
    <tr style="background-color:#E5E5FE">
    <th align="left"><asp:LinkButton ID="lnkId" runat="server">Id</asp:LinkButton></th>
    <th align="left"><asp:LinkButton ID="lnkName" runat="server">Name</asp:LinkButton></th>
    <th align="left"><asp:LinkButton ID="lnkType" runat="server">Type</asp:LinkButton></th>
    <th></th>
    </tr>
    <tr id="itemPlaceholder" runat="server"></tr>
    </table>
    </LayoutTemplate>
    <ItemTemplate>
    <tr>
    <td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
    <td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+"
    "+Eval("LastName") %></asp:Label></td>
    <td><asp:Label runat="server" ID="lblType"><%#Eval("ContactType") %></asp:Label></td>
    <td></td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <tr style="background-color:#EFEFEF">
    <td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
    <td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+" "+
    Eval("LastName") %></asp:Label></td>
    <td><asp:Label runat="server" ID="lblType"><%#Eval("ContactType") %></asp:Label></td>
    <td></td>
    </tr>
    </AlternatingItemTemplate>



    <asp:DataPager ID="ItemDataPager" runat="server" PageSize="5">
    <Fields>
    <asp:NumericPagerField ButtonCount="2" />
    </Fields>
    </asp:DataPager>


    <InsertItemTemplate>
    <tr runat="server">
    <td></td>
    <td>
    <asp:TextBox ID="txtFname" runat="server"
    Text='<%#Eval("FirstName") %>' Width="100px">First Name</asp:TextBox>
    <asp:TextBox ID="txtLname" runat="server"
    Text='<%#Eval("LastName") %>' Width="100px">Last Name</asp:TextBox>
    </td>
    <td><asp:TextBox ID="txtCtype" runat="server"
    Text='<%#Eval("ContactType") %>' Width="100px">Contact Type</asp:TextBox></td>
    <td><asp:Button ID="InsertButton" runat="server"
    CommandName="Insert" Text="Insert" /></td>
    </tr>
    </InsertItemTemplate>






    In CS file
    ----------------
    if (e.CommandName == "Insert")
    {
    TextBox txtFname = (TextBox)e.Item.FindControl("txtFname");
    TextBox txtLname = (TextBox)e.Item.FindControl("txtLname");
    TextBox txtCtype = (TextBox)e.Item.FindControl("txtCtype");
    string insertCommand = "Insert into [Contacts]
    ([FirstName],[LastName],[ContactType]) Values('" + txtFname.Text + "', '"
    + txtLname.Text + "', '" + txtCtype.Text + "');";
    SqlDataSource1.InsertCommand = insertCommand;
    }
    Not Bad
    The topic u presented is noy upto the expectations of the user.
    It will be nice if u give a detailed explanation of it .
    ListView Control in ASP.Net
    This is nice article, great job. It's really solve my problem. This link http://mindstick.com/Articles/c6cd1b7d-d710-4bc4-9724-4cf63dbb2c86/?ListView%20Control%20in%20ASP.Net

    was also helpful for me.

    Thanks !!!
    List view control
    Thanks this one is so interesting article by which i have got enough knowledge about list view control
    some problem in this artcale
    this is very nice articale
    but the problem is that when u click on photoviewr
    the image get zoom, u can navigate the image
    but i want the close button just below the image
    can u help me in that
    i really thanksfull to u
    if u get solution plz send me on my email id
    i.e khanfaizan22@gmail.com
    i m also seachin fo a solution
    my EditItemTemplate bind doesn't work
    Do you see any reason why the Bind command won't work in the code below? It displays the initial data but doesn't update changes.

    <asp:LinqDataSource ID="srcProfile" ContextTypeName="alumniDataContext" TableName="tblAlumnis"
    Where="UserID = guid(@UserID)" EnableUpdate="True" runat="server"> <WhereParameters>
    <asp:SessionParameter Name="UserID" SessionField="UserID" /> </WhereParameters> </asp:LinqDataSource> <asp:ListView ID="lsvProfile" DataSourceID="srcProfile" ItemPlaceholderID="itemContainer"
    EditIndex="0" DataKeyNames="UserID" runat="server"> [snip] <EditItemTemplate>
    <asp:UpdatePanel ID="udpEFul" runat="server" Visible="true">
    <ContentTemplate>
    <div class="profile-content">
    <cc2:ful ID="fulE" runat="server" />
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
    <tr>
    <td colspan="3">
    <div class="profile-buttons">
    <asp:Button ID="btnEUpdate01" runat="server" CommandName="Update" TabIndex="170"
    Text="Update" />
    <asp:Button ID="btnECancel01" runat="server" CommandName="Cancel" OnClick="btnCancel_Click"
    TabIndex="175" Text="Cancel" />
    </div>
    </td>
    </tr>
    <tr>
    <td colspan="1">
    <table style="color: #999999;">
    <asp:Panel ID="pnlEmail" Visible="true" runat="server">
    <div>
    <tr>
    <td colspan="1">
    <span class="label">
    <asp:Label ID="lblEmail" Text="E-mail:" runat="server" />
    </span>
    </td>
    <td colspan="1">
    <span class="ctrl">
    <asp:TextBox ID="Email" CausesValidation="true" EnableViewState="False" Font-Bold="false" Text='<%#Bind("Email")%>'
    BackColor="#FFFFFF" Enabled="true" TabIndex="50" runat="server" />
    </span>
    </td>
    <td colspan="1">
    <span class="req">
    <asp:Label ID="lblEmail_Req" Text="*" ForeColor="#FF0000" runat="server" />
    </span>
    </td>
    <td colspan="1">
    <span class="disp">
    <asp:UpdatePanel ID="udpDisEmail" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <asp:CheckBox ID="chkEmail" AutoPostBack="true" Checked='<%#Bind("Email_Disp") %>' Enabled="true" TabIndex="500"
    Text="Display?" TextAlign="left" runat="server" />
    </ContentTemplate>
    </asp:UpdatePanel>
    </span>
    </td>
    </tr>
    </div>
    </asp:Panel>
    </table>
    </td>
    <td style="width: 30px;" />
    </tr>
    </table>
    </EditItemTemplate>
    grt
    i have created listview control of from data.
    exp.
    19-08-2010 20-08-2010 7281 11151
    20-08-2010 21-08-2010 8385 1149

    if i want to do sum of 7281 and 11151 ?? wht i have to do?
    great
    good............
    great article

    thanks for the article ... explained so simply...
    thanks again.
    Good
    Good Article
    Great Job!
    Hi Satheesh:

    Very Good Job! Very useful!
    Thanks
    Bill.
    Great Artical
    Wow!
    This is realy a Great artical for beginer.
    Thanks
    wow
    wowo thanks a lot it help a lot
    Wonderful
    very good article posted
    Thanks.
    Great Job
    very helpful to learn about listview controles in asp.net.... Thanks dear...
    Very Helpful
    Hi Thanks for the information about the listview control and it is very helpful to the devloper .
    Thanks a lot .

    Bikrant
    Good article
    This has been very useful to me. I was just trying to learn .net
    tnx
    thanks for this article
    Inserting, Updating, Deleting and Paging records using ListView controls
    Another interesting article on Inserting, Updating, Deleting records using ListView control can be found here http://dotnetfunda.com/articles/article40.aspx