ASP.NET Client Side State Management – Hidden Fields

May 12, 2008

5 comments

ASP.NET Client Side State Management – Hidden Fields

In the previous posts in this series I introduced the client side state
management
and one of its techniques – the ViewState.
Today I’m going to drill down into the hidden fields technique.
As mentioned in the previous post, the ViewState stores its state in a hidden field

What are Hidden Fields?
Hidden fields
technique is widely used in ASP.NET programing.
Hidden fields are html input control with hidden type that store hidden data in
the html. An example for a hidden field can look like this:

  <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

In the example above, I chose to show the event target hidden
field
in order to indicate that even in postback mechanism hidden fields are
being used. The data stored in a hidden field is available when the form is
processed on the server or when we use javascript.

Hidden Fields Values
Hidden fields store only one value in their value property. 
The value is saved as a string and therefore in order to use it for other types
you need to perform casting. Hidden fields’ data is submitted to the server
only in HTTP post operation. You can see the stored data easily by using the
View Source operation of the browser. You can see it by clicking the right
mouse button and then choosing View Source from the menu (if the operation
is available). Be aware not to use hidden fields to store confidential data!
The values has page context and therefore when you leave a page the data
stored in the hidden fields is disposed.

Server Control Hidden Fields
There are two types of server control hidden fields
System.Web.UI.WebControls.HiddenField and
System.Web.UI.HtmlControls.HtmlInputHidden.
Both types has the same primary Value property to hold the value of the
hidden field. You should choose between these types whenever you need
to use a server side hidden field (A note – The difference between
HtmlControls and WebControls isn’t in the context of this post).
When you don’t use server controls you can use the Request.Form
NameValueCollection to get the hidden field value by providing the client
id of the hidden field. For example the code bellow will return the string
value of the __EVENTTARGET hidden field:

   string eventTarget = Request.Form["__EVENTTARGET"];

Hidden Fields Example
I got some requests for an example of how to use the hidden fields
inside web forms. The example is very easy to understand.
I have an html input with type hidden. In the first request I fill the
input with a message value with javascript function. I use a button control
to do a post back to the server and in the post back the value of the hidden
field is inserted into a label control. Pay attention that because I use an html
hidden field that isn’t a server control after a second post back it’s value
will be empty. The only reason that the label will still show a message is because 
the label’s default value of the EnableViewState is true.
The web page’s code:

  <%@ Page="" Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" 
   Inherits="AJAXEnabledWebApplication1._Default" EnableSessionState="False" %>

 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

   <head runat="server">

      <title>Untitled Page</title>

      <script type="text/javascript">

        function PutHtmlHiddenFieldValue(message)

        {

          var hidden = document.getElementById(‘HTMLHiddenField’);

          if (hidden != null)

          {

            hidden.value = message;

          }

        }

      </script>

   </head>

   <body dir="ltr">

      <form id="form1" runat="server">

        <div>

         <div>

            <asp:Label ID="lblHTMLHiddenField" runat="server"></asp:Label>

            <input id="HTMLHiddenField" type="hidden" 
             
name="HTMLHiddenField"/>

         </div>

         <div>

            <asp:Button ID="btnForPostBack" runat="server"
             
Text="Do Postback" />

         </div>

        </div>

      </form>

   </body>

  </html>

The code behind:

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

   {

        #region Consts

 

        private const string SCRIPT_KEY = "HtmlHiddenFieldScript";

 

        #endregion

 

        #region Page Events

 

        protected void Page_Load(object sender, EventArgs e)

        {

            // Insert message to the label of the html control hidden

            // field if there is a value in the html hidden field

            string message = Request.Form["HTMLHiddenField"];

            if (!string.IsNullOrEmpty(message))

            {

               lblHTMLHiddenField.Text = message;

            }

        }

 

        protected void Page_PreRender(object sender, EventArgs e)

        {

            // Register a startup script in order to fill the html
            // hidden field with a
message value

            if (!ClientScript.IsClientScriptBlockRegistered("HtmlHiddenFieldScript") &&

                !IsPostBack)

            {

               ClientScript.RegisterStartupScript(typeof(Page),

                    SCRIPT_KEY,
                    "PutHtmlHiddenFieldValue(‘Html hidden hello world’);",
                    true);

            }

        }

 

        #endregion

   }

Summary
To sum up the post, today I drilled down into the hidden fields technique.
This technique is very popular and is used widely in ASP.NET.
In the next post I’ll continue the tour in the client side state management
techniques.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

5 comments

  1. Gaurav VarshneyMay 28, 2008 ב 14:18

    Not clarified , Please provide some specific example.

    Reply
  2. Gaurav VarshneyMay 28, 2008 ב 14:19

    Please provide any specific example , with executable screen.

    Reply
  3. Gil FinkJune 3, 2008 ב 22:48

    Hi Gaurav Varshney,
    Please be more specific. From what you wrote I don’t understand in what area of hidden fields you need an example.

    Reply
  4. ginikJuly 10, 2008 ב 8:02

    Hi,
    please explain with examples…

    Reply
  5. Gil FinkJuly 10, 2008 ב 21:12

    Hi ginik and Gaurav,
    I added an example section.
    Hope that it will help to clarify how to use hidden fields.

    Reply