Background

Let's say that you have some data that you want listed in your page in columnar fashion. Your data could be stored in a database such as SQL Server or even an XML file. There are many ways to achieve what we are set to do.

You could use a data grid to display the data but in this mini article I chose to use the ASP.NET Repeater control which gives me certain flexibility in formatting and at the same time not requiring extensive knowledge to do it. Simplest is better and especially when there are time and cost constraints.

For the data access we will assume our data is in an XML file and for easy access we will use an Object Data Source as a source of data to our Repeater. Our example has a page that lists a website's list of dynamic add-on modules.

The Object Data Source class

This is not to be confused with the actual ObjectDataSource control, it is a class that we implement and that has knowledge of the format of our data repository. In other words it would act as our data access class.

Our Object Data Source class (ODS for short) as depicted here, implements only the so called "select" functionality, in other words retrieve information from data storage. The Object Data Source object however is more versatile and can also include other databaase-like functionality such as Updates, Deletions and Insertions. We will concentrate on the Select functionality because all the others follow the same pattern, just different functionality.

The ODS class takes care of receiving the filter parameters for retrieving the data and retrieve it from the backend XML file. As I mentioned before you can access any type of data storage with your ODS, I chose an XML file.

The ODS we will implement is called AddOnQueryODS because it queries the XML data storage to retrieve a list of available add-ons. That simple it is.

