ASP.NET Tutorial By Coder Baba www.youtube.
com/coderbaba
ASP.NET Tutorial-2022
Crash Course for Beginners (Complete Course)
Become ZERO to HERO in ASP.NET
Day 64 Agenda: Class #64
Topics (What’s in it for you)
✓ What is ListView Control
✓
1
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
The ListView control is a super flexible GridView control. You can use it to display, edit, delete, select, sort and
page your data just like GridView.
In ListView control Microsoft combines all the good features of Repeater, DataList, GridView, DetailsView and
FormView controls in a single more powerful and flexible control.
The ListView control markup is specified with the help of following templates.
• AlternatingItemTemplate
• EditItemTemplate
• EmptyDataTemplate
• EmptyItemTemplate
• GroupSeparatorTemplate
• GroupTemplate
• InsertItemTemplate
• ItemSeparatorTemplate
• ItemTemplate
• LayoutTemplate
• SelectedItemTemplate
LayoutTemplate is used this template to specify the containing element markup for the entire ListView control.
This can be table or div tag or any other container in which you want to display all your ListView contents.
ItemTemplate specifies the markup used to render each record bound to the ListView control.
AlternatingItemTemplate is used to render different content for alternating items in a ListView control.
EmptyDataTemplate is used to render the markup when no data is available to display in a ListView control.
this control enables you to bind data items that are returned from a Data Source and display them either in the
form of pages, individual records, or we can even group them. The ListView control displays data in a format that
you define by using templates and styles. It is useful for data in any repeating structure, similar to the DataList and
Repeater controls. However, unlike those controls, with the ListView control we can enable users to edit, insert,
and delete data, and to sort and page data. To work with ListView Control add a new WebForm naming it as
“ASPDB_Student_ListViewDemo1.aspx” and write the below code under its “<div>” tag:
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<table border="1">
<tr><th>Sid</th> <th>Name</th> <th>Class</th> <th>Fees</th> <th>Photo</th> <th>Is-Active</th></tr>
<tr>
<td><%# Eval("Sid") %></td> <td><%# Eval("Name") %></td>
<td><%# Eval("Class") %></td> <td><%# Eval("Fees") %></td>
<td><asp:Image ID="imgPhoto" runat="server" Width="200" Height="200"
2
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
ImageUrl='<%# "~/Images/" + Eval("PhotoName") %>' /></td>
<td align="center"><asp:CheckBox ID="cbStatus" runat="server" Enabled="false"
Checked='<%# Eval("Status") %>' /></td>
</tr>
</table>
</ItemTemplate>
</asp:ListView>
Now write the below code under “ASPDB_Student_ListViewDemo1.aspx.cs” file:
using System.Data;
using System.Data.SqlClient;
Code under Page Load Event:
if (!IsPostBack) {
LoadData();
}
private void LoadData() {
SqlDataAdapter da = new SqlDataAdapter(
"Select Sid, Name, Class, Fees, PhotoName, Status From Student Order By Sid", ReadCS.ASPDB);
DataSet ds = new DataSet();
da.Fill(ds, "Student");
ListView1.DataSource = ds;
ListView1.DataBind();
}
When we run the above Web Form it displays each record in a tabular format i.e. every record will be one
table whereas if we want to display the data, record by record just like DetailsView or FormView controls we need
to enable paging and to do that we need to use the DataPager control. To test it go to source view of the WebForm
and write the following code under </asp:ListView> tag:
<asp:DataPager ID="DataPager1" runat="server" PageSize="1" PagedControlID="ListView1">
<Fields>
<asp:NumericPagerField ButtonCount="5" ButtonType="Link" />
</Fields>
</asp:DataPager>
● PagedControlId property is to specify to which control the paging has to be enabled.
● PageSize property is to specify the no. of records that has to be displayed at a time.
● Fields attribute is to specify the type of paging we want to enable which can either be NumericPagerField
or NextPreviousPagerField.
Now when we run the Web Form it displays only a single record with paging option enabled. To navigate
to next records we need to implement logic under ListView controls “PagePropertiesChanging” event as following:
DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
LoadData();
3
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
In the above example we have displayed records, row by row in the form of “DetailsView” and
“FormView” controls where as if we want to display data as a single table just like a “GridView” or “Repeater”
controls we need to take the help of a LayoutTemplate with a PlaceHolder control so that ItemTemplate comes
and sits under that PlaceHolder as a row.
Layout Template (Table)
Student Details
Sid Name Class Fees Photo Status
<asp:PlaceHolder ID="ItemPlaceHolder" runat="server" />
End of Student Data
In the above, Layout Template is defined as a table with 2 rows and between the 2 rows we have a
“PlaceHolder” control and in that “PlaceHolder”, “ItemTemplate” will come and sit as a row for each record
fetched from the table. To test it, add a new Web Form under the project naming it as
“ASPDB_Student_ListViewDemo2.aspx” and write the following code under its “<div>” tag:
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table border="1" align="center">
<caption>Student Details</caption>
<tr><th>Sid</th> <th>Name</th> <th>Class</th> <th>Fees</th> <th>Photo</th> <th>Is-Active</th></tr>
<asp:PlaceHolder ID="ItemPlaceHolder" runat="server" />
<tr><td colspan="6" align="center">End of table data.</td></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td align="center"><%# Eval("Sid") %></td> <td><%# Eval("Name") %></td>
<td align="center"><%# Eval("Class") %></td> <td align="right"><%# Eval("Fees") %></td>
<td><asp:Image ID="imgPhoto" runat="server" Width="200" Height="200"
ImageUrl='<%# "~/Images/" + Eval("PhotoName") %>' /></td>
<td align="center"><asp:CheckBox ID="cbStatus" runat="server" Enabled="false"
Checked='<%# Eval("Status") %>' /></td>
</tr>
</ItemTemplate>
</asp:ListView>
Now write the below code under “ASPDB_Student_ListViewDemo2.aspx.cs” file:
using System.Data;
using System.Data.SqlClient;
Code under Page Load Event:
SqlDataAdapter da = new SqlDataAdapter(
"Select Sid, Name, Class, Fees, PhotoName, Status From Student Order By Sid", ReadCS.ASPDB);
DataSet ds = new DataSet();
da.Fill(ds, "Student");
ListView1.DataSource = ds;
4
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
ListView1.DataBind();
Performing Grouping operations with ListView Control: we 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 GroupItemCount property. In our previous example
ItemTemplate is included into LayoutTemplate with the help of a place holder control whereas in case of Grouping
under LayoutTemplate, GroupTemplate is included and under GroupTemplate, ItemTemplate is included.
Layout Template (Table)
<asp:PlaceHolder ID="GroupPlaceHolder" runat="server" />
Group Template (TableRow)
<asp:PlaceHolder ID="ItemPlaceHolder" runat="server" />
In the above case Layout Template is a table and under it we have a “PlaceHolder” where the “Group
Template” comes and sits as a row and under the “Group Template” we have a “PlaceHolder” where the “Item
Template” comes and sits as a column(s) and no. of columns for each row is based on the “GroupItemCount”
property of “ListView” control.
To test this, add a new Web Form in the project naming it as “ASPDB_Student_ListViewDemo3.aspx” and
write the following code under its “<div>” tag:
<asp:ListView ID="ListView1" runat="server" GroupItemCount="3">
<LayoutTemplate>
<table>
<caption>Student Details</caption>
<asp:PlaceHolder ID="GroupPlaceHolder" runat="server" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr><asp:PlaceHolder ID="ItemPlaceHolder" runat="server" /></tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table border="1" width="100%">
<tr>
<td rowspan="5"><asp:Image ID="imgPhoto" runat="server" Width="220" Height="200"
ImageUrl='<%# "~/Images/" + Eval("PhotoName") %>' /></td>
<td>SID: <%# Eval("Sid") %></td>
</tr>
<tr><td>Name: <%# Eval("Name") %></td></tr>
<tr><td>Class: <%# Eval("Class") %></td></tr>
<tr><td>Fees: <%# Eval("Fees") %></td></tr>
<tr><td>Is-Active: <%# Eval("Status") %></td></tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>
5
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
Now write the below code under “ASPDB_Student_ListViewDemo3.aspx.cs” file:
using System.Data;
using System.Data.SqlClient;
Code under Page_Load Event:
SqlDataAdapter da = new SqlDataAdapter(
"Select Sid, Name, Class, Fees, PhotoName, Status From Student Order By Sid", ReadCS.ASPDB);
DataSet ds = new DataSet();
da.Fill(ds, "Student");
ListView1.DataSource = ds;
ListView1.DataBind();
Peforming editing operations with ListView control: add a new WebForm under the project naming it as
“ASPDB_Customer_ListView_Editing.aspx” and write the following code under its “<div>” tag:
<asp:ListView ID="ListView1" runat="server" DataKeyNames="Custid" InsertItemPosition="LastItem">
<LayoutTemplate>
<table border="1" align="center">
<caption>Customer Details</caption>
<tr><th>Custid</th><th>Name</th><th>Balance</th><th>City</th><th>Is-Active</th><th>Actions</th></tr>
<asp:PlaceHolder ID="ItemPlaceHolder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td align="center"><%# Eval("Custid") %></td>
<td><%# Eval("Name") %></td>
<td align="right"><%# Eval("Balance") %></td>
<td><%# Eval("City") %></td>
<td align="center"><asp:CheckBox ID="cbStatus" runat="server" Enabled="false"
Checked='<%# Eval("Status") %>' /></td>
<td align="center">
<asp:LinkButton ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" />
<asp:LinkButton ID="LinkDelete" runat="server" Text="Delete" CommandName="Delete"
OnClientClick="return confirm('Are you sure of deleting the record?')" />
</td>
</tr>
</ItemTemplate>
<InsertItemTemplate>
<tr style="background-color:cornflowerblue">
<td></td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<td><asp:TextBox ID="txtBalance" runat="server" /></td>
<td><asp:TextBox ID="txtCity" runat="server" /></td>
<td align="center"><asp:CheckBox ID="cbStatus" runat="server" /></td>
<td align="center"><asp:LinkButton ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" />
</td>
</tr>
6
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
</InsertItemTemplate>
<EditItemTemplate>
<tr style="background-color:aquamarine">
<td><%# Eval("Custid") %></td>
<td><asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' /></td>
<td><asp:TextBox ID="txtBalance" runat="server" Text='<%# Eval("Balance") %>' /></td>
<td><asp:TextBox ID="txtCity" runat="server" Text='<%# Eval("City") %>' /></td>
<td align="center"><asp:CheckBox ID="cbStatus" runat="server" Enabled="false"
Checked='<%# Eval("Status") %>' /></td>
<td align="center">
<asp:LinkButton ID="btnUpdate" runat="server" Text="Update" CommandName="Update" />
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" />
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
Now go to design view of the Web Form and double click on “ItemEditing”, “ItemCanceling”,
“ItemInserting”, “ItemUpdating” and “ItemDeleting” events of “ListView” control and write the below code under
“ASPDB_Customer_ListView_Editing.aspx” file:
Declarations: Customer obj = new Customer();
Code under Page Load Event:
if (!IsPostBack) {
LoadData();
}
private void LoadData() {
ListView1.DataSource = obj.Customer_Select(null, true);
ListView1.DataBind();
}
Code under ListView ItemEditing Event:
ListView1.EditIndex = e.NewEditIndex;
LoadData();
Code under ListView ItemCanceling Event:
ListView1.EditIndex = -1;
LoadData();
Code under ListView ItemInserting Event:
string Name = ((TextBox)e.Item.FindControl("txtName")).Text;
decimal Balance = decimal.Parse(((TextBox)e.Item.FindControl("txtBalance")).Text);
string City = ((TextBox)e.Item.FindControl("txtCity")).Text;
bool Status = ((CheckBox)e.Item.FindControl("cbStatus")).Checked;
int? Custid = null;
if(obj.Customer_Insert(Name, Balance, City, Status, ref Custid) > 0)
LoadData();
else
Response.Write("<script>alert('Failed inserting record into the table.')</script>");
7
ASP.NET Tutorial By Coder Baba www.youtube.com/coderbaba
Code under ListView ItemUpdating Event:
int Custid = (int)e.Keys["Custid"];
string Name = ((TextBox)ListView1.Items[e.ItemIndex].FindControl("txtName")).Text;
decimal Balance = decimal.Parse(((TextBox)ListView1.Items[e.ItemIndex].FindControl("txtBalance")).Text);
string City = ((TextBox)ListView1.Items[e.ItemIndex].FindControl("txtCity")).Text;
if (obj.Customer_Update(Custid, Name, Balance, City) > 0) {
ListView1.EditIndex = -1; LoadData();
}
else
Response.Write("<script>alert('Failed updating record in the table.')</script>");
Code under ListView ItemDeleting Event:
int Custid = (int)e.Keys["Custid"];
if (obj.Customer_Delete(Custid) > 0)
LoadData();
else
Response.Write("<script>alert('Failed deleting record from the table.')</script>");
