OnClientClick...

The OnClientClick property is a new method to button controls in the .NET 2.0 framework.

By: Brian Mains Spacer Date: June 9, 2006Spacer Download Spacer Download the code. Spacer Spacer Printer Friendly Version

The OnClientClick property is a new method to button controls in the .NET 2.0 framework. It adds javascript to the onclick or href property (when appropriate) that performs a desired client-side action. For instance, you can append an alert message, as shown below, to the button, and the javascript will run:

<asp:Button ID="btnAlert" runat="server" OnClientClick="alert('Are you sure you want to do this?  (I dont do anything really.)');" Text="Client Alert" UseSubmitBehavior="false" />

Clicking it will raise the alert message as shown above. The code can be any JavaScript code, such as method calls, other statements, or even dynamic code generated by the ClientScriptManager class, such as Page.ClientScript.GetPostBackEventReference. This method is a part of the IPostBackEventHandler class, which is used to handle different events raised from controls inside a composite control. For instance, if a composite control has several buttons, GetPostBackEventReference can associate an event argument with each button and generate client-side script to handle the post back appropriately.

For this example, I created a composite control that has two buttons for two different events. Both buttons trigger events in the class, which is handled by IPostBackEventHandler. Let’s look at the definition of the buttons in the CreateChildControls method:

getWeather = new Button();

getWeather.ID = "getWeather";

getWeather.Text = "Get Weather";

getWeather.OnClientClick = Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this, "weather"));

 

lookup = new Button();

lookup.ID = "lookup";

lookup.Text = "Lookup Zip";

lookup.OnClientClick = Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this, "lookup"));

Each button is associated with a post back event argument; the getWeather button is associated with the "weather" event argument and the lookup button is associated with the "lookup" event argument. This event argument is passed to the method shown below.

public void RaisePostBackEvent(string eventArgument)

{

    if (eventArgument == "weather")

    {

        this.Page.Response.Write("Weather clicked");

        if (GetWeather != null)

            GetWeather(this, EventArgs.Empty);

    }

    else if (eventArgument == "lookup")

    {

        this.Page.Response.Write("Lookup clicked");

        if (LookupZipCode != null)

            LookupZipCode(this, EventArgs.Empty);

    }

}

This method determines which event argument was clicked. Only one event argument triggers at a time, so when the weather button is clicked, the value is weather, and vice versa. Upon clicking it, a message is written out (so the effect can be clearly seen and for example purposes only), and the appropriate event is fired.

Try out the code sample attached. Both the items are in the page. Clicking each button will cause different actions to occur. The first button embeds the client script directly in the button, and the other custom composite control illustrates how to use IPostBackEventHandler to raise events in your control code.