Post
Ask Question

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 on 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 separated. 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 the request and response size.
 
_EVENTVALIDATION
 
_EVENTVALIDATION is for validating controls. To ensure the requested 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 the 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. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4.      <body>  
    5.           <form method="post" action="Default.aspx" id="form1">  
    6.                <div class="aspNetHidden">  
    7.                     <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />  
    8.                     <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />  
    9.                     <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDIyMjM2NTY0ZGSXEZ4qwAszJ6dR3TSLdPvX3w7362I3AOBVJK+fKRnbkg==" />  
    10.                </div>  
    11.                <script type="text/javascript">  
    12.                //<![CDATA[   
    13.                var theForm = document.forms['form1']; 
    14.                if (!theForm) { 
    15.                     theForm = document.form1; 
    16.                } 
    17.  
    18.                function __doPostBack(eventTarget, eventArgument) { 
    19.                     if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
    20.                          theForm.__EVENTTARGET.value = eventTarget; 
    21.                          theForm.__EVENTARGUMENT.value = eventArgument; 
    22.                          theForm.submit(); 
    23.                     } 
    24.                } 
    25.                //]]>  
    26.                </script>  
    27.                <div class="aspNetHidden">  
    28.                     <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAK5I+PyblDBmWfKCdwXh3rh4q8s12WcMm4dben72M8A363x1W3ZmPm8tm9nmU+G2hAvlotBSLddt1LAtzvX8Omx" />  
    29.                </div>  
    30.                <div>  
    31.                     <input type="text" />  
    32.                     <input onclick="TestFunc(); __doPostBack('ctl02','')" name="btnTest" type="button" id="btnTest" value="Html Button" />  
    33.                     <input type="submit" name="AspBtnTest" value="Asp Button" onclick="TestFunc();" id="AspBtnTest" />  
    34.                </div>  
    35.                <script type="text/javascript">  
    36.                function TestFunc() {  
    37.                     alert("Hey! you clicked");  
    38.                }  
    39.                </script>  
    40.           </form>  
    41.      </body>  
    42.   
    43. </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 scripts 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>   


      Similar Articles