Click here to Skip to main content
Click here to Skip to main content

Tagged as

Avoid Hidden Controls - ASP.NET

, 30 Aug 2010
Rate this:
Please Sign up or sign in to vote.
Avoid Hidden Controls - ASP.NET

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

License

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

Share

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.
Follow on   Twitter

Comments and Discussions

 
GeneralI think there are security implications Pinmemberseaplanner6-Sep-10 23:47 
GeneralMy vote of 5 Pinmemberkarthikeyan ganesan31-Aug-10 1:11 
GeneralMy vote of 2 PinmemberEmilio Garavaglia25-Aug-10 19:39 
GeneralFormating PinmvpMark Nischalke25-Aug-10 15:09 
GeneralRe: Formating Pinmembersambasivam elayaraja26-Aug-10 19:09 
GeneralThis is not correct PinmemberRitesh Ramesh25-Aug-10 2:51 
GeneralRe: This is not correct Pinmembersambasivam elayaraja25-Aug-10 2:56 
GeneralRe: This is not correct Pinmembersambasivam elayaraja25-Aug-10 3:17 
GeneralRe: This is not correct PinmemberRitesh Ramesh25-Aug-10 3:43 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 30 Aug 2010
Article Copyright 2010 by Elayaraja Sambasivam
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid