Wednesday, August 25, 2010

Avoiding Hidden Controls – ASP.NET


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.


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.

ViewState Sample :

public partial class ViewStatePage : System.Web.UI.Page

public class Employee
public string Name;
public int Age;

private Employee currentEmployee;

protected override void SavePageStateToPersistenceMedium(object state)
ViewState["CurrentEmployee"] = currentEmployee;

protected override void OnLoad(EventArgs e)
currentEmployee = ViewState["CurrentEmployee"] as Employee;

Using the code

To solve this problem, I have created a Web Control in my one of old ASP.NET project 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 holds 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 as like the normal collections.

StateManager.js script file serve the same functionality of CustomViewState Class in Client side.

Step 1: Inherit your 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 manupulate 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;

function Init()

<body onload="Init()">

<input type=text id="Textbox1" size = 10 />
<input type=text id="Textbox2" size = 50 />

<button onclick="AddViewState()">Add</button>
<br />
<input type=text id="Textbox3" size = 10 />
<button onclick="ShowViewState()"> Show </button>

Download - 33.59 KB

No comments:

Post a Comment