ListView Example in ASP.NET using C#

In this article we will introduce with ListView control in ASP.NET using C#.

ListView Example in ASP.NET using C#

ListView control in ASP.NET is used to display the data item. You can insert, select, update, delete, sorting and paging the data item in ListView. It is similar like FormView and GridView. In this example we use ListView with paging. You will click on special tag button of ListView and click Configure ListView. The following image shows how can I use AutoFormat style and paging.

You can set the Template by selecting from Current view dropdownlist. There are following Template are used in ListView.

1. AlternatingItemTemplate
2. EditItemTemplate
3. EmptyDataTemplate
4. InsertItemTemplate
5. ItemTemplate
6. SelectedItemTemplate

ListView.aspx (Design Page):

ListView.aspx (source code):

<%@ Page Title="" Language="C#" MasterPageFile="~/RoseindiaMaster.master" 
AutoEventWireup="true" CodeFile="DataPager.aspx.cs" Inherits="DataPager" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<h2 style="color: Green">
ListView in ASP.NET using C#</h2>
<br />
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<tr style="background-color: #FFFFFF;color: #284775;">
<td>
<asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' />
</td>
<td>
<asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' />
</td>
</tr>
</AlternatingItemTemplate>
<EditItemTemplate>
<tr style="background-color: #999999;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" 
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" 
Text="Cancel" />
</td>
<td>
<asp:TextBox ID="CountryNameTextBox" runat="server" 
Text='<%# Bind("CountryName") %>' />
</td>
<td>
<asp:TextBox ID="PopulationTextBox" runat="server" 
Text='<%# Bind("Population") %>' />
</td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" 
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" 
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" 
Text="Clear" />
</td>
<td>
<asp:TextBox ID="CountryNameTextBox" runat="server" 
Text='<%# Bind("CountryName") %>' />
</td>
<td>
<asp:TextBox ID="PopulationTextBox" runat="server" 
Text='<%# Bind("Population") %>' />
</td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="background-color: #E0FFFF;color: #333333;">
<td>
<asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' />
</td>
<td>
<asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1" 
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color: #E0FFFF;color: #333333;">
<th runat="server">
CountryName</th>
<th runat="server">
Population</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" 
style="text-align: center;background-color: #5D7B9D;
font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="3">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<tr style="background-color: #E2DED6;font-weight: bold;color: #333333;">
<td>
<asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' />
</td>
<td>
<asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ChartDatabaseConnectionString %>" 
SelectCommand="SELECT [CountryName], [Population] FROM [ChartPopulation]">
</asp:SqlDataSource>
</div>
</asp:Content>

Output: