Friday, July 18, 2008

RegisterStartupScript and RegisterClientScriptBlock

         There two powerful methods available in dotnet two include JavaScript on page from code behind. Normally we write the JavaScript functions on aspx page however in some case we have to dynamic script which we can not write on aspx page for many reasons like the script require some data which we have to fetch from database or require some operations that can only be done from code behind. In this case we can use RegisterStartupScript or RegisterClientScriptBlock function to include the JavaScript from code behind.

         Both function does the same thing, just emits your JavaScript to the page, however the difference lies in position where they emits the scripts on page. RegisterStartupScript emits your JavaScript at the end of the page just before </form> tag (before the <form> tag ends). While RegisterClientScriptBlock emits the JavaScript just after the <form> tag starts. Look at the code shown below,

   1: protected void Page_Load(object sender, EventArgs e)
   2: {
   4:     if(!ClientScript.IsClientScriptBlockRegistered("RegisterClientScriptBlock"))
   5:         Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RegisterClientScriptBlock", "document.write('RegisterClientScriptBlock');", true);
   8:     if (!ClientScript.IsStartupScriptRegistered("StartupScriptRegistered"))
   9:         ClientScript.RegisterStartupScript(this.GetType(), "StartupScriptRegistered", "document.write('StartupScriptRegistered');", true);
  10: }

Fig - (1) Code behind file Default.aspx.cs

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UseIComprer.aspx.cs" Inherits="IseIComprer" %>
   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
   5: <html xmlns="">
   6: <head runat="server">
   7:     <title>Untitled Page</title>
   8: </head>
   9: <body>
  10:     <form id="form1" runat="server">
  11:     <div>
  12:         <table>
  13:             <tr>
  14:                 <td>
  15:                     Page Content
  16:                 </td>
  17:             </tr>
  18:         </table>
  19:     </div>
  20:     </form>
  21: </body>
  22: </html>

Fig - (2) Default.aspx page

    Now when you run this page the output will be,

   1: RegisterClientScriptBlock 
   2: Page Content 
   3: StartupScriptRegistered 

Fig - (3) Output of the Default.aspx page

      You can see that the script we have register using RegisterStartupScriptBlock renders first and the statement document.write writes "RegisterClientScriptBlock" to the page then we have the Page Content and finally the "StartupScriptRegistered".  If you see the view source,

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
   3: <html xmlns="">
   4: <head><title>
   5:     Untitled Page
   6: </title></head>
   7: <body>
   8:     <form name="form1" method="post" action="UseIComprer.aspx" id="form2">
   9: <div>
  10: <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGT4JJog3qP93QeYemlckRLadGZVuw==" />
  11: </div>
  14: <script type="text/javascript">
  15: //<![CDATA[
  16: document.write('RegisterClientScriptBlock');//]]>
  17: </script>
  19:     <div>
  20:         <table>
  21:             <tr>
  22:                 <td>
  23:                     Page Content
  24:                 </td>
  25:             </tr>
  26:         </table>
  29:     </div>
  32: <script type="text/javascript">
  33: //<![CDATA[
  34: document.write('StartupScriptRegistered');//]]>
  35: </script>
  36: </form>
  37: </body>
  38: </html>

Fig - (4) View Source for Default.aspx

      As you can see at lines 14 to 17 we have the script registered using "RegisterStartupScript" and at lines 32 to 35 we have the script registered using "RegisterStartupScript".

      Now you can easily identify when you have to use RegisterStartupScript and when to use RegisterClientScriptBlock. If you want to assign any value or property  or want to get the value or property from any element you should use RegisterStartupScript. If you use RegisterClientScriptBlock you will get error object undefined as the particular object is not being rendered yet. 

Happy Programming !!!

No comments: