Hidden fields were a common trick of the HTML web developer’s trade for carrying information within a page when you did not want that information to be visible to the user.
An easier and more elegant way of accomplishing this task is to use one of the state mechanisms provided by the .NET Framework (see Chapter 6 for a complete discussion of state). However, sometimes this is impossible, perhaps for performance, bandwidth , or security reasons. (Performance and bandwidth are really two sides of the same coin.)
In classic HTML pages, you might use something such as the following code snippet to implement a hidden field:
<input type="hidden" value="foo">
Tip
ASP.NET uses a hidden field to implement view state. You can see this by examining the source that is rendered to the browser, via the View → Source menu command in Internet Explorer. (Other browsers have analogous commands.) You will see something similar to the following, where the value attribute encodes all the information saved in view state.
<input type="hidden" name="_ _VIEWSTATE" value="/wEPDwUJL0CHlBR...YfL+BDX7xhMw=" />
To reap the benefits of server-side processing, you can convert this into an HTML server control with the addition of id and runat attributes:
<input type="hidden" value="foo" id="myHiddenControl" runat="server">
An ASP.NET HiddenField control is best of all these options (assuming there is some compelling reason not to use ASP.NET’s state capabilities) because it adds the following features:
Programming consistency
Easy access to the
Valueproperty, which holds the value being maintained by the controlThe
ClientIDproperty, inherited fromControl, which provides the ID attribute of the control itselfAccess to the
ValueChangedevent (the default event for theHiddenFieldcontrol in VS2005)
The ValueChanged event is raised on postback when the Value property of the control is different from the previous posting. The event does not cause a postback itself, and unlike most non-postback controls, the HiddenField does not expose an AutoPostBack property to force an instantaneous postback. As with all non-postback controls (explained in the previous chapter), the event will be cached until the form is posted back by some other control, at which point it will be handled by the server.
These features will be demonstrated in Example 4-6, called HiddenFieldDemo. The content file is also listed in this example. In addition to some display HTML, including an <h2> header to tell you when the page has been posted, it contains a TextBox for entering a new value for the HiddenField control, an HTML button (used to execute a client-side function without causing a postback to the server), and an ASP.NET Button (to force a postback to the server). A Label displays the contents of the hidden field.
Example 4-6. Default.aspx in HiddenFieldDemo web site
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>HiddenField Control</title>
</head>
<script language=javascript>
function ChangeHiddenValue()
{
alert('Entering ChangeHiddenValue');
var hdnId = '<%=hdnSecretValue.ClientID%>'
var hdn = document.getElementById(hdnId);
var txt = document.getElementById('txtSecretValue');
hdn.value = txt.value;
alert('Value changed');
}
</script>
<body>
<form id="form1" runat="server">
<div>
<h1>HiddenField Control</h1>
<h2>This page was posted at <% =DateTime.Now.ToString() %>.</h2>
<asp:HiddenField ID="hdnSecretValue" runat="server"
OnValueChanged="hdnSecretValue_ValueChanged" />
Enter secret value:
<asp:TextBox ID="txtSecretValue" runat="server" />
<br />
<br />
<input type=button value="Change hidden value"
onclick="ChangeHiddenValue()" />
<asp:Button ID="btnPost" runat="server" Text="Post" />
<br />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""/>
</div>
</form>
</body>
</html>The HTML button calls a function, ChangeHiddenValue, which is contained in the JavaScript script block highlighted in the code listing. This function has two alert methods helpful in debugging; they can be omitted or commented out.
ChangeHiddenValue demonstrates two equivalent ways of getting a reference to a control on the page, both using the JavaScript getElementById method. This method returns a reference to the first object it finds on the page with the specified ID attribute.
In the first technique, a reference is obtained to the HiddenField control via the ClientID property of the HiddenField control. Since this property is derived from Control, it is available to all ASP.NET server controls. That bit of server-side code is called from within the JavaScript function by enclosing it within the <%= %> tags.
In the second technique, the ID attribute of the TextBox control is passed to the getElementById method.
The HiddenField ValueChanged event is handled by a server-side method, hdnSecretValue_ValueChanged, as indicated by the highlighted OnValueChanged attribute in Example 4-6. The event handler from the code-behind file, default.aspx.cs, is shown in Example 4-7. The remainder of the code-behind file, not shown here, is just standard boilerplate inserted by VS2005.
Example 4-7. Excerpt from default.aspx.cs for HiddenFieldDemo
protected void hdnSecretValue_ValueChanged(object sender, EventArgs e)
{
HiddenField hdn = (HiddenField)sender;
lblMessage.Text = "The new value is " + hdn.Value + ".";
}The first line in hdnSecretValue_ValueChanged obtains a reference to the control that raised the event, carried in the sender argument. It casts sender as type HiddenField. Then the Value property of the HiddenField object is used to set the Text property of lblMessage.
After you enter a secret value and press the Post button, you’ll see a web page much like Figure 4-3. The Post button does not have an event handler because we don’t need it to perform any function other than to cause a postback to the server.
Get Programming ASP.NET, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
