Post
Ask Question

Binding ListView Control Through ViewState

This article shows how to bind data in ListView controls with using ViewState variable and also shows paging on controls on linkbutton click. We will learn here how to bind controls with data with ViewState and how to handle paging on controls. This binds data according to 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 ListViewUsingViewState.

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

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

Design Chamber

Step 3: Open the ListViewUsingViewState.aspx file and write some code for the design of the application.

When you open this page you can see the following code-

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewUsingViewState.aspx.cs" Inherits="ListViewUsingViewState" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title> </title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.               
  13.         </div>  
  14.     </form>  
  15. </body>  
  16. </html>  
  17. Now add control on page then you get below code-  
  18. <div>  
  19.             <%-- Here we add data to bind in ViewState --%>  
  20.             <div>  
  21.                 <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>  
  22.                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  23.                 <asp:Label ID="Label2" runat="server" Text="Designation"></asp:Label>  
  24.                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  25.                 <asp:Button ID="Button1" runat="server" Text="save" OnClick="InsertData" />  
  26.             </div><br />  
  27.             <%-- end --%>  
  28.             <%-- listview check --%>  
  29.             <div>  
  30.                 <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">  
  31.                     <LayoutTemplate>  
  32.                         <table border="1">  
  33.                             <tr>  
  34.                                 <th>Name  
  35.                                 </th>  
  36.                                 <th>Designation  
  37.                                 </th>  
  38.   
  39.                             </tr>  
  40.                             <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>  
  41.                             <tr>  
  42.                                 <td colspan="3">  
  43.                                     <%-- This part used for paging --%>  
  44.                                     <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="2">  
  45.                                         <Fields>  
  46.                                             <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"  
  47.                                                 ShowNextPageButton="false" />  
  48.                                             <asp:NumericPagerField ButtonType="Link" />  
  49.                                             <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />  
  50.                                         </Fields>  
  51.                                     </asp:DataPager>  
  52.                                     <%-- end --%>  
  53.                                 </td>  
  54.                             </tr>  
  55.                     </LayoutTemplate>  
  56.                     <GroupTemplate>  
  57.                         <tr>  
  58.                             <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>  
  59.                         </tr>  
  60.                     </GroupTemplate>  
  61.                     <ItemTemplate>  
  62.                         <td>  
  63.                             <%# Eval("Name") %>  
  64.                         </td>  
  65.                         <td>  
  66.                             <%# Eval("Designation") %>  
  67.                         </td>  
  68.   
  69.                     </ItemTemplate>  
  70.   
  71.                 </asp:ListView>  
  72.   
  73.             </div>  
  74.             <%-- end --%>  
  75.         </div>  
In above code I have add one listview control and its attribute and I’ve also add two textbox and one button control to add data in ViewState to bind with ListView control.

Here I have designed the ListView Control and used some property as in the following:

Now design page looks like the following:

Design Page-
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewUsingViewState.aspx.cs" Inherits="ListViewUsingViewState" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>List View With View State - Upendra Pratap Shahi</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <%-- Here we add data to bind in ViewState --%>  
  13.             <div>  
  14.                 <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>  
  15.                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  16.                 <asp:Label ID="Label2" runat="server" Text="Designation"></asp:Label>  
  17.                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  18.                 <asp:Button ID="Button1" runat="server" Text="save" OnClick="InsertData" />  
  19.             </div><br />  
  20.             <%-- end --%>  
  21.             <%-- listview check --%>  
  22.             <div>  
  23.                 <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">  
  24.                     <LayoutTemplate>  
  25.                         <table border="1">  
  26.                             <tr>  
  27.                                 <th>Name  
  28.                                 </th>  
  29.                                 <th>Designation  
  30.                                 </th>  
  31.   
  32.                             </tr>  
  33.                             <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>  
  34.                             <tr>  
  35.                                 <td colspan="3">  
  36.                                     <%-- This part used for paging --%>  
  37.                                     <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="2">  
  38.                                         <Fields>  
  39.                                             <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"  
  40.                                                 ShowNextPageButton="false" />  
  41.                                             <asp:NumericPagerField ButtonType="Link" />  
  42.                                             <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />  
  43.                                         </Fields>  
  44.                                     </asp:DataPager>  
  45.                                     <%-- end --%>  
  46.                                 </td>  
  47.                             </tr>  
  48.                     </LayoutTemplate>  
  49.                     <GroupTemplate>  
  50.                         <tr>  
  51.                             <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>  
  52.                         </tr>  
  53.                     </GroupTemplate>  
  54.                     <ItemTemplate>  
  55.                         <td>  
  56.                             <%# Eval("Name") %>  
  57.                         </td>  
  58.                         <td>  
  59.                             <%# Eval("Designation") %>  
  60.                         </td>  
  61.   
  62.                     </ItemTemplate>  
  63.   
  64.                 </asp:ListView>  
  65.   
  66.             </div>  
  67.             <%-- end --%>  
  68.         </div>  
  69.     </form>  
  70. </body>  
  71. </html>  
