Click here to Skip to main content
12,956,777 members (61,750 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


9 bookmarked
Posted 30 Aug 2010

Avoid Hidden Controls - ASP.NET

, 30 Aug 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Avoid 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 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;

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>


  • 30th August, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Elayaraja Sambasivam
Architect iSOFT R&D Pvt Ltd
India India
Currently working as Technical Architect at iSOFT R&D Pvt Ltd,Chennai.

You may also be interested in...

Comments and Discussions

GeneralI think there are security implications Pin
seaplanner6-Sep-10 23:47
memberseaplanner6-Sep-10 23:47 
GeneralMy vote of 5 Pin
karthikeyan ganesan31-Aug-10 1:11
memberkarthikeyan ganesan31-Aug-10 1:11 
GeneralMy vote of 2 Pin
Emilio Garavaglia25-Aug-10 19:39
memberEmilio Garavaglia25-Aug-10 19:39 
GeneralFormating Pin
Mark Nischalke25-Aug-10 15:09
mvpMark Nischalke25-Aug-10 15:09 
GeneralRe: Formating Pin
sambasivam elayaraja26-Aug-10 19:09
membersambasivam elayaraja26-Aug-10 19:09 
GeneralThis is not correct Pin
Ritesh Ramesh25-Aug-10 2:51
memberRitesh Ramesh25-Aug-10 2:51 
GeneralRe: This is not correct Pin
sambasivam elayaraja25-Aug-10 2:56
membersambasivam elayaraja25-Aug-10 2:56 
GeneralRe: This is not correct Pin
sambasivam elayaraja25-Aug-10 3:17
membersambasivam elayaraja25-Aug-10 3:17 
GeneralRe: This is not correct Pin
Ritesh Ramesh25-Aug-10 3:43
memberRitesh Ramesh25-Aug-10 3:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 30 Aug 2010
Article Copyright 2010 by Elayaraja Sambasivam
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid