The declarative approach: attaching MS controls and behaviors

Before going on with our MS AJAX exploration, it’s time to make a small detour and talk about attaching MS AJAX controls and behaviors to HTML DOM nodes. If you’ve been using MS AJAX for some time, you probably know that it introduced the concepts of controls and behaviors when it was first launched. These are represented by JavaScript classes and their constructors expect a reference to a DOM element. In other words, you cannot create a control or behavior without attaching it to an existing DOM node.

As we’ve seen in a previous post, the latest release of MS AJAX (preview 5 at the time of writing) lets us use a declarative approach to create and attach a MS control with an existing HTML DOM node. Lets recover the example we’ve used:

        dv:data="{{ data }}"

Using the sys:attach results in getting a new Sys.UI.DataView control and attaching it to the UL element. You already know this. What I didn’t mention at the time was that you can use the same approach for attaching behaviors to existing controls. For instance, the next snippet shows how to use a declarative approach to associate a watermark behavior with an existing textbox:

    <style type="text/css">
        .watermark{ background-color: lightgray; }
    <script src="MicrosoftAjax/MicrosoftAjax.debug.js"
    <script src="MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"
    <script src="MicrosoftAjax/AjaxControlToolkit.Common.Common.js"
    <script src="MicrosoftAjax/AjaxControlToolkit.ExtenderBase.BaseScripts.js"
    <script src="MicrosoftAjax/AjaxControlToolkit.TextboxWatermark.TextboxWatermark.js"
<body xmlns:sys="javascript:Sys"
    <input type="text" id="txt"
        watermark:watermarktext="Put something here"
        watermark:watermarkcssclass="watermark" />

This might be a good way of letting your designers add stuff to your pages. Btw, you should notice that the ASP.NET 4.0 white paper has a section called “declarative Instantiation Outside a Template” on it which says that you’ll need to activate the control if its placed outside a template. I’ve run the previous sample without activating it and it works, so I’m not sure if things have change or will change with a future release.

And that’s it. Stay tuned for more on MS AJAX.


~ by Luis Abreu on October 15, 2009.

3 Responses to “The declarative approach: attaching MS controls and behaviors”

  1. I have two .aspx pages.
    1-default.aspx contains a dv that fetches “customer”
    2-dvToBeLoaded.aspx cotains a dv that fetches “PlateName”

    both pages have dv with the datasource being declared in the markup. When the user clicks on a button. I retrieve the HTML code from the (2) page. Only the div that contains the dv is loaded. I place that html into the div where the (1) dv resided.

    How to get the parser to re-evaluate the template again.
    I was thinking there maybe a refresh method available. I could not find it.

    My Solution:
    remove dv declarations from the html from page (2) the imported code. Now the only way you can tell it is possibly a dv is that the sys-template class remained.
    But for the most part it looks just like a .

    I load the html from page(2) and replaced existing html page(1) in the div. Then I $Create() the dataview. When I do this the data is pulled from the AdoNetDataService and it works. Notice that I retrieve data from a different entity. Customers vs. PlateName

    I would like to be able to replace the dv”s html in page(1) with html from page(2) and refresh the dataview again.

    Thank You,
    William Apken

  2. I”ll have to run some tests before giving a definitive answer. stay tuned 🙂

  3. I”ve run some tests and it doesn”t seem much complicated. you”ve got several options here. if you”re getting the HTML of the second template on demand, then you need parse it and put it into a template object.

    I”ve got a couple of posts on templates and I”ll try to publish them tomorrow.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: