Use jquery and ASP.net Ajax libraries to implement prefetching patterns

Last month, I discussed how to implement the master-detail view with the new features included with the ASP.net Ajax library. This new set of features includes syntax for real-time data binding for clients and rich rendering components such as DataView client controls. By using these features together, you can easily build nested views to represent a one-to-many data relationship.

In the ASP.net Ajax library, the master-detail view mechanism is defined primarily in the logical code of the component, in the manner in which the DataView component handles and exposes its events.

This month I'll take a step further and discuss how to implement the "prefetch" of the Common and popular Ajax design patterns based on the ASP.net Ajax library. Basically, I'll extend the example of last month (a relatively standard view that drills down the customer details) to download and display the related order automatically and asynchronously, if one exists. In the meantime, I'll talk about some jquery-related issues and learn about the new jquery integration APIs in the ASP.net Ajax library. Less gossip, let's look at the context and build the first version of the example.

The demo to extend

Figure 1 shows the application scenario that I will base on to add prefetch functionality.

Figure 1 The initial phase of the sample application

The user can filter the customer by the name first letter by the menu bar. When you make a selection, a smaller list of customers is displayed through an HTML bulleted list. This is master view.

Each item that is rendered has become a selectable item. Clicking an item causes the customer's details to appear in the adjacent Details view. I discussed it here last month. As you can see in Figure 1, the user interface now displays a button to view the order. I shall now proceed to the discussion from here.

The first decision to make is about the architecture and the use case to consider. How do I load order information? Has this information been downloaded with customer information? is the order attached to the customer? Do you have the option to defer loading here?

The code we consider should run on the client, and therefore cannot rely on deferred loading capabilities built into certain object/relational modeling (O/RM) tools, such as the Entity Framework or NHibernate. If the order is to be deferred, all code will be done by you. On the other hand, if you can assume that an order is already available on the client (that is, the order has been downloaded with customer information), you have done most of the work. Next you simply bind the order data to an HTML template and execute it.

Obviously, if you need to delay loading, things will become more interesting. So, we're going to take care of this scenario.

In addition, you should be aware that deferred loading is fully supported if data is obtained through the Adonetdatacontext object. (I'll discuss this in a future article.) For more information, be sure to view the asp.net/ajaxlibrary/reference.sys-data-adonetserviceproxy-fetchdeferredproperty-method.ashx.