Click here to Skip to main content
11,414,234 members (71,979 online)
Click here to Skip to main content

Complete ListView in ASP.NET 3.5

, 23 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Most powerful data binding control which has the power of easier data-binding, flexible pagination, sorting, inserting, deleting, and updating and CSS implement features.
CompleteListView

Introduction

ASP.NET 3.5 introduces a new data binding control named the ListView. ASP.NET already has a lot of data bind controls; it should be more than 10. But the good news is, ListView can literally replace all other data binding controls in ASP.NET. ListView control makes data binding easier than previous controls. It has included styling with CSS, flexible pagination, and sorting, inserting, deleting, and updating features.

Complete ListView

Listview having full data control support

In this article, I will describe features in ListView step by step with related code review.

  1. Data binding
  2. Data pager
  3. Sorting
  4. Insert, update and delete

DataBinding

The ListView is a template driven control which means that it will not render anything. By default, the developer must completely specify the HTML he/she wants to render in the form of templates. To show data in ListView control, you need to take a LayoutTemplate (to define top level of HTML for output rendering). To show data, you need to take ItemTemplate and AlternativeItemTemplate to show alternative row as with different CSS. Here is the example of simple data binding with AlternativeItemTemplate.

//very simple databinding in 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>

Here Layout template is making header of the control, and ItemTemplate is showing data taken from table by Binding columns with Label controls, and AlternativeItemTemplate does the same as ItemTemplate just changing CSS for alternative columns.

DataPager

To add pagination in the listview, you need to add an asp:DataPager control, better to put this control inside LayoutTemplate at the end of the LayoutTemplate. DataPager control has many options to show pagination and these are useful too. Here I have just used a simple one.

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

Sorting

It is very easy to sort data in ListView. Sort functionality is defined in the CommandArgument property of the button that contains the columns to be sorted. It occurs when a button with its CommandName property set to Sort is clicked. And you need to make a call to the Sort method named onsorting="ListView1_Sorting".

// to allow sort if click on the header of the table make 
//table header controls clickable 
//and give commandname and commandargument
<tr style="background-color:#E5E5FE">
 <th align="left"><asp:LinkButton ID="lnkId" runat="server" 
	CommandName="Sort" CommandArgument="ID">Id</asp:LinkButton></th>
 <th align="left"><asp:LinkButton ID="lnkName" runat="server" 
	CommandName="Sort" CommandArgument="FirstName">Name</asp:LinkButton></th>
 <th align="left"><asp:LinkButton ID="lnkType" runat="server" 
	CommandName="Sort" CommandArgument="ContactType">Type</asp:LinkButton></th>
 <th></th>
</tr>    

Insert, Update and Delete

To insert data into ListView, you need to add a tag in ListView named InsertItemTemplate. Add to add inserted code, add code in ItemCommand.

HTML Code

<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>    

CS Code

In the CS file, insert this code in ItemCommand:

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;
}

In the same way, code for Update and Delete will be done using EditItemTemlpate. Please check the attached source files to get the complete code.

History

  • 24th March 2008: First version of the article

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ashrafur Rahaman
Software Developer (Senior)
Canada Canada
Software engineer with broad experience in enterprise application development, product deployment automation, software test & test automation, application & system management, and manage big projects and team using proven agile technologies.

Passionate on Microsoft technologies, developed solutions using C#, .net (1.1/2.0/3.5/4), SQL Server (2005/2008). Work on Powershell, SSRS, SSIS, WPF, Ajax, WCF, JQuery.

Develop innovative application with cutting edge technologies always boosting inside.

