Monday, November 19, 2007

How to call a javascript method from the server side code

Calling a javascript method from a server side control requires adding an attribute to the control. Let us take an example -- Suppose we have a simple button on our web page, and want to display a javascript alert when this button is clicked. Our first instinct would be to put the script in the .aspx page itself, like this :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head runat="server">
    <title>Javascript Experiment</title>
    <form id="form1" runat="server">
    <asp:Button ID="btnClickMe" Text="Click Me" runat="server"     OnClick="alert('Clicked');" />
Try compiling it (in VS 2005), and you get the following error : error CS1012: Too many characters in character literal Why ? Because the [OnClick] here refers to the serverside OnClick event(the one you define in your code-behind). It does not refer to the javascript onclick event of the button. So how do you "tell" the server-side button control to call the client side onclick event ? By writing the following in your code-behind :
btnClickMe.Attributes.Add("onclick", "alert('Clicked');");
Recall that each server control is rendered as an HTML element on the page. So before including the above line in our code, here's how our button is rendered :
<input type="submit" name="btnClickMe" value="Click Me" id="btnClickMe" />
As you can see, our button [btnClickMe] is rendered as an <input /> html element. It has four attributes : type, name, value, and ID. When we add the Attributes.Add method to our code-behind, here's how the button looks :
<input type="submit" name="btnClickMe" value="Click Me" onclick="alert('Clicked');" id="btnClickMe" />
Note the [onclick] attribute rendered here. This basically causes the "alert" to be shown when the button's onclick event is raised (in other words, when the button is clicked). You can further extend this example to call a javascript method that does something meaningful on the button click. Guess it can look something like this :
btnClickMe.Attributes.Add("onclick", "someMeaningfulMethod();");
So to summarize, we don't directly call the javascript method from the server side code. Instead, we add attributes to the control so that when the control is rendered (as html) on the browser, it also contains the attributes (event handlers, in this case) we have added.


Dogberry said...

Spot on, does what it says on the tin and shows simply how to call javascript from c# code behind.

dogberry UK

Anonymous said...

Actually this does nothing of the sort - this tells you how to add a client-side eventhandler, but does nothing to call a method itself, which is especially problematic if you're event has already been triggered.

ASP.NET is deeply, critically flawed w.r.t. JS and the client-side in general - it doesn't really want you to try this at all.

Trumpet7 said...

An easier fix is just to use the onclientclick event instead of onclick in your markup.