.NET

Various Types of Hidden Fields in .NET

We'll discuss the following:

  • _VIEWSTATE
  • _EVENTVALIDATION
  • _EVENTTARGET
  • _EVENTARGUMENT &
  • The PostBack mechanism

HTTP is a stateless protocol. To make ASP.Net applications stateful, .NET uses sessions, cookies and several hidden fields.

_VIEWSTATE

Let's create a demo app to understand ViewState.

Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackDemo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     </form>  
  12. </body>  
  13. </html>  
Page Source
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head><title></title></head>  
  5. <body>  
  6.     <form method="post" action="Default.aspx" id="form1">  
  7. <div class="aspNetHidden">  
  8. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZH0OltWWPaXud4euu7mw8G7bgQ/b9JRsQeJQCRIcL9GA" />  
  9. </div>      
  10.     </form>  
  11. </body>  
  12. </html>  
For an empty form with runat= “server” (an aspx page with a <form runat= “server”> element only) a hidden field “_VIEWSTATE” is also generated. In other words if any of your elements is to be used server side then the ASP.NET run time will create a “_VIEWSTATE” hidden field.

The _VIEWSTATE holds the state of the page when it was last processed on the server to map it unambiguously with a page request. Whenever a PostBack occurs the page class takes data stored in the view state, processes the data, regenerates the page with new values and sends it back to the client.

Since ViewState is stored in a hidden field in the client side, it can be tampered with. To avoid this tampering of ViewState, by default View state is encoded using the Base64 schema and hashed. The hashed content is also stored in _VIEWSTATE. The hash value is calculated with the _VIEWSTATE content and server key. Now, when the page posts back, the content and hash value in _VIEWSTATE is separeted. The hash value is recalculated using the _VIEWSTATE content and server key. If both hash keys match, it goes for further processing else throws a Security exception like “The state information is invalid for this page and might be corrupted”.

The ViewState is included in the form element and goes with each HTTP request and response. So, it inevitably increases request and response size.

_EVENTVALIDATION

_EVENTVALIDATION is for validating controls. To ensure the request data is from a known element, not a maliciously added element.

Now, let's add some client-side controls (HTML elements without runat= “server”) to our demo aspx page.

Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackDemo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <input type="text" />  
  13.             <input type="button" onclick="TestFunc();" />  
  14.         </div>  
  15.         <script type="text/javascript">  
  16.             function TestFunc() {  
  17.                 alert("Hey! you clicked");  
  18.             }  
  19.         </script>  
  20.     </form>  
  21. </body>  
  22. </html>  
Page Source
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head><title></title></head>  
  5. <body>  
  6.     <form method="post" action="Default.aspx" id="form1">  
  7. <div class="aspNetHidden">  
  8. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZH0OltWWPaXud4euu7mw8G7bgQ/b9JRsQeJQCRIcL9GA" />  
  9. </div>  
  10.         <div>  
  11.             <input type="text" />  
  12.             <input type="button" onclick="TestFunc();" />  
  13.               
  14.         </div>  
  15.         <script type="text/javascript">  
  16.             function TestFunc() {  
  17.                 alert("Hey! you clicked");  
  18.             }  
  19.         </script>  
  20.     </form>  
  21. </body>  
  22. </html  
I added a text box and a button, but there is not much change in page source except the changes we did in the aspx page.

Now, let's make this button a server-side button (in other words Add runat= “server”).

Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackDemo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <input type="text" />  
  13.             <input type="button" onclick="TestFunc();" runat="server" />  
  14.         </div>  
  15.         <script type="text/javascript">  
  16.             function TestFunc() {  
  17.                 alert("Hey! you clicked");  
  18.             }  
  19.         </script>  
  20.     </form>  
  21. </body>  
  22. </html>  
