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: { 3:
4: if(!ClientScript.IsClientScriptBlockRegistered("RegisterClientScriptBlock")) 5: Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RegisterClientScriptBlock", "document.write('RegisterClientScriptBlock');", true); 6:
7:
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" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:
5: <html xmlns="http://www.w3.org/1999/xhtml">
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2:
3: <html xmlns="http://www.w3.org/1999/xhtml">
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>
12:
13:
14: <script type="text/javascript">
15: //<![CDATA[
16: document.write('RegisterClientScriptBlock');//]]> 17: </script>
18:
19: <div>
20: <table>
21: <tr>
22: <td>
23: Page Content
24: </td>
25: </tr>
26: </table>
27:
28:
29: </div>
30:
31:
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 !!!
