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

List

Properties

ListID

ListTitle

Associations

ListElements

ListElement

Properties

ListElementText

ListElementID

Associations

List

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>