Implementing Paging in the ADO.NET Data Services Application

The current version of ADO.NET Data Services lacks a method for obtaining a count of records in a database table.  Such a method will be included in the next version, which is expected to be released this autumn.  In the meantime, this lack constrains the kinds of paging that can be used.  For this project, I just added a couple of hyperlinks to the tfoot section of my Presenters table, one with an id of PreviousPageLink, and the other with an id of NextPageLink.  In my stylesheet, I set the PreviousPageLink to float left, and the NextPageLink to float right.  For the first time in this project, I then had to write my own javascript.  I wrote a function that would be raised by the init event, and added handlers for clicks on PreviousPageLink and NextPageLink.

PagingScript

These handlers call the PreviousPage and NextPage functions respectively.  These two functions are very similar.  Since the DataView that displays the information about Mix presenters is an ASP.NET AJAX component, it takes the id of the DOM element to which it is attached, and can be found using ASP.NET AJAX’s $find method.  To make the Data Service return the correct page of data, we set two fetch parameters.  We saw fetch parameters in my previous post, where they were set with an attribute of the html element to which the DataView was attached.  In that case, we used only the $top parameter, which tells the Data Service how many records to return.  Now, in addition to $top, we are using $skip, which tells the Data Service to skip over so many records, and then return the number of records specified by the $top parameter.  The number of records to return at once is specified by the global ItemsPerPage variable.  The global CurrentPage variable keeps track of which page is currently being shown, and is used to calculate the value of the $top parameter.  Once the fetch parameters have been set, the fetchData method retrieves the required data and inserts it into our table.  The value of CurrentPage is then increased or decreased as appropriate. 

The only significant difference between the NextPage and PreviousPage functions is the existence in the latter of an if statement to determine when the first page is being displayed.  As mentioned above, ADO.NET Data Services has no count method, so it is impossible to know when the last page of data has been reached.  To get around this problem, I added an attribute in the html that adds a handler to the DataView’s fetchsucceeded event:

FetchSucceeded

This calls the Succeeded function in the javascript above.  The data returned by the fetch is stored in the args object, and can be accessed with the get_result method.  If the length of this result is zero, I just call the PreviousPage function.

The result:

PagingDataView

Accessing an ADO.NET Data Service with ASP.NET AJAX Part II

The best way to access an ADO.NET Data Service from an Ajax application is to use the ASP.NET AJAX 4 preview, which is available here.  The javascript files then need to be copied into your website, and referenced in your webpage.  I used the debug versions in this project.  Data from the Data Service can be displayed without writing a line of javascript.

SimpleDataDisplay

This about the simplest example of client-side templating.  Four additions have been made to a standard page of html.  First, the script tags on lines 6 to 8; second, the two xml namespaces and the sys:activate=”*” in the body tag on lines 10 to 12; third, the parameters in the tbody tag on lines 27 to 32; and fourth, the binding expressions within the td tags on lines 34 to 40.  For your own project, the Mix.svc on line 29 must be replaced with the name of your own service.  “Presenters” on line 30 must be replaced with the name of the table you wish to display on the client.  On line 31, $top is one of several possible fetchparameters.  This one tells the Data Service how many records to return.  On lines 34 to 40, the words following each binding correspond to the names of the database fields that will be displayed.  This code, together with a stylesheet, produces the following result:

FirstTable

The styling for the table is based on a gridview on Matt Berseth’s website.  To avoid adding to the markup, I omitted the rounded corners.

In my next few posts, I will extend this example.

Accessing an ADO.NET Data Service with ASP.NET AJAX Part I

In this post, I describe how to get started with ADO.NET Data Services and ASP.NET AJAX.

If you have Visual Studio 2008 SP1, you have everything you need to create an ADO.NET Data Service.  I decided to make a website to show the speakers and sessions at Mix 09.  I created a standard ASP.NET web application called MixDataService.  I added a SQL Server 2005 database called Mix.mdf, and added three tables: Presenters, Sessions, and Links.

The Presenters table had eight fields:

  • ID
  • FirstName
  • LastName
  • Company
  • JobTitle
  • Email
  • Website
  • Description

The Sessions table had three fields:

  • ID
  • Name
  • Description

The Links table had three fields:

  • ID
  • PresenterID
  • SessionID

The database therefore allowed for a many-to-many relationship between presenters and sessions.  To create an ADO.NET Data Service, one must first create an ADO.NET Entity Data Model.  I selected Add New Item, and chose ADO.NET Entity Data Model, calling it Mix.  This starts the Entity Data Model Wizard.  In the first dialogue box, I chose Generate from database, rather than Empty model.  In the second dialogue, I selected the Mix database I had added earlier, and saved the entity connection settings in web.config as MixEntities.  In the third dialogue, I chose to include all my database tables in the model, and used the model namespace MixModel.  The program then generated the following model for me:

Model

The Entity Data Model having been generated, I could now create the Data Service.  I selected Add New Item, then ADO.NET Data Service.  I again used the name Mix.  I was then presented with the following code:

GeneratedCode

The TODO comments in the code give instructions on how to proceed.  Two changes need to be made.  On line 10, the comment needs to be replaced with the name of the entities generated earlier.  In my case, MixEntities.  By default, all access to data is forbidden.  To allow access, the access rules need to be changed, which can be done by uncommenting line 17.  For simplicity, I replaced MyEntityset in the above code with *, and AllRead with All.  This allows the client to make any changes to any data in the database.  This would never be appropriate for a public website, but it makes it easy to get started.  I hope to give more information about access rules in a future post.  Having made these changes, my code was as follows:

EditedCode

The service (in my case, Mix.svc) can now be viewed in a browser, and gives the following output:

ServiceOutput

For more information about ADO.NET Data Services, see, in addition to the videos mentioned on my previous post, the documentation on msdn.

ADO.NET Data Services and ASP.NET AJAX

I had intended my first post on my new blog to be a general comment on Mix 09, but instead I am going to concentrate on the ADO.NET Data Services framework, and the way it can be accessed with ASP.NET AJAX 4.  Until a few days ago, ADO.NET Data Services meant almost nothing to me.  I had seen the phrase, but ignored it.  Only when I noticed the presence of classes related to ADO.NET in the documentation for ASP.NET AJAX 4 did I realise that it might be of interest to me.  In particular, it was the existence of methods to filter, order, and page data on the server from the client that caught my eye.

Since my initial revelation, I have gone back to watch some of the videos of sessions on ADO.NET from Mix 08 and Mix 09:

The first of these sessions, by Pablo Castro, gives a good introduction to ADO.NET Data Services.  In the second session, by Mike Flasko, the demonstration of FreeNatal by Veracity Solutions is particularly noteworthy.  It is the most impressive ASP.NET AJAX application I have seen.  The third session, again by Pablo Castro, covers more advanced material.