Sys.Component - Client Components

Sponsored Links


Here we take a look at the Microsoft AJAX Library Sys.Component object.

The Sys.Component class exists inside the Microsoft AJAX library and it provides a base class for one to create reusable AJAX components which are classes which do not generate any user interface elements, they instead provide some type of function such as the Timer control does. The Sys.Component class provides a base class for all the ASP.NET AJAX client components.

Create a Sys.Component type object

First of all you need to create a class for using the Sys.Component class, and create it using the prototype design pattern. We can assign it to a namespace using Type.registerNamespace of the Microsoft AJAX library. Following this we need to create a constructor and ensure we call initializeBase(this). Next up we provide the implementation of the function by creating a prototype on our Javascript function which contains the logic of our function. Finally we need to use the registerClass method on our object to register the fact that our object will derive from the Sys.Component object. Now this is enough to create our new object, so all need to do in our code is create a new instance of our function to use it.

Sys.Component Example

So in this basic example, we use a ScriptManager on the page to gain access to the Microsoft AJAX library which allows all of this to work. Following that we provide our Sys.Component implementation. Next up we have some Javascript to handle the click event of a button and use our Sys.Component derived class.

So here we add an ASP.NET AJAX ScriptManager control to provide access to the Microsoft AJAX library:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Here is our Javascript class which derives from the Sys.Component class:

<script type="text/javascript">

    // create a new namespace

    // create a constructor
    MyNameSpace.MyFirstComponent = function () {

    // provide logic of component by creating a prototype
    MyNameSpace.MyFirstComponent.prototype =
        AreaOfTriangle: function (triangleWidth, triangleHeight) {
            var areaOfTriangle = (triangleWidth * triangleHeight) / 2;
            return areaOfTriangle;

    // register class that it is derived from Sys.Component
    MyNameSpace.MyFirstComponent.registerClass('MyNameSpace.MyFirstComponent', Sys.Component);


Here is our Javascript which will provide an event handler for a HTML Button's click event and will call upon our new class using the new keyword:

<script type="text/javascript">

    function CalculateTriangleArea() {
        // get parameters

        var triangleWidth = document.getElementById("TextBox_TriangleWidth").value;
        var triangleHeight = document.getElementById("TextBox_TriangleHeight").value;

        var myCalculator = new MyNameSpace.MyFirstComponent();

        var result = myCalculator.AreaOfTriangle(triangleWidth, triangleHeight);

        document.getElementById("TextBox_TriangleArea").value = result;



Here is our ASP.NET and HTML which will provide the user interface for calling on our Javascript object which derived from Sys.Component.

<asp:TextBox runat="server" ID="TextBox_TriangleWidth" ClientIDMode="Static" />
<br />
<asp:TextBox runat="server" ID="TextBox_TriangleHeight" ClientIDMode="Static" />
<br />
<input type="button" value="Calculate Triangle Area" onclick="CalculateTriangleArea();" />
<br />
<asp:TextBox runat="server" ID="TextBox_TriangleArea" ClientIDMode="Static" />