Dennis van de Laar

Some time ago I decided to write some posts about what happens within the ASP.NET AJAX framework when you build your own control. There are a lot of posts how to create your own control, but i was very interested what happens inside the framework. In this part i will show you how the framework acts on the properties of your control. When you have created a new control you have to instantiate it on a webpage. In figure1 is shown how you could do that. My control will be created when the application is loaded. The first line is just to kick in the debugger so this is a line you can forget.

figure 1

In this post i will focus on the second parameter {name: ‘Control’}. The second parameter is used to set the properties of your control, in this cause i am only using 1 property called name. I set the name of the control to ‘Control’. In figure 2 you can see my property as a parameter.

figure 2

Before the property can be set on the control, the framework has to create the control first. In figure 3 you can see that once the control is created it will live in the code as the variable component.

figure 3

Once the control is created I am able to set the properties of the control. In figure 4 you can see that the _setProperties function is called with 2 parameters. The control self and the properties I set when in created the control.

figure 4

The setProperties is the function where it all happens. There are some if statements to decided how the properties should be set. In Figure 5 you can see an overview of the _setProperties function

figure 5

Mainly the code block in figure 5 is divided in 2 blocks. The first is used when you have objects defined for your properties for example {style: {fontWeight: “bold”, borderWidth: “2px”}}}. In this case style will be seen as a object and fontWeight en borderWidth as properties. In this block the code will recursively call it self to finally end up in the second block where the real properties will be set. Below I will show in detail how the properties will be set for a control. In figure 6 you can see that there will be looped through the array of properties and that the variable val will be set with the value op the property name. See figure 7. 

figure 6

figure 7

The variable ‘name’ will always contain the name of the property and the variable ‘val’ will always contain the value you want to set for the property. Now that the property and the value are known the framework will set the value. To do this, your control should contain a function to set (in my case name) the property of the control. the syntax for this is “set_”+ the propertyname. If your property doesn’t have a set prefix the function can’t be found. See figure 8 for the code example.

figure 8

In figure 8 you can see that there will be a setter variable which will act as the property setter and it takes 2 arguments. Target which will be the control where the property is part of and the val (value) of the property. When you step into this line of code you will reach your own control as you can see in figure 9.

figure 9

I hope this makes it clear how the framework will work with your control and how it will set your property. In part III I will describe how you can hook up events to your control and how the framework will fix this for you.

Regards,

 Dennis

In this post i would like to show you how cool it is to use the objects you defined in your Business Layer on the client. But first why do you want to use your objects on the client? Well, wouldn’t it be nice to only retrieve some objects from the server once and manipulate the objects, add new objects and when everything is good then send it back to the server to process everything.  This means less data transfers. With the ASP.NET AJAX framework this is very easy to achieve. I have a webpage which communicates with a webservice to retrieve some information from the server. My webservice only contains two webmethods. A getHouse and a saveHouse Webmethod.

[WebMethod]

public House GetHouse()

{

return new House();

}

In this case I created a Class House which will be send to the client when the webmethod GetHouse is executed. As you can see below the house object in the Business Namespace is available on the client.

The reason this object is available on the client is because I have set a reference to the webservice in the Scriptmanager. The Scriptmanager will create a Javascript proxy to enable communication with the  webservice. Because I have defined a webmethod where I use an object House this object will be generated in the Javascript proxy as show in de second screenshot.

Here you can see that first the namespace is created and later the House object will be registered in the Business namespace. Because the object is generated in the Javascript Proxy it becomes available on the client. Now we can write code like:

var house = new Business.House();

But what if I want to use an object which I don’t use in my webmethodes. For example I would like to add a Room to the House object. The webservice doesn’t have a webmethod where it uses a Room object, so the JavascriptProxy will not contain a Room object. I have to make sure that the object from my Business Layer will be available through the Javascrit proxy. This can be achieved by using the [GenerateScriptType(typeof(Room))] Attribute. With this attribute you specify that the server type must be generated into the Javascript Proxy. So let’s take a look at the proxy again now i have added this attribute to my Webservice Class.

Right now I have the Room and House class available on the client. See the final screenshot

Using objects on your client can reduce data tranfsers. You can create the objects on the client and when you are happy with it send it back to the server where it will be processed. I think this is a pretty cool and strong feature of the Javascript proxy which is mainly responsible for this feature.