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" %>
  3. <!DOCTYPE html>
  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>
  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>
  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>
  69. </ItemTemplate>
  71. </asp:ListView>
  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" %>
  3. <!DOCTYPE html>
  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>
  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>
  62. </ItemTemplate>
  64. </asp:ListView>
  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;
  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. }
  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.