We will learn here how to bind controls with data without a database and how to handle paging on controls. This binding of data depends on the link button text on link button click event.

Also read:

Initial Chamber

Step 1

Open your Visual Studio and create an empty website then provide a suitable name such as ListViewLinkBtn.

Step 2

In Solution Explorer you will get your empty website, then add some web forms.

ListViewLinkBtn (your empty website). Right-click and select Add New Item Web Form. Name it ListViewLinkBtn.aspx.

Design Chamber

Step 3

Open the ListViewLinkBtn.aspx file and write some code for the design of the application.

Step 3.1

Add the following style sheet code to the head chamber of the page:

  1. <style type="text/css">
  2. .linkCat {
  3. background-color:aqua;
  4. }
  5. </style>

Set your style of page depending on your needs.

Step 3.2

Choose the control from the toolbox and make your design page like:

  1. <div>
  2. <h3>ListView</h3>
  4. <%-- Linkbutton --%>
  5. <asp:LinkButton ID="lnkCat1" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat1" OnClick="ENameLinkBtn_Click" CommandArgument="Cat1"></asp:LinkButton>
  6. <asp:LinkButton ID="lnkCat2" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat2" OnClick="ENameLinkBtn_Click" CommandArgument="Cat2"></asp:LinkButton>
  7. <asp:LinkButton ID="lnkCat3" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat3" OnClick="ENameLinkBtn_Click" CommandArgument="Cat3"></asp:LinkButton>
  8. <asp:HiddenField ID="hdnText" runat="server" ClientIDMode="Static" Value="" />
  9. <%-- end --%>
  11. <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
  12. ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">
  13. <LayoutTemplate>
  14. <table border="1">
  15. <tr>
  16. <th>Product
  17. </th>
  18. <th>Quantity
  19. </th>
  20. <th>Price
  21. </th>
  22. <th>Category
  23. </th>
  24. </tr>
  25. <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
  26. <tr>
  27. <td colspan="3">
  28. <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="2">
  29. <Fields>
  30. <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
  31. ShowNextPageButton="false" />
  32. <asp:NumericPagerField ButtonType="Link" />
  33. <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
  34. </Fields>
  35. </asp:DataPager>
  36. </td>
  37. </tr>
  38. </table>
  39. </LayoutTemplate>
  40. <GroupTemplate>
  41. <tr>
  42. <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
  43. </tr>
  44. </GroupTemplate>
  45. <ItemTemplate>
  46. <td>
  47. <%# Eval("Product_Name") %>
  48. </td>
  49. <td>
  50. <%# Eval("Quantity") %>
  51. </td>
  52. <td>
  53. <%# Eval("Price") %>
  54. </td>
  55. <td>
  56. <%# Eval("Category") %>
  57. </td>
  58. </ItemTemplate>
  59. </asp:ListView>
  60. </div>

Here I've designed the ListView Control and used some property as in the following.