Page Source

 

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head><title></title></head>  
  5. <body>  
  6.     <form method="post" action="Default.aspx" id="form1">  
  7. <div class="aspNetHidden">  
  8. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDIyMjM2NTY0ZGSXEZ4qwAszJ6dR3TSLdPvX3w7362I3AOBVJK+fKRnbkg==" />  
  9. </div>  
  10.   
  11.     <div class="aspNetHidden">  
  12.         <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAK5I+PyblDBmWfKCdwXh3rh4q8s12WcMm4dben72M8A363x1W3ZmPm8tm9nmU+G2hAvlotBSLddt1LAtzvX8Omx" />  
  13. </div>  
  14.         <div>  
  15.             <input type="text" />  
  16.             <input name="ctl02" type="button" onclick="TestFunc();" />  
  17.               
  18.         </div>  
  19.         <script type="text/javascript">  
  20.             function TestFunc() {  
  21.                 alert("Hey! you clicked");  
  22.             }  
  23.         </script>  
  24.     </form>  
  25. </body>  
  26. </html>  
So, now another hidden field “_EVENTVALIDATION” was added. In other words “_EVENTVALIDATION” is being added for server-side input controls.

_EVENTVALIDATION is used to ensure the postbacks and callbacks are coming from expected User Interface elements. Content is stored in _EVENTVALIDATION just before rendering the page. This feature can be enabled or disabled at the page level using EnableEventValidation in the Page directive tag.

Basically, the Page matches content of the request with content stored in _EVENTVALIDATION to confirm that data is coming from a UI element known to the server, not from any maliciously added element.

_doPostBack, _EVENTTARGET, _EVENTARGUMENT

Now, let's add a server-side event handler to this button and a server-side button as well.

Default.aspx 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackDemo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <input type="text" />  
  13.             <input type="button" onclick="TestFunc();" runat="server" id="btnTest" OnServerClick="Button_Click" value="Html Button"/>  
  14. <asp:Button runat="server" ID="AspBtnTest" OnClick="AspButton_Click" OnClientClick="TestFunc();" Text="Asp Button"/>  
  15.         </div>  
  16.         <script type="text/javascript">  
  17.             function TestFunc() {  
  18.                 alert("Hey! you clicked");  
  19.             }  
  20.         </script>  
  21.     </form>  
  22. </body>  
  23. </html>  
Default.aspx.cs
  1. using System;  
  2. namespace PostBackDemo  
  3. {  
  4.     public partial class Default : System.Web.UI.Page  
  5.     {  
  6.         protected void Page_Load(object sender, EventArgs e)  
  7.         { }  
  8.   
  9.         protected void Button_Click(object sender, EventArgs e)  
  10.         {  
  11.             Page.ClientScript.RegisterClientScriptBlock(GetType(),  
  12.             Guid.NewGuid().ToString("N"), "alert('Did a postback')", true);  
  13.         }  
  14.         protected void AspButton_Click(object sender, EventArgs e)  
  15.         {  
  16.             Page.ClientScript.RegisterClientScriptBlock(GetType(),  
  17.             Guid.NewGuid().ToString("N"), "alert('Asp button did a postback')", true);  
  18.         }  
  19.     }  
  20. }  
Page Source
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head><title></title></head>  
  5. <body>  
  6.     <form method="post" action="Default.aspx" id="form1">  
  7. <div class="aspNetHidden">  
  8. <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />  
  9. <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />  
  10. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDIyMjM2NTY0ZGSXEZ4qwAszJ6dR3TSLdPvX3w7362I3AOBVJK+fKRnbkg==" />  
  11. </div>  
  12.   
  13. <script type="text/javascript">  
  14. //<![CDATA[  
  15. var theForm = document.forms['form1'];  
  16. if (!theForm) {  
  17.     theForm = document.form1;  
  18. }  
  19. function __doPostBack(eventTarget, eventArgument) {  
  20.     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {  
  21.         theForm.__EVENTTARGET.value = eventTarget;  
  22.         theForm.__EVENTARGUMENT.value = eventArgument;  
  23.         theForm.submit();  
  24.     }  
  25. }  
  26. //]]>  
  27. </script>  
  28.   
  29.   
  30. <div class="aspNetHidden">  
  31.   
  32.         <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAK5I+PyblDBmWfKCdwXh3rh4q8s12WcMm4dben72M8A363x1W3ZmPm8tm9nmU+G2hAvlotBSLddt1LAtzvX8Omx" />  
  33. </div>  
  34.         <div>  
  35.             <input type="text" />  
  36.             <input onclick="TestFunc(); __doPostBack('ctl02','')" name="btnTest" type="button" id="btnTest" value="Html Button" />  
  37.           <input type="submit" name="AspBtnTest" value="Asp Button" onclick="TestFunc();" id="AspBtnTest" />   
  38.         </div>  
  39.         <script type="text/javascript">  
  40.             function TestFunc() {  
  41.                 alert("Hey! you clicked");  
  42.             }  
  43.         </script>  
  44.     </form>  
  45. </body>  
  46. </html>  
