Sys.Component - Client Components


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

Sys.Component

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
    Type.registerNamespace("MyNameSpace");

    // create a constructor
    MyNameSpace.MyFirstComponent = function () {
        MyNameSpace.MyFirstComponent.initializeBase(this);
    }

    // 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);

</script>


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;

    };

</script>


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" />


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.