List View and Data Pager Control in Asp.net

By Admin at 10 Nov 2014, 17:57 PM
  • Paging in a website plays a vital role in web application development. The default paging supports in asp.net are Grid View and DataGrid. The page control “Datapager” was introduced in asp.net 3.5 version. Datapager will work only when the IPageableItemContainer interface is implemented.

    List View

    ListView is a data bound control that returns data from a data source and displays it. It is a combination of the Datagrid and Repeater controls. It enables users to sort, edit, insert and delete the data; it also provides various templates and styles for users to create a UI according to specific needs.

    The following example illustrates the Employee list in the Listview control with the help of the DataPager control. The following templates are used to create the control.

    LayoutTemplate – It defines the table and div elements and contains the datapager object.

    ItemTemplate – It defines the data bound content.

    AlternatingItemTemplate – It defines the content to render for alternating items.

    EmptyDataTemplate – If the data source returns no data then this section will render.

    Design

    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2. <head runat="server">
    3. <title></title>
    4. </head>
    5. <body>
    6. <form id="form1" runat="server">
    7. <h2>Employee List</h2>
    8. <asp:ListView ID="MyList" runat="server" ItemPlaceholderID="PlaceHolder1" DataKeyNames="EmployeeID">
    9. <LayoutTemplate>
    10. <table width="60%" cellpadding="4" cellspacing="0" border="1">
    11. <tr><td>Name</td><td>Address</td><td>Phone</td>
    12. </tr>
    13. <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    14. </table>
    15. </LayoutTemplate>
    16. <ItemTemplate>
    17. <tr><td><%# Eval("LastName")%></td>
    18. <td><%# Eval("FirstName")%></td>
    19. <td><%# Eval("Title")%></td>
    20. </tr>
    21. </ItemTemplate>
    22. <AlternatingItemTemplate>
    23. <tr><td><%# Eval("LastName")%></td>
    24. <td><%# Eval("FirstName")%></td>
    25. <td><%# Eval("Title")%></td>
    26. </tr>
    27. </AlternatingItemTemplate>
    28. <EmptyDataTemplate>
    29. <hr />
    30. No Records Found.<hr />
    31. </EmptyDataTemplate>
    32. </asp:ListView>
    33. <div>
    34. <asp:DataPager ID="DataPager1" runat="server" PagedControlID="MyList" PageSize="5" QueryStringField="pageid">
    35. <Fields>
    36. <asp:NumericPagerField ButtonCount="4" />
    37. </Fields>
    38. </asp:DataPager>
    39. </div>
    40. </form>
    41. </body>
    42. </html>

    Code

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.UI;
    6. using System.Web.UI.WebControls;
    7. using System.Data.SqlClient;
    8. using System.Data;
    9. public partial class _Default : System.Web.UI.Page
    10. {
    11. protectedvoid Page_Load(object sender, EventArgs e)
    12. {
    13. if (!IsPostBack)
    14. {
    15. BindPersonDetails("LastName ASC");
    16. }
    17. }
    18. privatevoid BindPersonDetails(string sortExpression)
    19. {
    20. sortExpression = sortExpression.Replace("Ascending", "ASC");
    21. SqlConnection con = new SqlConnection("Server=servername;uid=test;password=test;database=Northwind");
    22. con.Open();
    23. SqlCommand cmd = new SqlCommand("SELECT EmployeeID, LastName, FirstName, Title, BirthDate, HireDate, Address, City, Region FROM dbo.Employees", con);
    24. SqlDataAdapter da = new SqlDataAdapter(cmd);
    25. DataSet ds = new DataSet();
    26. da.Fill(ds);
    27. con.Close();
    28. DataTable dTable = ds.Tables[0];
    29. dTable.DefaultView.Sort = sortExpression;
    30. MyList.DataSource = dTable;
    31. MyList.DataBind();
    32. con.Close();
    33. }
    34. }

    Output

    undefined

    When the page is loaded the BindPersonDetails() method will be called and passed the string “LastName Asc”. This value will be used in the data table to order the rows.


    Comments

     

    Post a comment

    Please correct the following: