Listview Control in .Net, InsertItemTemplate in Listview, ItemTemplate and AlternatingItemTemplate in Listview
Listview is the asp.net control like Gridview which is available from .Net 3.5. Unlike Gridview, Listview is entirely template driven that means Gridview will render its content as in Table format only. But with the help of Listview you can render your content in your own way like table, photo gallery,.......................etc.
Like Gridview by using Listview also you can edit the data, can apply paging and we can apply sorting also. Unlike Gridview, we can insert the data to Datasource also by using Listview. So we can use Listview control instead of Gridview control.
We can also use Listview instead of DataList and Repeater control. Like DataList, we can display the data in multiple columns by using Listview. Listview also template driven control like Repeater control . Unlike Repeater control we can edit the data by using Listview control.
In this article we discuss about how can display the data by using Listview control and how can we insert the data by using Listview.
As I said Listview is the template driven control, you have to code how you want to display the data. Here we display the data by using Table.
First we create the DataTable in code-behind, then we will bind the data to Listview as shown below.
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ListviewExample.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="listview1" runat="server" InsertItemPosition="LastItem" oniteminserting="listview1_ItemInserting">
<LayoutTemplate>
<table border="0px" cellpadding="1">
<tr style="background-color:#E5E5FE">
<th>firstname</th>
<th>lastname</th>
<th>company</th>
<th></th>
</tr>
<tr id="itemplaceholder" runat="server"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lblfname" runat="server" Text='<%#Eval("firstname") %>'></asp:Label></td>
<td><asp:Label ID="lbllname" runat="server" Text='<%#Eval("lastname") %>'></asp:Label></td>
<td><asp:Label ID="lblCompany" runat="server" Text='<%#Eval("company") %>'></asp:Label></td>
<td></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color:#EFEFEF">
<td><asp:Label ID="lblfname" runat="server" Text='<%#Eval("firstname") %>'></asp:Label></td>
<td><asp:Label ID="lbllname" runat="server" Text='<%#Eval("lastname") %>'></asp:Label></td>
<td><asp:Label ID="lblCompany" runat="server" Text='<%#Eval("company") %>'></asp:Label></td>
<td></td>
</tr>
</AlternatingItemTemplate>
<InsertItemTemplate>
<tr id="Tr1" runat="server">
<td><asp:TextBox ID="txtfname" runat="server" Text='<%#Eval("firstname") %>'></asp:TextBox></td>
<td><asp:TextBox ID="txtlname" runat="server" Text='<%#Eval("lastname") %>'></asp:TextBox></td>
<td><asp:TextBox ID="txtcompany" runat="server" Text='<%#Eval("company") %>'></asp:TextBox></td>
<td><asp:Button ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" /></td>
</tr>
</InsertItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
WebForm1.aspx.cs
using System;
using System.Data;
using System.Web.UI.WebControls;
namespace ListviewExample
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("firstname");
dt.Columns.Add("lastname");
dt.Columns.Add("company");
dt.Rows.Add("A", "B", "C");
Session["DataTable"] = dt;
listview1.DataSource = dt;
listview1.DataBind();
}
}
protected void listview1_ItemInserting(object sender, ListViewInsertEventArgs e)
{
DataTable dt = new DataTable();
TextBox txtFname = (TextBox)e.Item.FindControl("txtfname");
TextBox txtLname = (TextBox)e.Item.FindControl("txtlname");
TextBox txtCtype = (TextBox)e.Item.FindControl("txtcompany");
if (Session["DataTable"] != null)
{
dt = (DataTable)Session["DataTable"];
dt.Rows.Add(txtFname.Text, txtLname.Text, txtCtype.Text);
Session["DataTable"] = dt;
listview1.DataSource = dt;
listview1.DataBind();
}
}
}
}
As shown above, In WebForm1.aspx page, we have Listview Control. Inside Listview control we have several sections. We will discuss about each of it.
LayoutTemplate: It is used to specify the containing element and common section for all data. As shown above we have the containing element as itemplaceholder and common section header.
ItemTemplate: It is used to specify the data in required format.
AlternatingItemTemplate: It is same as ItemTemplate is used to display the data. If we mentioned the AlternatingItemTemplate then listview data will display by using ItemTemplate and AlternatingItemTemplate alternatively.
Generally we will apply different styles for AlternatingItemTemplate as compared to ItemTemplate.
InsertItemTemplate: This is used to insert the data to some datasource from Listview. You can have some input controls here and if you call the Insert command it will raise oniteminserting event of Listview.
As shown above we have Insert button and we mentioned the command name as Insert for that button. So whenever we click on the button it will raise oniteminserting event.
In codebehind we created some sample DataTable, stored in session and we bind that data table to Listview. Whenever user insert the new record we get back the DataTable from session and added new row, stored it in session and bind it to the Listview.
After executing the application the output is as shown below.