Design Page

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewLinkBtn.aspx.cs" Inherits="ListViewLinkBtn" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <style type="text/css">
  9. .linkCat {
  10. background-color:aqua;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <div>
  17. <h3>ListView</h3>
  19. <%-- Linkbutton --%>
  20. <asp:LinkButton ID="lnkCat1" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat1" OnClick="ENameLinkBtn_Click" CommandArgument="Cat1"></asp:LinkButton>
  21. <asp:LinkButton ID="lnkCat2" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat2" OnClick="ENameLinkBtn_Click" CommandArgument="Cat2"></asp:LinkButton>
  22. <asp:LinkButton ID="lnkCat3" CssClass="linkCat" runat="server" ClientIDMode="Static" Text="Cat3" OnClick="ENameLinkBtn_Click" CommandArgument="Cat3"></asp:LinkButton>
  23. <asp:HiddenField ID="hdnText" runat="server" ClientIDMode="Static" Value="" />
  24. <%-- end --%>
  26. <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
  27. ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">
  28. <LayoutTemplate>
  29. <table border="1">
  30. <tr>
  31. <th>Product
  32. </th>
  33. <th>Quantity
  34. </th>
  35. <th>Price
  36. </th>
  37. <th>Category
  38. </th>
  39. </tr>
  40. <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
  41. <tr>
  42. <td colspan="3">
  43. <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="2">
  44. <Fields>
  45. <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
  46. ShowNextPageButton="false" />
  47. <asp:NumericPagerField ButtonType="Link" />
  48. <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
  49. </Fields>
  50. </asp:DataPager>
  51. </td>
  52. </tr>
  53. </table>
  54. </LayoutTemplate>
  55. <GroupTemplate>
  56. <tr>
  57. <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
  58. </tr>
  59. </GroupTemplate>
  60. <ItemTemplate>
  61. <td>
  62. <%# Eval("Product_Name") %>
  63. </td>
  64. <td>
  65. <%# Eval("Quantity") %>
  66. </td>
  67. <td>
  68. <%# Eval("Price") %>
  69. </td>
  70. <td>
  71. <%# Eval("Category") %>
  72. </td>
  73. </ItemTemplate>
  74. </asp:ListView>
  75. </div>
  76. </form>
  77. </body>
  78. </html>

Your design looks as in Figure 1.

design
Figure 1

Code Chamber

Step 4

In the code Chamber we will write some code so that our application works.

Add the following namespaces to the namespace section of your code behind page.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;

Now your page looks as in the following.

Code behind Page

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  10. public partial class ListViewLinkBtn : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. if (!IsPostBack) {
  16. BindListView("");
  18. }
  20. }
  21. protected void BindListView(string sGroup)
  22. {
  24. //Creating a dataset
  25. DataSet ds = new DataSet();
  26. DataTable dt;
  27. DataRow dr;
  28. DataColumn pName;
  29. DataColumn pQty;
  30. DataColumn pPrice;
  31. DataColumn pCategory;
  32. //create an object of datatable
  33. dt = new DataTable();
  34. //creating column of datatable with datatype
  35. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  36. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  37. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  38. pCategory = new DataColumn("Category", Type.GetType("System.String"));
  39. //bind data table columns in datatable
  40. dt.Columns.Add(pName);
  41. dt.Columns.Add(pQty);
  42. dt.Columns.Add(pPrice);
  43. dt.Columns.Add(pCategory);
  44. //creating data row and assiging the value to columns of datatable
  45. dr = dt.NewRow();
  46. dr["Product_Name"] = "Product 1";
  47. dr["Quantity"] = 2;
  48. dr["Price"] = 200;
  49. dr["Category"] = "Cat1";
  50. dt.Rows.Add(dr);
  52. dr = dt.NewRow();
  53. dr["Product_Name"] = "Product 2";
  54. dr["Quantity"] = 5;
  55. dr["Price"] = 480;
  56. dr["Category"] = "Cat2";
  57. dt.Rows.Add(dr);
  59. dr = dt.NewRow();
  60. dr["Product_Name"] = "Product 3";
  61. dr["Quantity"] = 8;
  62. dr["Price"] = 100;
  63. dr["Category"] = "Cat1";
  64. dt.Rows.Add(dr);
  66. dr = dt.NewRow();
  67. dr["Product_Name"] = "Product 4";
  68. dr["Quantity"] = 2;
  69. dr["Price"] = 500;
  70. dr["Category"] = "Cat2";
  71. dt.Rows.Add(dr);
  73. dr = dt.NewRow();
  74. dr["Product_Name"] = "Product 5";
  75. dr["Quantity"] = 8;
  76. dr["Price"] = 1050;
  77. dr["Category"] = "Cat3";
  78. dt.Rows.Add(dr);
  80. dr = dt.NewRow();
  81. dr["Product_Name"] = "Product 6";
  82. dr["Quantity"] = 2;
  83. dr["Price"] = 5005;
  84. dr["Category"] = "Cat3";
  85. dt.Rows.Add(dr);
  87. dr = dt.NewRow();
  88. dr["Product_Name"] = "Product 7";
  89. dr["Quantity"] = 8;
  90. dr["Price"] = 1000;
  91. dr["Category"] = "Cat3";
  92. dt.Rows.Add(dr);
  94. dr = dt.NewRow();
  95. dr["Product_Name"] = "Product 8";
  96. dr["Quantity"] = 2;
  97. dr["Price"] = 5000;
  98. dr["Category"] = "Cat3";
  99. dt.Rows.Add(dr);
  100. //Add datatable to the dataset
  102. ds.Tables.Add(dt);
  103. if (sGroup != "")
  104. {
  105. var dv = ds.Tables[0].DefaultView;
  106. dv.RowFilter = "Category='" + sGroup + "'";
  107. DataSet ds1 = new DataSet();
  108. var newdt = dv.ToTable();
  109. ds1.Tables.Add(newdt);
  110. //bind data to data controls
  111. lvCustomers.DataSource = ds1.Tables[0];
  112. lvCustomers.DataBind();
  113. }
  114. else {
  115. lvCustomers.DataSource = ds.Tables[0];
  116. lvCustomers.DataBind();
  117. }
  118. }
  119. //paging code
  120. protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
  121. {
  122. (lvCustomers.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
  124. if (hdnText.Value != "")
  125. {
  126. string yourValue = hdnText.Value.ToString();
  127. this.BindListView(yourValue);
  128. }
  129. else
  130. {
  131. this.BindListView("");
  132. }
  133. }
  134. protected void ENameLinkBtn_Click(object sender, EventArgs e)
  135. {
  136. LinkButton btn = (LinkButton)(sender);
  137. string yourValue = btn.CommandArgument;
  138. // do what you need here
  139. hdnText.Value = yourValue;
  140. BindListView(yourValue);
  141. }
  142. }

Output

On initial load:

On initial load
Figure 2

On first link button click:

On first link button click
Figure 3

On second link button click:

On 2nd link button click
Figure 4

On third link button click:

On 3rd link button click
Figure 5

On third link page click:

list view
Figure 6

I hope you liked this. Have a good day. Thank you for reading.