Executing JavaScript Code from Server
This is a common scenario when working with WebForms. There are many ways to achieve the desired result, but they have one thing in common – you should make sure that the controls are fully loaded in the page before trying to get a reference to them and use them in your JavaScript code.
You can check the Executing JavaScript Code from Server-side in Web Forms and ASP.NET AJAX KB article for more abstract code snippets. Before you dive and test the different solutions make sure that:
- The code is actually inserted on the page – the easiest way is to put a simple alert() and check if it is fired.
- The controls are rendered on the page before referencing them in your JavaScript function
- If you are manually inserting the
<script>
tags – that you have set either the type (type='text/javascript'
) or the language (language='javascript'
) attributes
The simplest way
Use a label or a literal to import the script on the page:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function calledFn()
{
alert("code fired");
}
</script>
</head>
<body>
<form id="form2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Run JavaScript Code" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server"></asp:Label>
</form>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "<script type='text/javascript'>calledFn()</script>";
}
The solution above is pretty simple and will not cover the scenario when the asp:Label is hidden (Visible="false"). In this case, do not hide the label via the Visible property but move it outside of the visible screen boundaries via CSS -> style="position: absolute;top:-1000px; left:-1000px;" or alternatively use a Literal or the Page.RegisterStartupScript, Page.RegisterClientScriptBlock, ClientScriptManager.RegisterStartupScript / ClientScriptManager.RegisterClientScriptBlock methods.
When using ASP.NET AJAX
In ASP.NET AJAX environment however, you should take into consideration the fact that the ASP.NET AJAX controls are loaded after window.onload is fired. You can verify this by putting some ASP.NET AJAX controls and then examine the HTML of the rendered page.
Again, there are several ways to ensure that the controls are loaded on the client before trying to use them. If you want to use the RegisterStartupScript() method, I would recommend to check the ASP.NET AJAX’s Sys.Application.Load event. This event is raised after all scripts have been loaded on the page and the controls have been created and initialized. You need to make sure however, that the code that you will insert in the Load event will be executed only once and then removed, otherwise it will be called after every Ajax request. For example you could use the following logic:
function f()
{
//code
Sys.Application.remove_load(f);
}
Sys.Application.add_load(f);
For example let’s call the RadWindow’s radalert() function after a postback by using the code above:
<form id="form3" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<asp:Button ID="Button2" Text="Postback and show RadAlert" runat="server" OnClick="Button1_Click" />
</form>
protected void Button1_Click(object sender, EventArgs e)
{
string radalertscript = "<script language='javascript'>function f(){radalert('Welcome to RadWindow for <strong>ASP.NET AJAX</strong>!', 330, 210); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", radalertscript);
}
If you are working with Ajax requests however, it is better to use the asp:Scriptmanager’s RegisterStartupScript() method as shown below:
<form id="form4" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button3" Text="AJAX postback and show RadAlert" runat="server" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
protected void Button1_Click(object sender, EventArgs e)
{
string scriptstring = "radalert('Welcome to Rad<strong>Window</strong>!', 330, 210);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "radalert", scriptstring, true);
}
More information on this subject can also be found in these KB articles (they are about RadWindow but use general approaches that can be applied to different scenarios):
-
Calling radalert from code-behind (all versions of RadWindow)
-
RadWindow that postbacks and manipulates opener page on its reload
And in the following MSDN article: Using JavaScript Along with ASP.NET 2.0 (by Bill Evjen)
Execute script on Sys.Application.Load and pass parameters for it
The Sys.Application.Load does not allow passing parameters for the event handler, so we just need to call our function inside the page load handler function.
Note: If you are passing string as parameter, the quotes wrapping the value should be added. Otherwise, a global variable with that name will be searched and passed as a function parameter.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<script>
function alertWithParameters(text, number, boolParam) {
if (boolParam) {
alert(text);
} else {
prompt("Enter age", number);
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button3" Text="AJAX postback and show RadAlert" runat="server" OnClick="Button3_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
protected void Button3_Click(object sender, EventArgs e)
{
//https://stackoverflow.com/questions/3773857/escape-curly-brace-in-string-format
string applicationLoadHandlerFormatString = "Sys.Application.add_load(applicationLoadHandler); function applicationLoadHandler() {{ {0}; /* Sys.Application.remove_load(applicationLoadHandler);*/ }}";
// obtain values from business logic
string text = "Everything is fine!";
int number = 21;
bool boolParam = false;
string myFunction = string.Format("alertWithParameters('{0}', {1}, {2})", text, number, boolParam.ToString().ToLower());
string applicationLoadHandler = string.Format(applicationLoadHandlerFormatString, myFunction);
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "clientprompt", applicationLoadHandler, true);
}
In conclusion
Calling a JavaScript function from the server is a relatively easy task. Just make sure that:
-
The code is actually inserted on the page – the easiest way is to put a simple alert() and check if it is fired.
-
The controls are rendered on the page before referencing them in your JavaScript function
-
If you are manually inserting the
<script>
tags – that you have set either the type (type='text/javascript') or the language (language='javascript') attributes.