Home / AJAX

HOW TO Customize the Rendering in an Ajax Template

RSS
Modified on 2009/12/17 21:03 by Erik Reitan Categorized as Uncategorized
You can add the sys:codebefore and sys:codeafter declarative attributes to any DOM element within a template to render code before or after an element.

Customize the Rendering in an AJAX Template

The following example shows how to use the sys:codebefore and sys:codeafter declarative attributes to render markup before and after elements in a template.

To perform custom rendering in an AJAX template

  1. Using HTML markup, create a block element that supports child elements, such as a ul element.
  2. Give the block element an id attribute.
  3. Set the class attribute of the block element to "sys-template" so that the block element can be recognized as a template.
  4. Attach a dataView control and set the corresponding data of the block element.
  5. Within the child element, include a span element with the sys:codebefore declarative attribute:
     
    <span sys:codebefore="alert('Click continue…');"></span>
  6. Add additional data item fields into the template, such as the following:
     
    <span class="name">{{ Name }}</span>
    <span class="value">{{ Description }}</span>

  7. Include a link element with the sys:codeafter declarative attribute to execute a client side function named showDataItem(), such as the following:
     
    <a href="#" sys:codeafter="$addHandler($element, 'click', function() {showDataItem($dataItem);})">Show Data Item</a>


Example

The following code shows HTML markup where a template supports conditional rendering of HTML elements.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Conditional Rendering</title>
    <style type="text/css">
        .sys-template { display:none; }
        body { font-family: Arial, Helvetica, sans-serif; background-color: white; }
        .list { border-collapse:collapse; width:820px; font:14pt Arial; background-color:white; margin:7px; }
        .name { float:left; width:200px; }
        .value { float:left; width:400px; }
        .myselected { background-color:blue; color:white; }
        li { list-style-type: none; }          
    </style>
    <script type="text/javascript" src="../Scripts/MicrosoftAjax/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="../Scripts/MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script>
    <script type="text/javascript">
        var imageArray = [
        { Name: "Crashing water", Description: "A splash of waves captured.", Additional: "one" },
        { Name: "Tired", Description: "Mid-day rest.", Additional: "two" },
        { Name: "Close Zoom on Giraffe", Description: "Closeup of a Giraffe at Wild Animal Park.", Additional: "three" },
        { Name: "Pier", Description: "A pier in Morro Bay.", Additional: "four" },
        { Name: "Seagull reflections", Description: "Seagulls at peace.", Additional: "five" },
        { Name: "Spain", Description: "In Balboa Park, in downtown San Diego.", Additional: "six" },
        { Name: "Sumatran Tiger", Description: "Restful.", Additional: "seven" }
        ];

function showDataItem(value) { alert(value.Additional); } </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*"> <form id="form1" runat="server"> <div> <h1>Array Items</h1> <ul id="imageListView" class="list sys-template" sys:attach="dataview" dataview:data="{{ imageArray }}" > <li> <hr sys:if="$index!==0"/> <span class="name">{{ Name }}</span> <span class="value">{{ Description }}</span> <span sys:codebefore="alert('About to display: ' + $dataItem.Name);"></span> <a href="#" sys:codeafter="$addHandler($element, 'click', function() {showDataItem($dataItem);})">Show Data Item</a> </li> </ul> </div> </form> </body> </html>