2 new hidden fields “_EVENTTARGET and _EVENTARGUMENT” were created and some script having “_doPostBack()” was added. So when you have controls that can cause postback, these hidden fields and script are created.

Here, you can see the HTML button is not doing a direct post-back. It calls _doPostBack(eventTarget, eventArgument) and this method calls the server-side event handler or causes a post-back.

The hidden field “_EVENTTARGET” holds the ID of the control causing the postback and “_EVENTARGUMENT” contains additional information associated with the control.

Note: Controllers of type IpostBackEventHandler (implementing IpostBackEventHandler) cause a direct post-back. Other controls use a _doPostback() JavaScript function to call the server-side event handler.

There are only 2 Web server controls, Button and ImageButton, that cause a direct post-back. Others trigger a post-back using the _doPostBack() JavaScript function.

So, for controls using _doPostBack(), you can get the control that causes a postBack as follows:
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.    string ControlId = Request.Params.Get("_EVENTTARGET");  
  4.    if (!string.IsNullOrEmpty(ControlId))  
  5.    {  
  6.       Page.ClientScript.RegisterStartupScript(GetType(),  
  7.       Guid.NewGuid().ToString("N"),  
  8.       "alert('Control with ID:" + ControlId + " caused postback')", true);  
  9.    }  
  10. }  
But, for Buttons and ImageButtons you need to call the _doPostBack() with button Id explicitly OnClientClick(). Then, follow the same procedure to get the element causing the PostBack().

From the code above remove the <input type= “button”> element and keep the <asp:Button>, you can see there is no _EVENTTARGET and _EVENTARGUMENT hidden field or _doPostBack() JavaScript function since asp:Button is doing a direct postback.

Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackDemo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <input type="text" />  
  13. <asp:Button runat="server" ID="AspBtnTest" OnClick="AspButton_Click" OnClientClick="TestFunc();" Text="Asp Button"/>  
  14.         </div>  
  15.         <script type="text/javascript">  
  16.             function TestFunc() {  
  17.                 alert("Hey! you clicked");  
  18.             }  
  19.         </script>  
  20.     </form>  
  21. </body>  
  22. </html>  
Default.aspx.cs
  1. using System;  
  2. namespace PostBackDemo  
  3. {  
  4.     public partial class Default : System.Web.UI.Page  
  5.     {  
  6.         protected void Page_Load(object sender, EventArgs e)  
  7.         { }  
  8.         protected void AspButton_Click(object sender, EventArgs e)  
  9.         {  
  10.             Page.ClientScript.RegisterClientScriptBlock(GetType(),  
  11.             Guid.NewGuid().ToString("N"), "alert('Asp button did a postback')", true);  
  12.         }  
  13.     }  
  14. }  
Page Source
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head><title></title>  
  5.     <script src="Script/jquery-1.11.1.js"></script>  
  6. </head>  
  7. <body>  
  8.     <form method="post" action="Default.aspx" id="form1">  
  9. <div class="aspNetHidden">  
  10. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRkB/iWAnhisFL/BNe0slZ319eTcGFZayj3aW2rKeptEAk=" />  
  11. </div>  
  12.   
  13. <div class="aspNetHidden">  
  14.   
  15.         <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAKrZZDeDrjNeyuPPqXKcefNI5oLptWPTPFd2fcP0LUic9/ED7QKOeuxn48nwM/QT7XNadP1I+7bSAmOnoTtiPYK" />  
  16. </div>  
  17.         <div>  
  18.             <input type="text" />  
  19.               
  20.             <input type="submit" name="AspBtnTest" value="Asp Button" onclick="PostBack();" id="AspBtnTest" />  
  21.         </div>  
  22.         <script type="text/javascript">  
  23.             function TestFunc() {  
  24.                 alert("Hey! you clicked");  
  25.             }  
  26.         </script>  
  27.     </form>  
  28. </body>  
  29. </html>   

Up Next
    Ebook Download
    View all
    testing
    Read by 48 people
    Download Now!
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs