Using the ASP.net Ajax Library master-Details view

When you refer to a data-driven Web page, you tend to think of a master-detail view with some cross related data. Master-Detail view is ideal for rendering one-to-many relationships, which are quite common in practice, but the WEB platform is not suitable for this feature because it does not have a valid toolset to implement this feature.

asp.net Web forms always provide powerful data-binding support and a powerful set of data source and data-bound server controls. In Web forms, server controls can effectively render the hierarchy of data by using almost any combination of grids, lists, and Drop-down boxes, and by supporting multiple levels of nesting.

The flaw in the view generated by the Web Forms server control is not the rendering effect, but the static situation.

When users browse the master-detail view, they typically switch between master records and learn more about the records in which they are interested. This interactive feature is the essence of the master-detail view.

In a typical Web forms scenario, each drillthrough operation can trigger a postback. Many postback and subsequent page reload operations are now dissatisfied with the user.

Although there are alternatives, there are flaws. This workaround mainly includes the preload of any possible data that the user might want to see. You can then download the data in a standard page and hide them using CSS styles. Also, rewrite any handler for the user action to expose the hidden content rather than triggering the postback. As you can see, this is not easy.

The ASP.net Ajax Library and jQuery collaboration provide a more powerful toolset that allows you to write a fluent, effective master-detail view that can be asynchronous postbacks and perform postbacks only when it is a last resort.

Hidden features of DataView controls

The DataView client control is the basic tool for building the master-detail view in the ASP.net Ajax library. This control provides unprecedented flexibility in terms of functionality and layout, in conjunction with the Sys-attach functionality and real-time binding of the ASP.net Ajax library. In particular, the DataView control can be used to generate master and detail views.

To use the ASP.net Ajax library to lay out the master-Details view, you need to perform three basic steps. First, create a tag for the master and details views. Second, you attach an instance of the DataView control as a behavior to each view. Finally, use real-time bindings (or just plain data-binding expressions) to populate the visual layout portion of the detail view with new data. Note that the creation of all templates, bindings, and components can be done using code declarations and Code commands. Let's give you a simple example to help you familiarize yourself with the methods and tools available.

Building a simple master-details view

The following is a simple layout of the master-detail view. It is composed mainly of two DIV tags. The Master div contains a unordered list of items, and the detail div contains the child tables:

<div　id="masterView">
　 <ul　class="sys-template">
　 ...
　 </ul>
</div>
<div　id="detailView">
　 <table>
　　 <tr>
　　　 <td>　...　</td>
　　　 <td>　...　</td>
　　 </tr>
　　 ...
　 </table>
</div>