Home / AJAX

HOW TO Perform Conditional Rendering in an Ajax Template

Modified on 2009/12/17 20:59 by Erik Reitan Categorized as Uncategorized
You can add the sys:if declarative attribute to any DOM element within a template to render the element conditionally.

Conditional Rendering in an AJAX Template

The following example shows how to use the sys:If attribute to render an hr element as a separator between items. The sys:if attribute uses the value of the $index pseudo-column to ensure that the hr element is rendered only between items, and not before the first item or after the last item.

To perform conditional 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 an hr element with the sys:if declarative attribute:

    <hr sys:if="$index!==0"/>


The following code shows the HTML markup for a page, where the template includes conditional rendering of an hr element.
<!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; }          
    <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>