Pages

RegisterStartupScript vs RegisterClientScriptBlock in asp.net

Both of these are methods of ScriptManager class. Instance of ScriptManager class is exposed as "ClientScript" property of the page. These methods are used to dynamically insert client script into the webpage at runtime. If both can insert client script at runtime, then what's the difference between the two? Note that Page class also has these methods however they have been marked as deprecated now.


RegisterStartupScript inserts the script at the end of page i.e. just before the form closing tag (</form>) whereas RegisterClientScriptBlock inserts it after the form opening tag (<form>) and below the view state information.

Lets see what is meant by this. Create a sample web page, say Default.aspx and replace form definition with the following:
<form id="form1" runat="server">
<div>
    <label id="Label1" />
    <asp:Button ID="Button1" runat="server" Text="RegisterStartupScript" OnClick="Button1_Click" />
    <asp:Button ID="Button2" runat="server" Text="RegisterClientScriptBlock" OnClick="Button2_Click" />
</div>
</form>
Now add the following code in code behind file:
//Startup script
protected void Button1_Click(object sender, EventArgs e)
{
    var script = "alert(document.getElementById('Label1'));";
    ClientScript.RegisterStartupScript(this.GetType(), "sample", script.ToString(), true);
}

//Client script block
protected void Button2_Click(object sender, EventArgs e)
{
    var script = "alert(document.getElementById('Label1'));";
    ClientScript.RegisterClientScriptBlock(this.GetType(), "sample", script.ToString(), true);
}
Below is the source that is generated by asp.net when Button1 and Button2 are clicked, respectively. Check the locations at which respective methods have inserted specified client script in the page.
<form method="post" action="Default.aspx" id="form1">
<!--viewstate and eventvalidation hidden fields here--> 

<div>
    <label id="Label1" />
    <input type="submit" name="Button1" value="RegisterStartupScript" id="Button1" />
    <input type="submit" name="Button2" value="RegisterClientScriptBlock" id="Button2" />
</div>

<script type="text/javascript">
//<![CDATA[
alert(document.getElementById('Label1'));//]]>
</script>
</form>
<form method="post" action="Default.aspx" id="form1">
<!--viewstate hidden field-->
 
<script type="text/javascript">
//<![CDATA[
alert(document.getElementById('Label1'));//]]>
</script>

...

<div>
    <label id="Label1" />
    <input type="submit" name="Button1" value="RegisterStartupScript" id="Button1" />
    <input type="submit" name="Button2" value="RegisterClientScriptBlock" id="Button2" />
</div>
</form>
Which one should be used?

If you run the above page in browser, you will notice that javascript alert box is displayed in both the cases. In case of startup script it finds Label1 unlike client script block, where it just alerts a null value because script cannot find the label control on the page. This is because in later case, script is placed at the start of the form and form controls are yet to be rendered on the page.
  • RegisterClientScriptBlock is useful when you want to include block of script wrapped inside a function, in short, to define javascript functions which will be called by form controls on user action. RegisterStartupScript can be used for both, directly executable script or defining functions.
  • RegisterClientScriptBlock should not be used for inserting script code that references form elements, do so will cause run time errors and script won't be able to get reference to those elements. Use RegisterStartupScript instead.

--End--

10 comments:

  1. Thanks for a clean and clear explanation.

    ReplyDelete
  2. Very well explained in simple words

    ReplyDelete
  3. Very well explained fundamental concept...
    Liked it.

    ReplyDelete
  4. Good day! I could have sworn I've visited this web site before but after looking at some of the articles I realized it's new to me.
    Anyways, I'm certainly delighted I came across it and I'll be
    book-marking it and checking back regularly!

    Feel free to surf to my blog post; Kitchen Utensils

    ReplyDelete
  5. very clear explanation

    ReplyDelete
  6. Wow! Very nice. Excelent explanation.

    ReplyDelete