Today ,we will talk about using the Declarative Syntax to instantiate certain AjaxControlToolkit Behaviors .

Step 0: Figure out which are the script files needed for the Behavior to work and include the appropriate Script       references  in your page .
For the PopupControlBehavior , the script files would be :

AjaxControlToolkit.ExtenderBase.BaseScripts.js
AjaxControlToolkit.Common.Common.js
AjaxControlToolkit.Compat.Timer.Timer.js
AjaxControlToolkit.Animation.Animations.js
AjaxControlToolkit.Animation.AnimationBehavior.js
AjaxControlToolkit.PopupExtender.PopupBehavior.js
AjaxControlToolkit.PopupControl.PopupControlBehavior.js

Step 1: Declare the behaviors you wish to attach to the templated elements.

<body xmlns:sys="javascript:Sys" xmlns:popup="javascript:AjaxControlToolkit.PopupControlBehavior">

Step 2 : In the template , attach this behavior to the target element using the sys:attach syntax.

<a href="#" sys:attach="popup" .....>Some Text Here</a>

Step 3 : Depending on the behavior you are using , set the appropriate properties .

Since I am using the PopupControlBehavior , we will need to set the PopupControlID and the Position properties of the behavior.

<a popup:popupcontrolid=""  popup:position="4" >...</a>

Declarative template  for Master-Details view with popupbehavior : 

<div id="listTemplate" style="width: 150px" class="yellow">
  <ul sys:attach="dataview" class="sys-template" dataview:data="">
     <li>
           <span sys:attach="popup" popup:popupcontrolid="subDiv" popup:position="4"
      sys:id="master"></span>

       <div id="subDiv" class="grey" style="display: none; width: 300px">

           <ul class="sys-template" sys:attach="dataview" dataview:data="">
                            <li> </li>

           </ul>

          </div>
            </li>
      </ul>
</div>

Complete Sample Code : Click Me