OnClick vs. OnClientClick

For some time now I've developed some web applications with Mono, and in the beginning I really had my problems with the interaction between the ASP pages and Javascript , because the one thing runs on a server and the javascript on the client.

And it really took a while until I found out how to make a button not just doing a simple postback on a click-event, but to call a javascript function.

Sometimes it just makes sense, to have a look into the generated HTML code :-)
Because now the small but distinct difference between OnClick and OnClientClick becomes important.

As an example, a very simple page with two buttons :

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<script runat="server">
    public virtual void button1Clicked (object sender, EventArgs args)
    {
        serverButton.Text = "You clicked me";
    }
</script>

<body>
    <form id="form1" runat="server">
        <asp:Button id="serverButton" runat="server" Text="Click me!" OnClick="button1Clicked" />
        <asp:Button id="clientButton" runat="server" Text="Client Click" OnClientClick="alert('You clicked me')" />
    </form>
</body>
</html>

The OnClick event handler is assigned to the first button, the "serverButton", and the "clientButton" is stuffed with the OnClientClick event handler.
When the page is compiled, the following happens :

<html>
<body>
    <form method="post" action="Default.aspx" id="form1">

    <input type="submit" name="serverButton" value="Click me!" id="serverButton" />
    <input type="submit" name="clientButton" value="Client Click" onclick="alert('You clicked me');" id="clientButton" />

    </form>
</body>
</html>

If the page has been rendered, the "serverButton" has become to a simple submit button that only makes a postback on its own page.
But the "clientButton" additionally has the 'onclick' event handler, which is then processed on the client side. So any client side javascript functions can now be called.

If that behaviour has to be achieved dynamically from the code-behind, you can assign additional attributes to the corresponding elements.
The same result from the code-behind looks like this :

 
<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        this.clientButton.Attributes.Add("onClick", "alert('You clicked me')");
    }

    public virtual void button1Clicked (object sender, EventArgs args)
    {
        serverButton.Text = "You clicked me";
    }
</script>

<html>
<body>
    <form id="form1" runat="server">
        <asp:Button id="serverButton" runat="server" Text="Click me!" OnClick="button1Clicked" />
        <asp:Button id="clientButton" runat="server" Text="Client Click" />
    </form>
</body>
</html>

Here the "onclick" event handler and the name of the JavaScript function to be executed are assigned to the "clientButton" on the pagelload-event.

The whole thing of course also works for other input types such as radio buttons or checkboxes.

Tags:

.NET