Though our single method is called "Select", it can have any name such as GetAddOns. You can even have overloads with different parameters and select the right version for your page on the actual ODS control. Your Select method should return an IEnumerable type of value; we have chosen a generic list of items implementing the IAddOnInfo interface. This method will, based on the parameters given (or no parameters if you have a get-all type of selection, retrieve the data from the backend storage.

The object returned by our select method implements this interface (has been simplified for this example):

Now we have the lowest level of data access we need to be able to display the information we retrieve into a web page. We take care of that in our ASPX page.

User Interface - ObjectDataSource control

Toolbox

In Visual Studio open up the web form/page where you will make use of the Repeater and Object Data Source. In other wors the page that will be listing your objects, in our case the list of add-ons for the sake of an example.

On your left pane (default Visual Studio configuration) put the mouse over the vertical "Toolbox" tab (A), it will cause the toolbox to expand and show you all toolbox controls. Then in that pane that just opened go down the horizontal "Data" tab (B). In this Data tab go down until you find the ObjectDataSource control (C) and drag it to your ASPX page's design canvas (D). Give this control the name/ID "addOnDataSource". Also put a Textbox control with ID "textboxAddOnDirectory" in the same page.

Configure ODS

Having done this you will see an ObjectDataSource gray box control on your page (design mode) saying it is "unbound". You can click on the little ">" square (A) and in the resulting context menu select the "Configure ObjectDataSource" (B) to configure the ASP.NET Object Data Source control. Visual Studio will show you an easy to follow wizard to configure your ODS control.

ODS Wizard Step 1: Choose component

The first page of the wizard is titled "Choose Component" and it will automatically list in a drop down box all the business objects that qualify as an ODS. So if our AddOnQueryoODS class is in App_Code, or in a class library referenced by our web application we are all set. So, in our example we choose the Coralys.Web.Data.AddOnQueryODS class and click on the Next button.

Wizard Step 2: Choose Data Method

Choose Data Method

In this step you see four different tabs (A) for you to configure the chosen data method for each of the Select, Update, Insert and Delete operations, one for each. If your ODS is not implementing some of these then leave them blank. For example, our AddOnQueryODS class only implements the Select functionality so we leave the others blank (unconfigured) because we are only offering the capability of listing add-ons, not creating, deleting or updating them.

First you choose the right tab (Select, Insert, Delete, Update) and therein you select the method you choose (B) which will show you the signature of the method in case you have several overloads. All of these selections are based on the methods that your ODS class has exposed.

In our example we chose the Select(string parAddOnsPath) method of the AddOnQueryODS class we implemented.

Wizard Step 3: Define Parameters

Define Parameters

Last but not least, you are able to configure the parameters that will be passed to the method you chose in the previous step. If the method has no parameters you simply leave it blank (no parameters defined). Alternatively you can define some, our method requires one parameter which is the path to the add-on virtual directory.

When the parameters are defined they are listed on the left pane (C) and the method signature is shown below (C). To define the parameters you must first select the source of the parameters (A)as follows:

  1. None: The method has no parameters
  2. Form: The value of the parameter is an HTTP form (GET/POST) field
  3. Cookie: The value of the parameter is determined by a cookie of your choosing
  4. Control: The value is obtained from an ASP.NET web control, for example a TextBox. You must specify the Control ID (say, textboxAddOnDirectory) and the control property, i.e. "Text"
  5. Session: Value is obtained from a Session variable
  6. Profile: Value selected from an ASP.NET Membership Profile variable

You can optionally define a default value for the parameter (B). In our example this parameter is configurable pat runtime from a TextBox ASP.NET control in the same page, so we chose Control as the parameter source, "textboxAddOnDirectory" as the Control ID and "Text" as the control's property. We also specified a default value.

We are now done with configuring our Object Data Source web control which is tied via declarative syntax (or using the wizard) to our Object Data Source class (AddOnQueryODS). Now we need to be able to display this data (a list) in our web page. The markup would look like this:

User Interface - The Repeater Control

By now we have an ODS class that has methods to retrieve (and perhaps update, delete or insert) data from a storage location (database, XML file,etc.). We also have an ASP.NET ODS control which we have configured so that it knows it has to use our ODS class and the chosen methods (with optional parameters) to access the data. In this example these will give us a listing of IAddOnInfo

On the same page where we added our ObjectDataSource ASP.NET control that we configured in the previous section, we will add the repeater control. This repeater control is found in the same "Data" tab of the Toolbox where we found the ObjectDataSource ASP.NET control (see 2nd section).

Once added we will add the corresponding HeaderTemplate, ItemTemplate, AlternatingItemTemplate and FooterTemplate elements because we will use an HTML table to format our output. It would look like this:

In the markup we see that the DataSourceID attribute of the Repeater control has the ID of the ObjectDataSource control we added (and configured) on the page. We have also defined the various templates that the repeater control should use while rendering the data it has retrieved from the ODS.

In the HeaderTemplate is a non-repeating element we include the header of the tabular listing. Here we included the table declaration, the table head (thead) declaration and the opening of the table body (tbody) element.

The FooterTemplate is a non-repeating element contains the footer of the tabular listing, this is basically the closing of the table body element we opened in the header template and the closing of the table element.

Both the ItemTemplate and the AlternatingItemTemplate elements are repeating templates, in other words they repeat for each item in the list generated by the Object Data Source. We have used both so that the produced listing looks like those nice zebra tables with alternating row background colors. Both templates are almost the same only we have changed the Cascaded Style Sheet attribute for the standard and alternating elements. If you want a simple listing, omit the AlternatingItemTemplate.

By now you have probably noticed those mysterious "Eval" statements in the Item Templates, right? With it we are telling ASP.NET to evaluate the expression in the context of each the IAddOnInfo items retrieved by the Object Data Source. In this case the strings given to the Eval expression are the names of the properties of the object returned by the ODS item, do notice that these match exactly with property names we specified in the IAddOnInfo interface.

Closing Remarks

We have given a simple example of how to create your own Object Data Source class, couple it with an ASP.NET ObjectDataSource control and in turn make an ASP.NET Repeater control use the ObjectDataSource control to produce a tabular listing of some data in backend storage. This is a simple and versatile way of dealing with listings of data. Obviously it is not the only one available to us in ASP.NET but it was the one we wanted to introduce in this mini-tutorial.

Now it is up to you to make further explorations in the .NET jungle by finding out how to use ObjectDataSource events (such as Selecting) as well as several other features.


;