ASp.net Ajax 4.0 , Master-Details View with the DataView , Part 2
If you are just tuning in , you can read Part 1 here
| Parent Entity | Child Entity | ||||||||||||
|
|
In the last part , we looked at using the Events from the DataView to render another template
for the inner details. Looking further , I discovered that there is a syntax for injecting code into the
template.
The code injected into the template looks like this ..
<!--*
//Code
*-->
HTML
<!--*
//Code
*-->
This looks very similar to the Inline code in aspx pages.
For the Master-Details example as before , the template would look like this ..
To bind all lists and their listElements , the template would look like this ..
<div id="listTemplate" class="sys-template">
<ul>
<li>
<h3>
{{ ListTitle }}
</h3>
<ul>
<!--*
//Iterate over the ListElements , generating the <li> element for each List Element
for(var index=0;index< ListElements.length;index++) {
var listElement = ListElements[index];
*-->
<li>{{ listElement.ListElementText }} </li>
<!--*
}
*-->
</ul>
</li>
</ul>
</div>
And then , you are done !!!
You will need the following script files .
AJAX Client Library for ADO.NET Data Services (optional)
ASP.NET AJAX 4.0 CodePlex Preview 1
Complete sample Code is below , I swapped out the DataService code for local data .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Master Details with ASP.NET AJAX 4.0</title>
<link href="../css/SoberTable.css" rel="stylesheet" type="text/css" />
<style>
.sys-template
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scrpManager">
<Scripts>
<asp:ScriptReference Path="~/AjaxTemplate/Scripts/MicrosoftAjaxTemplates.debug.js" />
<asp:ScriptReference Path="~/AjaxTemplate/Scripts/DataService.debug.js" />
</Scripts>
</asp:ScriptManager>
<div id="listTemplate" class="sys-template">
<ul>
<li>
<h3>
{{ ListTitle }}
</h3>
<ul>
<!--*
//Iterate over the ListElements , generating the <li> element for each List Element
for(var index=0;index< ListElements.length;index++) {
var listElement = ListElements[index];
*-->
<li>{{ listElement.ListElementText }} </li>
<!--*
}
*-->
</ul>
</li>
</ul>
</div>
<script language="javascript" type="text/javascript">
var _dataServiceProxy = null;
function dataLoaded(result) {
//Get the Template for the List Results
var dv = new Sys.Preview.UI.DataView($get("listTemplate"));
//Pass the data regarding the Lists to be bound
dv.set_data(result);
//Render the template
dv.initialize();
}
function loadData() {
//Create a Data Service Proxy
_dataServiceProxy = new Sys.Data.DataService("ListService.svc");
//The URI of the resources to download
var listURI = "/Lists?$expand=ListElements";
//Query the Data Service with the URI
_dataServiceProxy.query(
listURI , /*Resource URI*/
dataLoaded, /*Success callback*/
null, /*Failure callback */
null, /*user context*/
null); /*Web Request*/
}
function loadLocalData() {
var localData ={ 'd' : [
{'ListID': 1, 'ListTitle': 'Future Blog Posts to write', 'ListElements': [
{ 'ListElementID': 2, 'ListElementText': 'Working with 1..N associations'},
{ 'ListElementID': 3, 'ListElementText': 'Working with ServiceOps and the client'},
{ 'ListElementID': 4, 'ListElementText': 'Data Literal Table'},
{ 'ListElementID': 5, 'ListElementText': 'Calling Stored Procedures from ServiceOps'} ]
},
{'ListID': 2, 'ListTitle': 'My Life List',
'ListElements': [{'ListElementID': 64, 'ListElementText': 'Learn Spanish'}] }
] };
dataLoaded(localData.d);
}
function pageLoad() {
loadLocalData ();
}
</script>
</form>
</body>
</html>