Add JavaScript programmatically using RegisterStartupScript during an Asynchronous postback

Scenario 1:

Create an ASP.NET project. Now add a Label(lblDisplayDate) and a Button(btnPostback) control to the page.

On the Button click, register the following script dynamically using the ClientScriptManager.RegisterStartupScript to change the color of the label controls to Red.

C#

protected void Page_Load(object sender, EventArgs e)

{

lblDisplayDate.Text = System.DateTime.Now.ToString("T");

}

protected void btnPostback_Click(object sender, EventArgs e)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder();

Include Script Tag in anchor

sb.Append(@"script language='javascript'");

sb.Append(@"var lbl = document.getElementById('lblDisplayDate');");

sb.Append(@"lbl.style.color='red';");

sb.Append(@"script");

if (!ClientScript.IsStartupScriptRegistered("JSScript"))

{

ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());

}

}

Scenario 2:

Now wrap the label and the button control inside an UpdatePanel as shown below:

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="lblDisplayDate" runat="server" Text="Label">asp:Label>

<asp:Button ID="btnPostback" runat="server" onclick="btnPostback_Click"

Text="ClickMe" />

ContentTemplate>

asp:UpdatePanel>

div>

When you now run the application and click on the button, you will observe that the label is updated with the new time (which means the postback occurred), however the color of the label does not turn to red. This is because when using an Update Panel, the JavaScript that is dynamically added to the page using ClientScript.RegisterStartupScript() does not execute.

Solution:

Use the ScriptManager.RegisterStartupScript(). If you take a look at the methods of the ScriptManager class, you will observe that the methods to register client script to the page using the ClientScriptManager class, are also present in the ScriptManager class. So modify the code as shown below:

C#

protected void btnPostback_Click(object sender, EventArgs e)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder();

Include Script Tag in anchor

sb.Append(@"script language='javascript'");

sb.Append(@"var lbl = document.getElementById('lblDisplayDate');");

sb.Append(@"lbl.style.color='red';");

sb.Append(@"script");

ScriptManager.RegisterStartupScript(btnPostback,this.GetType(), "JSCR", sb.ToString(),false);

}

Note 1: Observe that the last parameter to RegisterStartupScript is set to 'false'. This prevents us from inserting the 'script' tags automatically. Since we have already inserted the 'script' tags while creating the script in the StringBuilder, we do not need to insert them now. Setting the last parameter to 'true' in such cases is a very common mistake developers do.

Note 2: Building up javascript using the StringBuilder as shown above is not advisable in large projects. Instead you should keep the javascript in a seperate .js file and refer the .js.

Source :-

http://www.dotnetcurry.com/ShowArticle.aspx?ID=200