Server Side View State In ASP.NET

Rizwan Ali
9y
18.2k
0
1

Article

Introduction

View State is a State Management technique by which we store the data during the page post-back. Basically View State is a client-side State Management technique. We know that the web applications are stateless because they use the HTTP protocol and HTTP is a stateless protocol. The data saved in a View State will be stored in a hidden format. The main purpose of a View State is to maintain the state of the controls during the page post-back event. When we send or receive a request for the server then every time a new instance of the page is created. So using the View State we store the page value during the page post-back. View State is a 64 bit serialized string code in hidden format on the page and when the user makes a request then this data moves from the server to the client and the client to the server depending on the user request. Please note one thing here, that the page does not have the automatic cleared property when the end user clicks on the submit button. One thing here is clear that the value of the View State does not work for the multiple pages.

Now first I tell you about the client-side View State technique and then we will explain the server-side View State Management technique.

Client-side View State

Step 1

Open the Visual Studio, go to the new project, add a ASP.NET empty web application.

Step 2

Then right-click on the Solution Explorer, add a new item and then add a new web form.

Step 3

Now in theWebForm1.aspx we write the following code.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name::
</td>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
father Name::
</td>
<td>
<asp:TextBox ID="txtfathername" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
City::
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>--select--</asp:ListItem>
<asp:ListItem>Delhi</asp:ListItem>
<asp:ListItem>Noida</asp:ListItem>
<asp:ListItem>Bareilly</asp:ListItem>
<asp:ListItem>Gaziabaad</asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Gender::
</td>
<td>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" OnClick="btnsubmit_Click" />
</td>
<td>
<asp:Button ID="btnrestore" runat="server" Text="Restore" OnClick="btnrestore_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Step 4

Then open your WebForm1.aspx .cs and write the following code.

Code

using System;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
public string Name, fatherName, City, Gender;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnsubmit_Click(object sender, EventArgs e)
{
ViewState["Name"] = txtname.Text;
ViewState ["fatherName"] = txtfathername.Text;
ViewState["City"] = DropDownList1.SelectedItem.Text;
ViewState["Gender"] = RadioButtonList1.SelectedItem.Text;
clear();
}
protected void btnrestore_Click(object sender, EventArgs e)
{
if (ViewState["Name"] != null)
{
txtname.Text = ViewState["Name"].ToString();
}
if (ViewState["fatherName"] != null)
{
txtfathername.Text = ViewState["fatherName"].ToString();
}
if (ViewState["City"] != null)
{
DropDownList1.SelectedItem.Text = ViewState["City"].ToString();
}
if (ViewState["Gender"] != null)
{
RadioButtonList1.SelectedItem.Text = ViewState["Gender"].ToString();
}
}
public void clear()
{
txtname.Text = "";
txtfathername.Text = "";
DropDownList1.SelectedItem.Text = "";
RadioButtonList1.SelectedItem.Text = "";
}
}
}

This is a simple client-side View State example. First when we click on the submit button the data goes and is stored in the View State and when we click on the restore button the data comes from the View State and is shown on the page. When we run the application we get the following output:

Step 5

Now at that page in the browser where your application is running right-click on it and click on the view page source. There you will find your View State in encrypted format.

Code

<div class="aspNetHidden"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="8LrMyuvVAZko9eSik2wPrQK4zScyasSQS0fbKWCDypaCaLeSfUQsYSc1d50IbUNqcUx1J7DNEW7dGalHzTBjFrGeHVxmwiDzXVgeoAGGWTM8I6JVj0d9+iRcW9HJg3McSfqPq1yNSIokt2ShPZh8lMmt+mKPIg2MPfAtnixAiaU5bQQkOxp2Pp9ztgljl5lD+Wnz4BqzA6PRylHXMfvGjvegUcGOLVPPxUTvcCxoXH+XL/Zhkco1BdRaIPXM1Ssh" /></div>

So this is a client-side View State where we preserve the data during the page post-back method and call that data again and again on a similar page.

Now here we will discuss the Server-side View State.

Server-side View State

As I said above that View State stores the information during the page post-back. It stores the value of the server controls in a web form. The main advantage of View State is that it retains the control's values. The main problem with client-side View States is that when we convert our ASP web site into an ASP.Net web site we get an exception related to the View State and that exception is "The View State is invalid for this page and might be corrupted". So what are the reasons for this exception? The reason is that when the server redirecting is done the end-user sometimes uses the corrupt version of that page at which his/her View State exists because if there is any change in the hidden View State value then there will be an exception generated.

The other reason is that many browsers do not support the large hidden field inside it and sometimes when we make a View State there may be a large hidden file generated for the View State. So this is another reason to overcome this problem to save the View State at the server using the session object.

