Post
Ask Question

Binding Data in ListView on LinkButton Click

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>  
  3.       
  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 --%>  
  10.   
  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" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  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>  
  18.              
  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 --%>  
  25.   
  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;  
  9.   
  10. public partial class ListViewLinkBtn : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!IsPostBack) {  
  15.   
  16.             BindListView("");  
  17.               
  18.         }  
  19.   
  20.     }  
  21.     protected void BindListView(string sGroup)  
  22.     {  
  23.   
  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);  
  51.   
  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);  
  58.   
  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);  
  65.   
  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);  
  72.   
  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);  
  79.   
  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);  
  86.   
  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);  
  93.   
  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  
  101.   
  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);  
  123.   
  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.


Similar Articles