Generating Client-Side Script for Postback

2008-04-30

(from: http://msdn2.microsoft.com/en-us/library/aa720099(VS.71).aspx)

Only two HTML form elements (button and image button) cause form postback. If your custom control renders an HTML element that does not cause postback (such as a text box or a link button) and you want the control to initiate postback, you can program this in ASP.NET through an event architecture that relies on client-side script (JScript, JavaScript).

Control developers need to make a few small changes to their controls to enable this postback mechanism. The following code fragment shows (in bold) the code that must be added to the Render method of a control to initiate postback.

[C#] 
protected override void Render(HtmlTextWriter output) {
                  output.Write("<a  id=\"" + this.UniqueID + "\" href=\"javascript:" + Page.GetPostBackEventReference(this) +"\">");
                  output.Write(" " + this.UniqueID + "</a>");
            }
[Visual Basic]
Protected Overrides Sub Render(output As HtmlTextWriter)
   output.Write("<a  id=""" & Me.UniqueID & _
         """ href=""javascript:" & _
         Page.GetPostBackEventReference(Me) & """>")
   output.Write(" " & Me.UniqueID & "</a>")
End Sub

The GetPostBackEventReference method emits client-side script that initiates postback and also provides a reference to the control that initiated the postback event.

To understand what the GetPostBackEventReference method does, compile the code in the next section, Postback Using Client-Side Script Sample, and request the accompanying .aspx page in your browser. If you view the source for the rendered page using your browser's View Source command, you will see the following HTML and script. (The actual values of the name and the ID attributes of the form will differ, and so will the value attribute of the hidden variable.)

<html>
<body>
<form name="ctrl2" method="POST" action="MyLinkButton.aspx" id="ctrl2">
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" value="dDwtMjI1NTgwNDE2Ozs+eIZ+AfRvoCj1nWimbh+zPv/rKNg=" />                  
Here is the custom link button.<br>
<a  id ="Link" href="javascript:__doPostBack('Link','')"> Link</a> 
<br><br>
<input name="TextBox" type="text" value="Click the link" id="TextBox" style="background-color:Cyan;width:200px;" /> 
<br>                                                
<script language="javascript">
<!--
      function __doPostBack(eventTarget, eventArgument) {
            var theform = document.ctrl2
            theform.__EVENTTARGET.value = eventTarget
            theform.__EVENTARGUMENT.value = eventArgument
            theform.submit()
      }
// -->
</script>
</form>                  
</body>                        
</html>

The elements in bold in this example — two hidden fields and the client-side script method — are added by the ASP.NET page framework. The hidden form fields indicate which server control to post to and optionally specify an argument to pass. The client-side script method is used to set the hidden fields and causes the form to be submitted to the server. For a complete sample, see Postback Using Client-Side Script Sample.

See Also

Postback Using Client-Side Script Sample

Categories

Links
Share