Your design looks like the following figure:

design
Figure 1

Code chamber

Step 4 In the code chamber we will write some code so that our application works.

Adding the following namespaces on namespace section of your code behind page-
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
Now your page looks like –

Code behind Page-
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8.   
  9. public partial class ListViewUsingViewState : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         if (!IsPostBack)  
  14.         {  
  15.             DataTable dt = new DataTable();  
  16.             dt.Columns.Add("Name", typeof(string));  
  17.             dt.Columns.Add("Designation", typeof(string));  
  18.             ViewState["DataEntry"] = dt;  
  19.             BindListView();  
  20.         }  
  21.     }  
  22.   
  23.     private void BindListView()  
  24.     {  
  25.         DataTable dt = new DataTable();  
  26.         dt = (DataTable)ViewState["DataEntry"];  
  27.         if (dt.Rows.Count > 0 && dt != null)  
  28.         {  
  29.             ListView1.DataSource = dt;  
  30.             ListView1.DataBind();  
  31.         }  
  32.         else  
  33.         {  
  34.             ListView1.DataSource = null;  
  35.             ListView1.DataBind();  
  36.         }  
  37.     }  
  38.     /// <summary>  
  39.     /// This function is used to save the data in ViewState  
  40.     /// </summary>  
  41.     /// <param name="sender">sender</param>  
  42.     /// <param name="e">e</param>  
  43.     protected void InsertData(object sender, EventArgs e)  
  44.     {  
  45.         string sName = "";  
  46.         string sDesg = "";  
  47.         //here taking data from textbox  
  48.         if (TextBox1.Text.ToString() == "")  
  49.         {  
  50.             ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Enter the name')", true);  
  51.             return;  
  52.         }  
  53.         else  
  54.         {  
  55.             sName = TextBox1.Text.ToString();  
  56.         }  
  57.         if (TextBox2.Text.ToString() == "")  
  58.         {  
  59.             ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Enter the designation')", true);  
  60.             return;  
  61.         }  
  62.         else  
  63.         {  
  64.             sDesg = TextBox2.Text.ToString();  
  65.         }  
  66.         DataTable dt = new DataTable();  
  67.         DataRow dr;  
  68.         //assigning ViewState value in Data Table  
  69.         dt = (DataTable)ViewState["DataEntry"];  
  70.         //Adding value in datatable  
  71.         dr = dt.NewRow();  
  72.         dr["Name"] = sName;  
  73.         dr["Designation"] = sDesg;  
  74.         dt.Rows.Add(dr);  
  75.         if (dt != null)  
  76.         {  
  77.             ViewState["DataEntry"] = dt;  
  78.         }  
  79.         //here bind Listview after data save in ViewState  
  80.         this.BindListView();  
  81.         //empty the textbox control  
  82.         TextBox1.Text = string.Empty;  
  83.         TextBox2.Text = string.Empty;  
  84.     }  
  85.     //this is used for paging on ListView  
  86.     protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)  
  87.     {  
  88.         (ListView1.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);  
  89.         this.BindListView();  
  90.     }  
  91. }  
Output

On initial load-

On initial load
                                                   Figure 2

On blank data

On blank data
                                                                    Figure 3

message
                                                                     Figure 4

Enter data

Enter data
                                                                           Figure 5

On first entry

On first entry
                                                                           Figure 6

On Second Entry

On Second Entry
                                                                              Figure 7

On third entry paging shows

On third entry paging shows
                                                                           Figure 8

Now click on paging and see the following output.

click on paging
                                                                                    Figure 9

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

 


Similar Articles