So now I have explained how to make a Server-side View State.

Step 1

For making a server-side View State we first must override "LoadPageStateFromPersistenceMedium()" and then override the "SavePageStateToPersistenceMedium" that are the page events. Then we write the View State code in the database or the file system depending on our needs.

The working of the LoadPageStateFromPersistenceMedium() and the SavePageStateToPersistenceMedium is totally dependent on the View State size. When the end user makes a request for the first time to use the page then by default SavePageStateToPersistenceMedium emerges. The main work of this event to save the View State, but when the user did not send the request the first time, in other words when the post-back event is true then the first LoadPageStateFromPersistenceMedium is generated and then the SavePageStateToPersistenceMedium occurs.

Step 2

Now again open the Visual Studio, go to the new website and add it.

Step 3

Go to the Solution Explorer, right-click on it and add a new Web form. And we also make a database table by which we bind the data in our grid view. That grid view is used by us in the following code.

The WebForm2.aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="GetState" />
<br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="FatherName" HeaderText="FatherName" SortExpression="FatherName" />
<asp:BoundField DataField="rollno" HeaderText="rollno" SortExpression="rollno" />
<asp:BoundField DataField="designation" HeaderText="designation" SortExpression="designation" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:rizzuConnectionString %>" SelectCommand="SELECT * FROM [rizwan]"></asp:SqlDataSource>
</form>
</body>
</html>

Step 4

Then we write the code in the following.

WebForm2.aspx.cs file Code

using System;
using System.Web.UI;
using System.IO;

namespace WebApplication1
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void SavePageStateToPersistenceMedium(object state)
        {

            string file = GenerateFileName();

            FileStream filestream = new FileStream(file, FileMode.Create);

            LosFormatter formator = new LosFormatter();

            formator.Serialize(filestream, state);

            filestream.Flush();

            filestream.Close();

            filestream = null;

        }

        protected override object LoadPageStateFromPersistenceMedium()
        {

            object state = null;

            StreamReader reader = new StreamReader(GenerateFileName());

            LosFormatter formator = new LosFormatter();

            state = formator.Deserialize(reader);

            reader.Close();

            return state;

        }

        private string GenerateFileName()
        {

            string file = Session.SessionID.ToString() + ".txt";

            file = Path.Combine(Server.MapPath("~/ViewStateFiles") + "/" + file);

            return file;

        }

    }
}
Now when we run the application we will see it in the browser like this.

And now here our View State is stored in the ViewStateFiles folder that are present in our application. Here our View State code is like the following:

/wEPGAEFCUdyaWRWaWV3MQ88KwAMAQgCAWQPBQoxNDE4NjIwMDUzD2QWAgIDD2QWAgIFDzwrABEDAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZAEQFgAWABYADBQrAAAWAmYPZBYKAgEPZBYIZg8PFgIeBFRleHQFBlJpendhbmRkAgEPDxYCHwIFBXNhaGlsZGQCAg8PFgIfAgUHVENBMTEwMmRkAgMPDxYCHwIFB01hbmFnZXJkZAICD2QWCGYPDxYCHwIFBFNhYWRkZAIBDw8WAh8CBQVzYW1hcmRkAgIPDxYCHwIFB1RDQTExMDhkZAIDDw8WAh8CBQZIZWxwZXJkZAIDD2QWCGYPDxYCHwIFBFJhdmlkZAIBDw8WAh8CBQZyYW1lc2hkZAICDw8WAh8CBQhUQ0ExMTA4OWRkAgMPDxYCHwIFC2NvYXJkaW5hdG9yZGQCBA8PFgIeB1Zpc2libGVoZGQCBQ8PFgIfA2hkZA==
Now when you right-click on the running page there is no hidden field for View State. Then another method makes a server-side View State. To see it Click here to know.

Advantages of server-side View State

The main advantage is that if a browser does not support a large encrypted file that is generated by the client-side View State then by the client-side View State we can handle it. As we know sometimes when we open an ASP web site in ASP.NET there will be some time corruption problem so it also minimizes the corruption problem. It also converts large client-side pages into a small client-side page because the View State data is stored at the server.

Disadvantages of Server-side View State

The main draw back is that the developer does not know how much space is taken by a View State on the server. If it takes a very large space there will be a problem. Another disadvantage is that server-side View State uses the server memory for the session object.

Summary

Everyone accepts that View State is a very important State Management technique for storing the data during the post-back. Here I explained how to store your View State on the client-side as well as server-side. Since sometimes the user faces the problem with the client-side View State there is another option to store it server-side. So by server-side View States we overcome all the problems that I said above. I hope this article will be useful for the reader.

Up Next

Ebook Download

View all

Diving into Knockout.JS

Read by 1.7k people

Download Now!

Learn

View all