ASP .Net

As we all know hidden fields are used to store a temporary value that will be needed on the page at a later stage which is available only on the code behind. Even asp.net uses hidden field to store View State. It is a common practice among programmers to include one or more hidden fields on the page as and pass values to and fro on the page.

Problem with Hidden Field

While rendering hidden filed, asp.net changes the ID attribute of the control and it comes up with something similar to “ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1″.

Since the server control HiddenField does not support a CssClass attribute, we can not assign a class to the control. While developing asp.net they might have though why wold someone want set and style to a control that is not visible on the page. Valid question; but we will end up with a problem while accessing the value from such a hidden field using jQuery. Here is a nice solution for that problem, which generates a friendly ID for the hidden control.

Problem with multiple Hidden Fields

We add a new hidden field as and when needed on the page. But what if there is a situation where in you will need to store mare than 5-6 temporary values on the page? Poor man’s solution would be to use a delimiter based string, split and use the string as and when needed. But the solution that I am proposing is much better and simpler and extensible.

Beyond Hidden Fields and welcome JSON

The solution uses a JSON object to store the temporary values.  All you do is define an anonymous class with appropriate properties and values, pass it on to an extension method of Page class. The page extension method returns a script block with the json object; call a register script method on the page and you are done. Here is the code:

public static void RegisterPageScript(this Page currentPage, object data, string variableName)
        {
            var configString = JsonConvert.SerializeObject(data);
            if (!string.IsNullOrEmpty(configString))
            {
                var pageScriptTag = string.Format("< script type="text/javascript"> var {0} =  {1} ", variableName, configString);
                currentPage.ClientScript.RegisterClientScriptBlock(Type.GetType("System.String"), "pageSettings", pageScriptTag.ToString());
            }
        }

How to use this method? Here is the code:

var pageSettingsObject = new { Prop1 = "some text", Prop2 = 1 };
this.Page.RegisterPageScript(pageSettingsObject, "PageSettings");

Run the page and take a look at the rendered page source. You will notice that PageSettings is a javascript variable which can be directly accessed using javascript and more over it is a javascript object and hence a set of such values are stored in an object. You can easily access the values needed. For example, open up FireBug, go to console, and try something like this

alert(PageSettings.Prop1);

The value is available for javascript/jQuery…

What if you would like to send some more temporary values to server side code and want to change couple of values in the PageSettings object? Very much possible, as JSON object is a dynamic object, you can add a new property as and when needed. Just say

PageSettings.Prop3 = "blah blah...!"

Now the JSON object stores that too. You can again verify the same on firebug console. If you would like to send the whole JSON object to server side, convert the JSON object in to string, set it to a hidden field (a server control) . Here is the code:

$('#SomeHiddenField').val(JSON.stringify(PageSettings));

This new approach allows you to structure your code better and is easy to maintain rather than adding a bunch of silly looking hidden fields and accessing them.

Be Sociable, Share!

• 

Related posts: