How To Bind an AJAX Enabled Application to an Object Layer - ASP.NET AJAX

Now, that we have configured our object layer, let us build our application. We will bind our data to a user interface and then examine places where AJAX makes sense. Let us go to the product catalog page. Makes sure you are in design mode by pressing the design tab. Of course, in order for our page to work with AJAX, we will need an instance of the script manager or AJAX extensibility controls are available for us right within our tool box. We can just take the script manager and drag it on to the form. Now, to improve our layout, let us go ahead and add a table. Navigate your cursor down and select layout, insert table. We are going to add three columns and two rows. Now, that we have our layout press okay, let us to add some bindable controls. Let us navigate to our source mode and inside our first table cell let us go ahead and drag over a drop down list.

Let us change the name to drop down this sub-category. This will present a list of choices for the user to select from. We want to do a pause back here so let us select the auto pause back option and set it to true. As you can see, visual studio automatically added the quotes in for us because we select that in our options. Let us go to design mode. Using the smart task select, choose data source. We can choose from a variety of data sources, let us choose new data source. Let us experiment with working with objects, and object could be a web service, it could be a class that you created, or in our case is going to be the table adaptor that we pre-created. Let us give it a more meaningful name, change it to object data source sub-categories. Select okay, now we choose a business object, in this case we have the products in sub-categories table adaptors.

We will choose the products sub-category table adaptor, select next. For the method, we want to choose the only one that we have, get sub-categories, select finish. Now we can select the field to display, we will choose name, for the data filled for the value, we will keep ID. Select okay, save all your changes. Let us take a look at what we built so far in the browser. Right click on product catalog and select view in browser. Say yes to save all your changes. As you can see our drop down list goes through our object layer and connects to the database of bringing back data. If you look carefully at the bottom of your screen you will see the progress bar pop up. This means that the page is doing a pause back and going to the database each time. We are going to change this behavior by using AJAX.

Let us wire up one more control before we AJAX enable this application. Go back to visual studio and go to your source mode, navigate your cursor inside the second cell. Now, we are going to drag over a grid view to display our products. From the data tab, select grid view and drag that inside the cell. Let us give it a name, grid view products, go back to design mode to configure an object data source. Click on the smart task and select choose data source. Select new data source and select object, give it a name, object data source products, select okay. For the business object we will select our products table adaptor and select next. For the method we choose to use let us select get products by sub-category, select next. Now, Visual Studio will prompt us for how we wish to populate the input parameter.

This is one of the most beneficial productivity enhancements in visual studio 2005. The designer will automatically iterate that your entire form and find bindable controls for you so you do not have to worry about remembering a particular name. If you select control as a parameter source, you will be able to see a list of controls that are available. We want to use the drop down to this sub-category. This comes in handy when you have dozens of control on your page. This is why you should also give meaningful names to your controls, select finish. Now our two controls will communicate with one another. For the grid, must enable paging and sorting. We will set page size to be five. In your properties window, replace to ten with the five. Let us save all our changes. Now let us go to source mode. Inside each section we are going to add some time date stamps so we can see what happens when we start controlling the return trips to the server. We are going to use label controls to manage our time date stamps. The first one we will add will be right below the script manager.

Navigate your cursor below the script manager and drag over a label control. Let us change the name to label time, refresh page. This will indicate the last time that the entire page was refreshed. Our next time date stamp will go with the dropped down list. Right before the closing tag, drag over another label control, name this one, label time refresh DDL for drop down list. And lastly, we want to mark the time that the grid gets refreshed. Navigate your cursor right after the closing grid view tag. Drag over a label, name this one, label time, refresh grid. Go to design mode, double click on your form to get to the page load event. Inside the page load event which will be called every time the page gets refreshed, let us set times on the labels. We actually have a snippet to help us with this.

Let us go to our snippet directory. Inside your code snippets directory, you will see a file called general snippets; double click that to open this. At the top of it you will see some label time refreshed snippets, copy those in the memory and go back to visual studio. Inside your page load event, paste the snippets. These snippets save us a bit of time in creating the text of each label. We just indicate what was just last refreshed as well as the date and time that it was refreshed. Save all your changes and let us close some of these files.

Now, right click on the product catalog and select view in browser. Select retry to refresh your page, press F5 to keep refreshing the page. As you can see, all the time date stamps are consistent, meaning that every time we pause back the entire page is being refreshed. We do not necessary want this drop down list to be refreshed every single time, after all, the sub categories will probably not change that much. This is a classic case where AJAX would really come in handy. So let us find that how we can reduce all those network trips. We will see how partial page rendering works. Close the application.