This article show you how to create a Asp.net server control that you use directly in the client-side via javascript. As it shows bleow:

<my:MyButton ID="btTest" runat="server" ClientInstanceName="testButton" Text="Hello world" />

testButton.SetBackgroundColor('#FF0000');

This article introduces 2 concepts:

• Object oriented JavaScript
• Create a custom asp.NET control which implements this JavaScript.

Object Oriented Javascript

Create class

First we have to know how to create and instantiate classes in JavaScript. Here is a very simple class declaration.

Constructors

You can define some parameters for your constructor; it's the same declaration as function parameters.

Public & private variables

You can also declare public and private variables; private viriables are declared "locally" with the key word 'var'. The public members are members of 'this' and will be declared as above.

We can see that only the 'publicVariable' is visible in the intellisense.

Functions

You can define functions the same way you define public members.

By this way, you can encapsulate an html control in a class, and create a friendly interface by adding some methods to modify the control.

The example show you how to allow changing the background color of a simple html control.

Creating a client instance for an Asp.NET server controls

Now we're going to see how to implements that to create client instance in a control server.

1. Create a new class library.

2. Add a JavaScript file which contains the 'ClientObject' class definition

3. To use the file as embedded resource, change the build action of the file.

4. Add this line in the AssemblyInfo.cs (File name : <completeNameSpace>.<fileNameWithExtension>)

5. Add a new class which extends System.Web.UI.Button

6. Add a property ClientInstanceName

7. If the ClientInstanceName property is defined, the script file must be included in the page.

This action must be done in the OnPreRender method.

8. Render the js instance, to achieve it, override the Render methods, and write a little js script.

Now, you can use your control in your aspx like this

<my:MyButton ID="btTest" runat="server" ClientInstanceName="testButton" Text="Hello world" />

You can now manage your Asp.NET in client side, in this example; you can change the background color of the button:

<input type="button" value="red" onclick="testButton.SetBackgroundColor('#FF0000');" />

Generated Html:

<input type="submit" name="btTest" value="Hello world" id="Submit1" />

<script type="text/javascript" language="javascript">

var testButton = new ClientObject(document.getElementById('btTest'));

</script>

Thanks to Nicolas Castellano for this article.

Sample code: ClientControlSample.zip (38.03 kb)