Introduction
Web Application is stateless. To maintain the state of the page, we have many solutions like query string, session, hidden controls and more.
Hidden controls are primarily used to keep some kind of key value pairs for the page. To maintain multiple key value pairs, we need to have multiple hidden controls on the page and hidden control name will be used as key. Basically the concept behind the hidden control is sharing the values between server and client.
But sometimes single hidden control will be used for multiple values; it’s not a good way to do because of improper delimited character handling or data type conversions.
I have come up with the solution to maintain the states using a single hidden control and isolate the complication inside this component.
Background
This solution is like an enhancement of ViewState
provided by Microsoft. Though it solves the purpose to retain the server side values, it is not possible to manipulate those values in the client side as it’s designed for handling the retaining of server side object.
URL: http://msdn.microsoft.com/en-us/library/system.web.ui.control.viewstate.aspx
ViewState Sample
public partial class ViewStatePage : System.Web.UI.Page
{
[Serializable]
public class Employee
{
public string Name;
public int Age;
}
private Employee currentEmployee;
protected override void SavePageStateToPersistenceMedium(object state)
{
ViewState["CurrentEmployee"] = currentEmployee;
base.SavePageStateToPersistenceMedium(state);
}
protected override void OnLoad(EventArgs e)
{
currentEmployee = ViewState["CurrentEmployee"] as Employee;
base.OnLoad(e);
}
}
Using the Code
To solve this problem, I have created a Web Control in my one of old ASP.NET projects called as ExtentedViewState
Control. Here I have added some more advanced way to handle this problem.
Basically, this control will hold a collection object which will allow the user to add a key value pair. At the time of rendering of this web control, this will generate a single hidden control and hold the key value pairs as base 64 encoded values.
Once the page is loaded into the browser, this control uses a simple JavaScript wrapper to allow the user to manipulate the key value pairs from the client side.
When the user submits the page, this JavaScript wrapper will send these updated values as base 64 string to the server. In the server side, it will get parsed and object is built on the server side.
How to Implement
Here I have included a sample project in a more simplified way to avoid the hidden controls.
It contains 3 different files for avoiding the hidden controls, from the server side, I have created a simple object to work like ASP.NET ViewState
object – named “CustomViewState.cs”.
CustomViewState
class contains the implementation of server side key value pair accessing and manipulations. This object will be added as the property to the parent UI.Page
class.
User can access the Key value pairs using the property like the normal collections.
StateManager.js script file serves the same functionality of CustomViewState
class in Client side.
Step 1: Inherit your ASP.NET page class from FrameWorkBasePage
.
Step 2: Add your key/values using CustomViewState
property of the current UI.Page
.
Step 3: Use StateManager
object in from client side to manipulate the key value pairs.
Sample: Server Side
public partial class _Default : ApplicationFrameWork.FrameWorkBasePage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
int intvalue = 10;
decimal decvalue = 10;
DateTime dtvalue = DateTime.Now;
DateTime dvalue = DateTime.Now.Date;
bool bvalue = true;
CustomViewState.SetValue("integer", intvalue);
CustomViewState.SetValue("decvalue", decvalue);
CustomViewState.SetValue("dtvalue", dtvalue);
CustomViewState.SetValue("datevalue", dvalue);
CustomViewState.SetValue("boolean", bvalue);
CustomViewState.SetValue("strvalue", "Elayaraja");
}
}
}
Client Side
<script language=javascript>
function AddViewState() {
var key = document.getElementById('Textbox1').value;
var value = document.getElementById('Textbox2').value;
StateManager.Set(key,value, DataTypes.String);
}
function ShowViewState() {
var key = document.getElementById('Textbox3').value;
alert(StateManager.Get(key))
}
function Init()
{
StateManager.Init();
alert(StateManager.Get('strvalue'))
}
</script>
<html>
<body onload="Init()">
<label>Key</label>
<input type=text id="Textbox1" size = 10 />
<label>Value</label>
<input type=text id="Textbox2" size = 50 />
<button onclick="AddViewState()">Add</button>
<br />
<label>Key</label>
<input type=text id="Textbox3" size = 10 />
<button onclick="ShowViewState()"> Show </button>
</body>
</html>
History
- 30th August, 2010: Initial post