side javascript into the webpage at run time. If both methods can insert client script at
runtime, then what’s the difference between the two?.
RegisterStartupScript inserts the script at the end of page (i.e. just before the form closing
tag </form>) whereas RegisterClientScriptBlock inserts script after the form opening tag
(<form>).
Summary:
- Both are methods of the class ScriptManager which used to insert script into web page and call javascript functions.
- RegisterStartupScript inserts the script at the end of page (i.e. just before the form closing tag </form>).
- We can write script to access controls from web page in RegisterStartupScript since it inserts the script at the end of page.
- RegisterClientScriptBlock inserts script after the form opening tag (<form>).
- The new script can not find controls from web page in RegisterClientScriptBlock since it inserts the script at the top of page (after the form opening tag).
Lets see the difference by a sample web page, the following example contains two buttons,a
label and the javascript function ‘SetCurrentTime’. In code behind, we register and call the
javascript function ‘SetCurrentTime’ by RegisterStartupScript and in another button click, we
register and call the javascript function ‘SetCurrentTime’ by RegisterClientScriptBlock.
Default.aspx:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<head runat="server"> <title>Call JavaScript function from c# code behind</title> <script type="text/javascript"> function SetCurrentTime(dateTime) { alert(dateTime); // Control can be found while using RegisterClientScriptBlock // since it inserts scripts after the form opening tag (<form>) document.getElementById("currentDate").value = dateTime; } </script></head><body> <form id="form1" runat="server"> <div> <asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Get DateTime 1" /> <asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Get DateTime 2" /> <input type="text" id="currentDate" /> </div> </form></body></html> |
Default.aspx.cs:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
protected void Page_Load(object sender, EventArgs e){}protected void button1_Click(object sender, EventArgs e){ ScriptManager.RegisterStartupScript( this.Page, this.GetType(), "SetCurrentTime", string.Format("<script type='text/javascript'>SetCurrentTime('{0}');</script>", DateTime.Now.ToString()), false);}protected void button2_Click(object sender, EventArgs e){ ScriptManager.RegisterClientScriptBlock( this.Page, this.GetType(), "SetCurrentTime", string.Format("<script type='text/javascript'>SetCurrentTime('{0}');</script>", DateTime.Now.ToString()), false);} |
Now, If you run the above page in browser, you will notice that javascript alert box is
displayed in both the button clicks. But only first button click find the textbox and set
datetime since it inserts the script at end of page by RegisterStartupScript. The second button
click call only alert method and it will not set any value in textbox becuase it can’t find
textbox control since it inserts the script at top of page by RegisterClientScriptBlock.