Master-Detail Views are very common in data-driven Web pages. These views are used for rendering one-to-many relationships. ASP.NET Web forms provided the strong server controls like grids,lists and drop-down lists which supports the multiple levels of data.
In Master-Detail View we normally navigate among master records and drill down into the details of the records that are of interest. In classic Web forms we need trigger many post-backs which most of the users are not happy these days.
This post explains about building a Master-Detail View using ASP.NER AJAX Library.
The DataView Client control is the fundamental tool for building master-derail views in ASP.NET AJAX and it can be used to generate both Master and Detail views.
Basic steps to build the Master-Detail application using ASP.NET AJAX
1. Create markup for the master and detail views.
2. Attach the DataView control to each view.
3. Use data-binding expressions to populate the data to the controls.
Building a Master View
1. In order to use the dataview component we need to load the scripts in the ASP.AJAX library as shown below
<head runat="server"> <title>Master-Detail View</title> <script type="text/javascript" src="Scripts/Start.js"></script>1:2: <script type="text/javascript">3: Sys.require([Sys.components.dataView, Sys.scripts.WebServices]);4:</script>
</head>
2. Once the required scripts are available two namespace prefixes must be defined within the HTML document.
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView"> </body>
3. The Master view markup
<div id="masterview"> <ul id="master-view" sys:attach="dataview" dataview:autofecth="true" dataview:dataprovider="/service.asmx" dataview:fetchoperation="GetCustomers" dataview:fetchparameters="{{ {query: 'A'} }}"> <li> <span sys:command="Select"> <span> {binding CompanyName} </span> , <span>{binding Country} </span> </span> </li> </ul> </div>
The body of the UL tag binds the fetched data using web service. We have used the ASP.NET Ajax Library live-binding syntax.
4. The Detail view markup
<div id="DetailView" sys:attach="dataview" dataview:data="{binding selectedData, source=$masterView}" > <table> <tr> <td> <b>Contact</b> </td> <td> <input id="contact" type="text" sys:value="{{contactname}}" /> </td> </tr> <tr> <td> <b>Address</b> </td> <td><input id="address" type="text" sys:value="{binding street}" /></td> </tr> </table> </div>
The data property of dataview used an expression where the values come from the object named master View.
This post explained, how to configure dataview control to support auto fetching. Dataview object is responsible for triggering the specified fetch operation after initialization.
| Share this post : |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
