Home / AJAX

HOW TO Create a Master-Detail View with Inline Binding Expressions

RSS
Modified on 2009/12/18 23:52 by Erik Reitan Categorized as Uncategorized
This topic shows how to create a master-detail view using two linked Microsoft Ajax DataView client controls. One control retrieves data from a Web service and displays a list of items (the master view). When an item in the master view is selected, the selected item is displayed using the other DataView control.

The Microsoft Ajax templates used by the DataView controls in this example use inline expressions to render the data values. When you use inline expressions instead of live binding, the Microsoft Ajax template is populated with data from the Web service only the first time that data binding is invoked. The data values that are rendered in the template are not updated if the underlying data item is modified.

At run time, the Microsoft Ajax template for the master DataView control is instantiated one time for each data item. If you change the data values of the DataView control and call its fetchData method, the view will be refreshed. However, if you modify the values of individual data items, the values will not be updated unless you use live-binding expressions. For more information, see How to: Create an Editable View with Two-Way Data Binding.

You can embed JavaScript expressions in a page by enclosing the expression in double braces, such as the following:
{{ expression }}
For example, the following expression binds to an Income value and an Expenses value, subtracts the expenses from the income, and calls a JavaScript method to format the result as currency:
{{ formatCurrency(Income - Expenses) }}

In the example page for this topic, the DataView control displays a list of companies. When the user selects a company in the master view, information about that company is displayed in a second view. For example, an Microsoft Ajax DataView client control is attached to an unordered list (ul) element. The contents define the item template and consist of a list item (li) element that is repeated for each data item.

Defining a Master-View Template

The first task is to create a master-view template.

To define a master-view template

  1. Using HTML markup, create a block element that supports child elements. Give the element an id attribute.
  2. Set the class attribute of the element to sys-template.
    Note:
    
    The sys-template class should be styled as display:none, so that the uninstantiated template is not visible on the page.
  3. Specify the following attributes to configure the element as a DataView template:
  4. sys:attach. Specify "dataview" to instantiate a DataView control that is attached to this HTML element. The contents of the element will be used as the item template by the DataView control.
  5. dataview:autofetch. Set to true to enable data to be retrieved immediately after the page is loaded.
  6. dataview:dataprovider. Specify the URI of the Web service that is called to get the data.
  7. dataview:fetchoperation. Specify the method of the Web service that is invoked to get the data.
    Note:
    
    Optionally, include a dataview:selecteditemclass attribute and specify the CSS class to apply to individual data items.
  8. Inside the block element, create a single child element that defines how individual data items will be displayed.
  9. In the child element, specify the following:
  10. sys:command="select". This configures the element so that when a user clicks the item, the select command is raised and the DataView control selects the item and raises .
  11. An expression that specifies what data field to display, using the following syntax:
    {{ data-field }}


The following example shows how to configure a div element (with a child div element) as a master-view template for the DataView control.
   
  <ul id="companyListView" 
      class="sys-template"
      sys:attach="dataview"
      dataview:autofetch="true"
      dataview:dataprovider="../Services/CompanyService.svc"
      dataview:fetchoperation="GetCompanies"
      dataview:selecteditemclass="myselected"
      dataview:initialselectedindex="0" 
    <li sys:command="select">
      {{ CompanyName }}
    </li>
  </ul>

The dataview:dataprovider attribute identifies the Web service. The dataview:fetchoperation attribute sets the name of the Web service method that is used to retrieve data. The dataview:selecteditemclass attribute specifies the cascading style sheet class to apply to the list item when it is selected.

The list item (li element) contains a one-way, one-time data binding expression:
{{ CompanyName }} )
The sys:command attribute sets the select command, which makes the data item selectable. When the list is rendered, it will contain the names of the companies that a user can select from.

Defining a Detail-View Template

When the user selects a company in the master view, the selected data item is displayed in a detail view. The detail-view template is defined by using an HTML element, such as a div element, that has another DataView control attached to it. The second DataView control is linked to the selected data in the master view. The detail-view template element contains child elements that include data-binding expressions to display individual data-field entity values.

To define a detail-view template

  1. Create a block element and set the following attributes:
  2. sys:attach. Specify "dataview" to indicate that the element is a template for the DataView control.
  3. dataview:data. Specify a data-binding expression that indicates that the details-list template is bound to the selectedData property of the master-view DataView control.
  4. Inside the block element, create a child element for each data-field entity that you want to display.
  5. In the child element, use one-way, one-time binding syntax to specify what data-field entity the element represents.
    The following example shows how to configure a div element that has a child fieldset element as a detail-view template.
       
    <div class="sys-template"
    sys:attach="dataview"
    dataview:data="{binding selectedData, source={{ master }} }">
    <fieldset>
    <legend><H3>{{ CompanyName }}</H3></legend>
    <label>Contact:</label>
    <span>{{ Contact }}</span><br />
    <label>Url:</label>
    <span>{{ Url }}</span><br />
    <label>Income:</label>
    <span>{{ formatCurrency(Income) }}</span><br />
    <label>Expenses:</label>
    <span>{{ formatCurrency(Expenses) }}</span><br />
    <label>Net:</label>
    <span>{{ formatCurrency(Income - Expenses) }}</span>
    </fieldset>
    </div>


In the example, the detail-view template is defined by using a div HTML element that contains a fieldset element and bound data. Another DataView control is attached to the template. This DataView control is linked to the selected data in the master view by using the dataview:data attribute, which is set to the value of the master view's selectedData property, using live binding. The information that is displayed in the detail view includes the name of the company, the name of a contact person, the URL of the company's Web site, an income value, and an expenses value.

Example

The following example shows a complete HTML file that implements a master-detail scenario that uses inline expressions and live binding between the two DataView controls. For information about the Web service that is referenced as the data source in this example, see Walkthrough: Using a DataView with 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>
    <title>Master Detail</title>
    <script type="text/javascript" src="MicrosoftAjax.js"></script>
    <script type="text/javascript" src="MicrosoftAjaxTemplates.js"></script>
    <script type="text/javascript">
        function formatCurrency(value) {
            return parseFloat(value).localeFormat("C");
        }

function parseCurrency(value) { return Number.parseLocale(value.substr(1)); } </script>

<style type="text/css"> .sys-template { display: none; visibility: hidden; } .myselected { color: white; font-weight: bold; background-color: Silver; } </style> </head>

<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView">

<h1>Company List</h1> <div id="Div1"> <ul id="Ul1" class="sys-template" sys:attach="dataview" dataview:autofetch="true" dataview:dataprovider="../Services/CompanyService.svc" dataview:fetchoperation="GetCompanies" dataview:selecteditemclass="myselected" dataview:initialselectedindex="0" <li sys:command="select"> {{ CompanyName }} </li> </ul>

<div class="sys-template" sys:attach="dataview" dataview:data="{binding selectedData, source={{ master }} }"> <fieldset> <legend><H3>{{ CompanyName }}</H3></legend> <label>Contact:</label> <span>{{ Contact }}</span><br /> <label>Url:</label> <span>{{ Url }}</span><br /> <label>Income:</label> <span>{{ formatCurrency(Income) }}</span><br /> <label>Expenses:</label> <span>{{ formatCurrency(Expenses) }}</span><br /> <label>Net:</label> <span>{{ formatCurrency(Income - Expenses) }}</span> </fieldset> </div> </div> </body> </html>