Difference Between Registerstartupscript and Registerclientscriptblock

Difference between RegisterStartupScript and RegisterClientScriptBlock?

Here's an old discussion thread where I listed the main differences and the conditions in which you should use each of these methods. I think you may find it useful to go through the discussion.

To explain the differences as relevant to your posted example:

a. When you use RegisterStartupScript, it will render your script after all the elements in the page (right before the form's end tag). This enables the script to call or reference page elements without the possibility of it not finding them in the Page's DOM.

Here is the rendered source of the page when you invoke the RegisterStartupScript method:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title></title></head>
<body>
<form name="form1" method="post" action="StartupScript.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="someViewstategibberish" />
</div>
<div> <span id="lblDisplayDate">Label</span>
<br />
<input type="submit" name="btnPostback" value="Register Startup Script" id="btnPostback" />
<br />
<input type="submit" name="btnPostBack2" value="Register" id="btnPostBack2" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="someViewstategibberish" />
</div>
<!-- Note this part -->
<script language='javascript'>
var lbl = document.getElementById('lblDisplayDate');
lbl.style.color = 'red';
</script>
</form>
<!-- Note this part -->
</body>
</html>

b. When you use RegisterClientScriptBlock, the script is rendered right after the Viewstate tag, but before any of the page elements. Since this is a direct script (not a function that can be called, it will immediately be executed by the browser. But the browser does not find the label in the Page's DOM at this stage and hence you should receive an "Object not found" error.

Here is the rendered source of the page when you invoke the RegisterClientScriptBlock method:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title></title></head>
<body>
<form name="form1" method="post" action="StartupScript.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="someViewstategibberish" />
</div>
<script language='javascript'>
var lbl = document.getElementById('lblDisplayDate');
// Error is thrown in the next line because lbl is null.
lbl.style.color = 'green';

Therefore, to summarize, you should call the latter method if you intend to render a function definition. You can then render the call to that function using the former method (or add a client side attribute).

Edit after comments:


For instance, the following function would work:

protected void btnPostBack2_Click(object sender, EventArgs e) 
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language='javascript'>function ChangeColor() {");
sb.Append("var lbl = document.getElementById('lblDisplayDate');");
sb.Append("lbl.style.color='green';");
sb.Append("}</script>");

//Render the function definition.
if (!ClientScript.IsClientScriptBlockRegistered("JSScriptBlock"))
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "JSScriptBlock", sb.ToString());
}

//Render the function invocation.
string funcCall = "<script language='javascript'>ChangeColor();</script>";

if (!ClientScript.IsStartupScriptRegistered("JSScript"))
{
ClientScript.RegisterStartupScript(this.GetType(), "JSScript", funcCall);
}
}

When to use RegisterStartupScript and when RegisterClientScriptBlock?

Simple answer: don't use RegisterClientScriptBlock as it's been deprecated.

Ref. MSDN: http://msdn.microsoft.com/en-us/library/system.web.ui.page.registerclientscriptblock(v=vs.110).aspx

As you're probably aware, RegisterClientScriptBlock will be inserted right after the opening tag on your page. Whereas, RegisterStartupScript will be inserted right before the closing tag.

In most cases RegisterClientScriptBlock will work just fine, but if your script relies on any elements on your page you will need to use RegisterStartupScript instead so that the elements exist and can be referenced.

Which is faster RegisterStartupScript or RegisterClientScriptBlock?

The RegisterClientScriptBlock method inserts the client-side script immediately below the opening tag of the Page object's element. The code cannot access any of the form's elements because, at that time, the elements haven't been instantiated yet.

The RegisterStartupScript method inserts the specified client-side script just before the closing tag of the Page object's element. The code can access any of the form's elements because, at that time, the elements have been instantiated.

The choice of which method to use really depends on the "order" in which you want your script to be run by the browser when rendering the page.

What is the difference between ClientScript.RegisterClientScriptBlock and ClientScript.RegisterStartupScript

RegisterClientScriptBlock injects script at the top of the page.

RegisterStartupScript injects script into your page such that it will be executed when the page finished loading but before the OnLoad event is fired:

Sources:

ClientScriptManager.RegisterClientScriptBlock Method

ClientScriptManager.RegisterStartupScript Method

What is the difference between ScriptManager.RegisterStartupScript() and ScriptManager.RegisterClientScriptBlock(), as both does the same thing?

The RegisterClientScriptBlock method inserts the client-side script immediately below the opening tag of the Page object's <form runat="server"> element. The code cannot access any of the form's elements because, at that time, the elements haven't been instantiated yet.

The RegisterStartupScript method inserts the specified client-side script just before the closing tag of the Page object's <form runat="server"> element. The code can access any of the form's elements because, at that time, the elements have been instantiated. The choice of which method to use really depends on the "order" in which you want your script to be run by the browser when rendering the page.

Normally you would use RegisterClientScriptBlock if you want to register js-functions and use RegisterStartupScript if you want to call these functions or want to access controls on your page.

For further informations have a look at MSDN.

Use of RegisterClientScriptBlock/RegisterStartupScript in asp.net 3.5

RegisterStartupScript is used to register and execute javascript functions once the page finished loading, this javascript code executes before the onLoad event of page is raised. You can use it for multiple reasons, for example, you want to execute any particular javascript function depending on some variable value in your code behind.

On the other hand, RegisterClientScriptBlock is used to add a script block on the top of your page, similarly it provides you a way to work with both client side code and server code in your code behind.

Difference between Response.Write() and ClientScript.RegisterStartupScript()?

The Response.Write method can be used to output code during the rendering phase of the page. The <%= %> server tag is a shortcut for <%Response.Write( )%>.

If you use Response.Write from the code behind, you will write to the page before it has started rendering, so the code will end up outside the html document. Eventhough the browser will execute the code, it doesn't work properly. Having something before the doctype tag will make the browser ignore the doctype and render the page in quirks mode, which usually breaks the layout. Also, as the script runs before anything of the page exists, the code can't access any elements in the page.

The ClientScript.RegisterStartupScript method is the preferred way of adding script dynamically to the page. It will render the script at the end of the form so that it doesn't break the html documnet, and it can access the elements in the form.

Also, you give each script an identity, which means that duplicates are removed. If a user control registers a script, and you use several instances of the user control, the script will only be rendered once in the page.



Related Topics



Leave a reply



Submit