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