Comments and Discussions

 
Questionupdate with access database [modified] Pin
gsganesh, 20-Mar-15 5:41
membergsganesh20-Mar-15 5:41 
QuestionFew Error on that... Pin
Member 10447699, 29-Oct-14 10:03
memberMember 1044769929-Oct-14 10:03 
GeneralI Vote 5 for this Article Pin
DivyaNaidu486, 7-Oct-14 0:12
memberDivyaNaidu4867-Oct-14 0:12 
GeneralMy vote of 1 Pin
SoliMoli, 10-May-14 14:10
memberSoliMoli10-May-14 14:10 
QuestionThe ID need to click twice to sort Pin
Member 10753068, 18-Apr-14 8:45
memberMember 1075306818-Apr-14 8:45 
GeneralMy vote of 1 Pin
gcaferra, 8-Jan-14 0:14
membergcaferra8-Jan-14 0:14 
QuestionAdd a scroll bar? Pin
marc11h, 13-Dec-13 5:52
membermarc11h13-Dec-13 5:52 
GeneralMy vote of 1 Pin
JasonMacD, 15-Oct-13 6:13
memberJasonMacD15-Oct-13 6:13 
GeneralMy vote of 1 Pin
housemusic, 13-Aug-13 10:25
memberhousemusic13-Aug-13 10:25 
GeneralMy vote of 2 Pin
RasoulJormand, 5-Aug-13 5:05
memberRasoulJormand5-Aug-13 5:05 
GeneralMy vote of 3 Pin
sid_boss, 2-Aug-13 3:41
membersid_boss2-Aug-13 3:41 
QuestionIt's vulnerable to SQL Injection Pin
Pham Dinh Truong, 26-Jun-13 22:25
memberPham Dinh Truong26-Jun-13 22:25 
GeneralMy vote of 2 Pin
Sivakuttim, 1-Mar-13 19:12
memberSivakuttim1-Mar-13 19:12 
GeneralMy vote of 5 Pin
Member 2362774, 28-Feb-13 21:57
memberMember 236277428-Feb-13 21:57 
GeneralMy vote of 5 Pin
jitendra prajapat, 31-Jan-13 3:28
memberjitendra prajapat31-Jan-13 3:28 
QuestionMy Vote Of 4 Pin
Alireza_1362, 28-Jan-13 1:50
memberAlireza_136228-Jan-13 1:50 
GeneralMy vote of 4 Pin
raj dhakad, 3-Oct-12 22:12
memberraj dhakad3-Oct-12 22:12 
QuestionDoubt....? Pin
dineshkanagaraj, 16-Aug-12 3:20
memberdineshkanagaraj16-Aug-12 3:20 
GeneralMy vote of 5 Pin
Bilal Fazlani, 14-May-12 18:18
memberBilal Fazlani14-May-12 18:18 
QuestionPLEASE - PLEASE show how to adjust column width in this excellent example!!! [modified] Pin
marc11h, 8-May-12 11:03
membermarc11h8-May-12 11:03 
GeneralMy vote of 5 Pin
Hitesh Kumar11, 4-Apr-12 3:21
memberHitesh Kumar114-Apr-12 3:21 
GeneralMy vote of 5 Pin
Rashed_, 10-Feb-12 21:42
memberRashed_10-Feb-12 21:42 
GeneralMy vote of 5 Pin
ankuronlyu, 18-Oct-11 22:44
memberankuronlyu18-Oct-11 22:44 
QuestionYour explication is simple and good! I need it. But I use Web service without database... [modified] Pin
aspkiddy, 4-Oct-11 4:25
memberaspkiddy4-Oct-11 4:25 
General[My vote of 2] Demo has no database Pin
maximus.dec.meridius, 2-Jun-11 12:03
membermaximus.dec.meridius2-Jun-11 12:03 
GeneralRe: [My vote of 2] Demo has no database Pin
paddyirishman05, 4-Oct-12 7:27
memberpaddyirishman054-Oct-12 7:27 
GeneralExcellent for them who are beginner with the ListView Pin
harish kr chandna, 30-May-11 23:33
memberharish kr chandna30-May-11 23:33 
GeneralMy vote of 3 Pin
Meikanda, 21-Apr-11 19:05
memberMeikanda21-Apr-11 19:05 
GeneralMy vote of 5 Pin
Kimmo Mbanga, 9-Mar-11 12:46
memberKimmo Mbanga9-Mar-11 12:46 
GeneralMy vote of 1 Pin
Member 7463801, 23-Sep-10 21:21
memberMember 746380123-Sep-10 21:21 
GeneralMy vote of 1 Pin
AlexanderHaniche, 9-May-10 23:14
memberAlexanderHaniche9-May-10 23:14 
GeneralRe: My vote of 1 Pin
nahid477, 17-Aug-10 15:40
membernahid47717-Aug-10 15:40 
GeneralMy vote of 1 Pin
emission, 15-Mar-10 3:44
memberemission15-Mar-10 3:44 
Generalignore the novice Pin
tslois, 24-Dec-09 18:46
membertslois24-Dec-09 18:46 
GeneralGood Pin
kasmatt, 26-Oct-09 23:47
memberkasmatt26-Oct-09 23:47 
GeneralGood Pin
Abhishek Sur, 28-Sep-09 22:26
memberAbhishek Sur28-Sep-09 22:26 
Generalmissing Pin
ykiranbabu, 16-Jul-09 1:04
memberykiranbabu16-Jul-09 1:04 
GeneralGood Article Pin
robertoqzs, 24-Jun-09 21:00
memberrobertoqzs24-Jun-09 21:00 
GeneralRe: Good Article Pin
quangngocanh, 14-Apr-11 22:32
memberquangngocanh14-Apr-11 22:32 
GeneralMy vote of 1 Pin
Kam, 17-Apr-09 8:23
memberKam17-Apr-09 8:23 
where is the data bound section? don't post or post something that people can benefit of it!!!
GeneralDatabase is missing Pin
Member 4032537, 24-Mar-09 7:11
memberMember 403253724-Mar-09 7:11 
GeneralSomething is missing Pin
Member 1891290, 23-Feb-09 5:21
memberMember 189129023-Feb-09 5:21 
GeneralGood introduction Pin
Fredrik Josefsson, 3-Feb-09 3:03
memberFredrik Josefsson3-Feb-09 3:03 
GeneralRe: Good introduction Pin
Ashrafur Rahaman, 3-Feb-09 5:49
memberAshrafur Rahaman3-Feb-09 5:49 
GeneralMy vote of 2 Pin
Frank Kerrigan, 9-Dec-08 3:33
memberFrank Kerrigan9-Dec-08 3:33 
GeneralMy vote of 1 Pin
gino_montano, 1-Dec-08 4:09
membergino_montano1-Dec-08 4:09 
Questionhow to set header information dynamically Pin
gargvijay, 30-Oct-08 20:24
membergargvijay30-Oct-08 20:24 
GeneralNot bad, but... Pin
CrazyTasty, 27-Jul-08 21:42
memberCrazyTasty27-Jul-08 21:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150427.2 | Last Updated 23 Mar 2008
Article Copyright 2008 by Ashrafur Rahaman
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid