Gil Fink, Microsoft MVP, is an expert in Web development and Microsoft data platform. He works as a senior architect at Sela Group. He is currently consulting for various enterprises and companies, where he architects and develops Web and RIA-based solutions. He conducts lectures and workshops for developers and enterprises who want to specialize in infrastructure and Web development. He is also a co-author of several Microsoft Official Courses and training kits. You can read his publications at his blog: http://blogs.microsoft.co.il/blogs/gilf. Gil is a DZone MVB and is not an employee of DZone and has posted 151 posts at DZone. You can read more from them at their website. View Full User Profile

ASP.NET - Client Side State Management - Hidden Fields

07.14.2008
| 101947 views |
  • submit to reddit

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>

On the server side:

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.

References
Published at DZone with permission of Gil Fink, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Ajya Chang replied on Mon, 2012/02/20 - 6:30am

Hello,

 

Thanks for providing such useful information on hidden variables. I think all the basic things here are covere. Great article if once wants to know the viewstate of their page. Can you please suggest how this can afftect the web page performance in some more details. I think that will be a great extension to this article.

 

I will look forward to listen from you on this. Once again thanks a ton.

Liezel Jandayan replied on Wed, 2013/01/23 - 6:41am

 The where clause will never happen. This is for the sake of not enabling using the custom entity in other situations.-Scott Sohr

Stephanie Kaye Lopez replied on Wed, 2013/01/23 - 7:28am

 Using client-based state management techniques involves storing information between calls to the server in the final HTML page, in an HTTP request, or on the disk cache of the client computer. -The Balancing Act Lifetime

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.