March 27, 2014

Both RegisterStartupScript and RegisterClientScriptBlock are different ways to add javascript to an aspx pages. RegisterStartupScript renders the javascript at the bottom of the html source just before the form tag closes meaning that controls and html elements defined within the page can called up by the javascript. For example, if I have a span or div element within the page, I can change the color or any other style properties using RegisterStartupScript and the new style will appear straight way.

 

While using RegisterStartupScript, we need to check if the script is already registered or not. This will avoid the attempt to re-enter the same script.

On the other hand, RegisterClientScriptBlock renders the javascript at the top of the page right after the ViewState hidden element. So, RegisterClientScriptBlock cannot be used to register a script that will run when the page is loaded. Well, it can be but it cannot reference any of the html elements within the page. Therefore, it's good to define javascript functions using this option. For example, I can have a button and change the text of the span element on click event.

Also, note that if the same function (same name but different implementation) is added within the aspx page itself (that is, not from code behind), then the browser will decide which script to run depending on the position of the script.

Here is an example of how I have used RegisterStartupScript and RegisterClientScriptBlock.

aspx page
  1. <body>
  2.     <form id="form1" runat="server">
  3.     <div>
  4.     <input type="button" onclick="ClickMe()" />
  5.         <span id="s1">some text to appear here</span>
  6.     </div>
  7.     </form>
  8.     <script>
  9.         //function ClickMe() { document.getElementById('Message').value = 'Text from home script.' }
  10.     </script>
  11. </body>

 

Code behind to Add Script
  1. private void AddScript()
  2. {
  3.     string csInitial = "InitialScript";
  4.     string csClient = "ClientScript";
  5.     Type type = this.GetType();
  6.  
  7.     if (!ClientScript.IsStartupScriptRegistered(type, csInitial))
  8.     {
  9.         string script = "document.getElementById('s1').style.backgroundColor = 'yellow'";
  10.         Page.ClientScript.RegisterStartupScript(type, csInitial, script, true);
  11.     }
  12.  
  13.     if (!ClientScript.IsClientScriptBlockRegistered(type, csClient))
  14.     {
  15.         string script = "function ClickMe() {document.getElementById('s1').innerHTML='button clicked';}";
  16.         Page.ClientScript.RegisterClientScriptBlock(type, csClient, script, true);
  17.     }
  18. }

 

HTML source
  1. <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head><title>
  5.  
  6. </title></head>
  7. <body>
  8.     <form method="post" action="WebForm1.aspx" id="form2">
  9. <div class="aspNetHidden">
  10. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZPyjLqGtHHemC6gjie9ckaYxHMrzLakeFn7lFVZQ+DFb" />
  11. </div>
  12.  
  13.  
  14. <script type="text/javascript">
  15.     //<![CDATA[
  16.     function ClickMe() { document.getElementById('s1').innerHTML = 'button clicked'; }//]]>
  17. </script>
  18.  
  19.     <div>
  20.     <input type="button" onclick="ClickMe()" />
  21.         <span id="Span1">some text to appear here</span>
  22.     </div>
  23.     
  24.  
  25. <script type="text/javascript">
  26.     //<![CDATA[
  27.     document.getElementById('s1').style.backgroundColor = 'yellow'//]]>
  28. </script>
  29. </form>
  30.     <script>
  31.         //function ClickMe() { document.getElementById('Message').value = 'Text from home script.' }
  32.     </script>
  33. </body>
  34. </html>

0 comments:

Reference: Shahed Kazi at AspNetify.com