Monday, September 08, 2008 4:30 PM
Aurelien
[ASP.NET AJAX] - CodePlex Preview 2 - Declarative Master-Details DataView
Following this post regarding Master-Details implementation by the programmatic way, let's see how to do it through declarative way.
This sample is based on the ASP.NET AJAX CodePlex Preview 2.
Let's first create an .aspx page and add a ScriptManager to link the MicrosoftAjaxTemplates.js :
1: <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="false" EnablePageMethods="false"
2: EnablePartialRendering="false" EnableSecureHistoryState="false">
3: <Scripts>
4: <asp:ScriptReference Path="~/AjaxPreview2/MicrosoftAjaxTemplates.js" />
5: </Scripts>
6: </asp:ScriptManager>
Let's now create a JavaScript array with some Master-Details datas, in this example, we will use some countries/cities :
1: <script type="text/javascript">
2: var arrayCountries = [
3: { 4: CountryName: 'France',
5: Cities: [
6: { CityName: 'Lille' }, 7: { CityName: 'Paris' }, 8: { CityName: 'Marseille' } 9: ]
10: },
11: { 12: CountryName: 'United States',
13: Cities: [
14: { CityName: 'Seattle' }, 15: { CityName: 'Washington' } 16: ]
17: }
18: ];
19: </script>
Goal of the Client Template is to generate some nested unordered lists without writing a single line of JavaScript code.
To use the declarative way, we need to include some Namespaces on the <body> tag.
1: <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="dataview1">
As you can see, the "sys" Namespace will be used by the "sys:activate" attribute and the "dataview" Namespace will be used in the HTML code.
As we're using local datas, we will use "dataview:data" to set the datasource and don't have to wait an asynchronous call to a webservice. So we can activate the dataview on the page load through "sys:activate".
Regarding the Client Template, we will use 2 DataView, one for the Countries, other one for Cities.
1: <div id="dataview1" class="sys-template" sys:attach="dataview" dataview:data="{{ arrayCountries }}"> 2: <ul>
3: <li>{{ CountryName }} 4: <ul class="sys-template" sys:attach="dataview" dataview:data="{{ Cities }}"> 5: <li>{{ CityName }}</li> 6: </ul>
7: </li>
8: </ul>
9: </div>
This code is really simple, we just attach the DataView control to DOM Elements via sys:attach="dataview" and set the datasource with dataview:data="".
DataSource of the first DataView is the JavaScript array and for the second, we're using the underlying property Cities (Cities is also a JavaScript array).
And here's the result :
Stay Tuned ...
Filed under: ASP.NET, Microsoft Ajax Library, Preview, JavaScript, AJAX