Video: How Do I: Implement the AJAX Paging Pattern?

Presenter:Joe Stagner

In this video we see how to use ASP.NET AJAX to implement the paging pattern, which enables the ASP.NET application to present a large amount of data as being separated into smaller “pages” of data, and allow the user to move forward and backward among the pages.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

In this video of demonstrated implication of Ajax pacing pattern using the ASP net extensions for Ajax from users for its perspective the interface for the Ajax paving pattern is relatively simple will have an area of content that becomes a single page window into a larger document like a magazine article with some forward and back navigation buttons at the user can click on to fetch either the next page of the article or the previous page in your article depending on what the current page to the user looking at us the logic behind including a VHS video pattern is little but more complex though the pacing pattern is actually a composite of of several patterns but namely the predicted such pattern for caching pattern and these are necessary so that when the users navigating through the article they don t have to wait for the server to return the page they ve requested that on that moving forward to your article pages are predictably fetched and backing up a

Minute 1

Is looking at previous pages that have already viewed on the most previous pages than cash wealth of the invalid up to different state mechanisms one is the state of the chronology of the page so they re probably looking at what pace are currently looking at and in that state has some extrapolations winning which pages next which pages previous wheels of a second state mechanism that we need to implement so that well we re doing the fetching which is happening asynchronously and we can maintain the integrity of user interface that the user s overzealous clicking away the buttons doesn t corrupt the page they soaked system for complex logic are under the covers to the site with visual developer created new Ajax enabled website article page in

Minute 2

SOA do before you get started is to allow add some article data and cascading style sheets don t you grab a CSS file drop it into my solution that he doesn t as text files here and these text files contain just him if he stuck to see the market is a collection of paragraphs to sample data in this these four textiles represent a four page article from the drag those in my solution into the app_data folder that you can store your article data in a several ways I store them in text files here it is for them in axonal files original files you want a processing remember the that I could befuddle HTML pages are to be just document pages so as a position in our case it is the collection of paragraphs of paragraphs that have content to be displayed if you also stood in a database which will which would make

Minute 3

Exulted simpler in terms of things like figuring out how pages are in the article about a case of textiles we don t have to agree that fancy we can focus on the petition of the pattern rather than the details of parsing Appointment or a populating and retrieving articles database is that many here is a grenade a service to return the article pages else I m doing this with a HVAC service method is only one of the ways we could be getting content we can also we can also retrieve documents directly without going through a service demonstrate that in the upcoming set of videos but in our case were to use a service method and government is good behind and will call you are a service page fetch him as he remembers the

Minute 4

Is what this and the methods in this class to be a call from JavaScript me to decorate our class with the script service attribute and a next move a replaceable world with the page method and a get method is required to input parameters first and really the article number so it s the number of the article that we want to fetch anencephaly renewed the page number and so on which page of the article community fetch him of the hello world here and the other that so you have to watch the type of action that uses snippets will include a snippet in want to go just a second those distributors not recognized by default and that s because we have to import

Minute 5

based system I don t know if it look good so your input parameters we have a just a demo for string for Arab agnostics would come up this path to contain the path of the other content as they contain the contents the HTML markup don t applaud the text file of note here that I m building the path to the file that contains the article page that we won out on the we will return something about half of all the files of the output for data folder I m starting with the article number adding_than adding the page number and then appending txt to the file extension and you ll note that that s the file format so I m using the file names on that count that as the arguments that will be required by the Web service don t know is what 234 is the

Minute 6

Article number is the_the repented and that one is the page number in the txt or so and then we re doing a more doing here is the first am doing is actually open and read the article on putting the thread to sleep for two seconds and you obviously don t want to do this in your application the reason I m doing it is because my service is running on the same machine as my browser the responses to click by one below demonstrate that second state mechanism I was talking about a month that basically freezes the new user interface of the of the the critic don t start of the paging pattern sedimentation while the network call is taking place so that we ll corrupt the page to such as this and other threads we call us just for demonstration purposes you re a try catch block is open up a stream reader stuck in the contents of the file we just opened and closed it and return the contents of the service however this exception handling

Minute 7

Is a really important here and we ll will all show you we get into the Java script logic but I ve do if I want to do all some more detailed error handling here in our case we are assuming that when ever the read fails that this is because the document doesn t exist you might want to be something to do something so bit more detailed here may be checking for permissions error in or what have you with their were just assuming that if the is the refills is because the filename doesn t exist and I were returning this string literal EOA for end of article and were to use end of article as part of her state mechanism might so now ready to go ahead and start programming over on the client successes we have a client side is to include a reference to your cascading style sheets we can use the classes that are defined there

Minute 8

That s the irony is an area that the user can enter the article number into an click of a button to retrieve the first page of the article that I specify so school is bad that and remember we want to do this from not using a aesthetic server side controls but instead using HTML artifacts because going to be doing all the heavy lifting in the supplementation using JavaScript rather than a VB or see sharp code behind so will add an additional text box and external gotten who collect text article number ninjas for money fan out there that takes issue with my seemingly random naming conventions I ll call the

Minute 9

Button article by number and lets him in him change the value to fetch a was just a little audible horizontal rules here just to delimit next will use this to give as the container for our page so so we can program against the JavaScript lets a given identity and will also give us a visual aesthetics by signing a stylesheet class and a

Minute 10

A scenario who also had a fit if the audit labels here it will fundamentally manipulate them from client side code or so of goods do that here and what these are just amused distributed some header information to vital feedback to the user so this is where we ll say for example audio page 1 of six source call the first one labeled page title will close for the current page in a close one labeled

Minute 11

Page of in and remove them and leave them empty by default will populate them from JavaScript code in okay unless they really need is for new navigation buttons so daily news HML and not server side controls for this suzerainty are previous and next buttons and and the values is set to previous

Minute 12

Inch and next tapes and and and and and and and and and and what is going to hear is a must set these buttons to disabled by default in the resort would do to us is that enabling and disabling these buttons is Howard and prevent the user from interrupting the asynchronous calls in confusing the state of the page of the Whitmore says once we have to get to the implementation or so his or her age and years or are her buttons which are disabled by default know we go ahead and start programming the JavaScript

Minute 13

Can of our page soon to get started on a double click on our article fetch button which will shell out the script code section for us and let us gives very to start writing JavaScript to begin with grenades and local variables and we can use to managed the soon start with a couple of variables that will be buffered page is so page buffer a the the article page that were protectively facts of users looking at one article reflects an excellent as well to have one for the previous page to the user has look at the page forward to the next phase will really keep the pace of the just looked at around in the cash for a little while this is how I know I mention that this is implementation of walkable patterns including the caching pattern and the predictive fetch better

Minute 14

Is the current page indicator and a then will this was the one because once in the first phase of the fetch a little slow last page indicator reset the value to minus one because of the way that were storing article pages as text files we will actually know what the last page is until we try to fetch another page and get a failure so also something to contain the article number in these action only the function that would be up here and now we can put them are powered a good article by number on click event in so that you have to watch me type all this up by him and he s a magic of cut and paste

Minute 15

Will explain all of the code so users enter the article number and click on the fetch button in first ever doing here is just setting up the the civil labels on the page to know we can add the the page header and remember we don t know what the how many pages there are so labeled page of the still going to Blake and then we can specify what the article numbers couldn t be because that s been retrieved because of the current page which is good equal to one by default and then we can fetch the first page of the article that was just enter or so once we ve done that and remember that this get page is not a direct call to our service method but in fact is a call to the D JavaScript callable proxy to that service

Minute 16

Often even watching the other highlight videos site are often don t go to the detail about how that works but it is the if you know what I m going to check out some of the to the previous highlight videos on productively on of a particular service calls to understand what actually happens under the covers but here s the first are the first input parameter the second input parameters are article number and page number and then here are the other input parameters are required by the proxy and that is what JavaScript functions to call on successful completion if there s a timeout or if there s an error in out for typos and errors and I just go a block of error handling functions notice only those pop up alerts and obviously your production code you may want to do something something a little more creative than pop up alert to specify that there was an error but for the purposes of our demo is actually what is

Minute 17

The one complete a function so if the it when page get a complete successfully will call this function in then we re doing here is we re saying over this and this and this gets called when the user has a good article number of the fact that in the first pages retrieved in what happens is either if there s an if there was an error meaning the article probably doesn t exist since all on current complete happens inside the click event handler for the fetch button which means that will try to fetch the first page of the entered a

Minute 18

Goal if we could ever hear that likely means of the article number that was entered is invalid there s no article that matches that number so if we get that end of article indicator reset all of the header labels equal to the a empty strings only provide an error messages is invalid document number or otherwise we successfully retrieve the page and were new to it we got back from the service call which is the first page with a stick it into the iteration will element of the page to give and then were in a predictably fetch the next page So we re notice working the same article number or same God sets to a current page plus one and now we have a different on completeness and

Minute 19

Is so him a predictably fetching up again if we are particularly fetching and we get an EOA returned from our service method that means that we found the last page scilicet the last page equal to the current page 1 is being displayed and now we can specify the additional label the top so you say we don t pay for one of two for example if we can get the end of article that means that we successfully retrieved article sort of a take the results from that service method and put that which is the agent notes returned from the article file backup server will put the values of this return them back into our page buffer_next variable so that it s just sitting there waiting for when the user says I was in the next

Minute 20

Each monopoly for service called return because we ve already made the service call for that page number in an essay button next and disabled is equal to false and button previous disabled vehicles also return those buttons back on and now that we knew that it was for our previous and next buttons okay Senator next button on the killer first they really do note is that we turn to

Minute 21

For the buttons off were trying to prevent here is that users have just rapidly clicking away on the next the previous buttons sold him what happened when the user clicks on the next button first derivatives turn those buttons off with them to take the take a predictably fetched page put that into the death and then we re going to go fetch the next page and it s not until we fetch the next page they were to return those buttons back on pixel will we don t want to happen is you want the user to to rapidly click on the previous or next buttons and cause the paper page counter to fall out of steak with what s being returned back to the server in this case were saying if the current page is equal to the last page than welcome to fetch anything or just a new set previous disabled equal falsity to say the last day so who were allowed to back up if they re not to be able to go forward because there are real

Minute 22

Page rise from the current page is not the last page and so that will reduce or save the current page into the previous buffer for new put the predictably fetched page into the page you didn t increment the current page number because group were moving forward is so dissident as the user clicked on the few next page in no no the page counter the label and then we re going to fetch the next phase of this so this productive this is of the second implication of the effect remember the predicted that happens here when the first page is retrieved to go and fetch the second page now the user is navigating and because a navigating organization go ahead and go ahead

Minute 23

And display the page is in Crawford and fetch the next page the user might well look at similarly with the navigating previously viewed pages and you say simple buttons to disable if the current page is not greater than warned that means that were on page 1 so where does Canseco hadn t turned the next button on the front page when there s no previous page to go to some of the current previous turn the previous button on an otherwise oriented buffer because were backing up for in a bar for the currently viewed page in the next buffer that were given display the page that store the previous buffer we re back with the page

Minute 24

Set the page said the page number label of its at the top of the diff and then if appropriate and after we ve decremented a page or a check to pay the current page number can find out if there is a previous page and if there is a previous page then we re going to the or ineffective and intense enable a button navigation button by such is the inverse of what we did we were moving forward one other thing we need to do here is it one more event handler when you on complete previous method

Minute 25

And then or just go store the result is returned from service methods in the buffer so that it s ready if the user navigates in that direction and then enable the button of course everyone will call it who accused a JavaScript calls to successfully him call our service method get page when you just tell the script manager to were to be calling them so let s go find a script editor and a services collection to the script editor and then at Ace

Minute 26

Reference to a a then going to try to in the article number 1234what appears but the buttons they great for just a little bit said the page toto appears instantaneously with its a second before it are the buttons get the buttons reappear so that each time as I click a button the page that I m specifying I want to view appears immediately but takes a while before the page catches up and that s the latency for the service method call that were calling in the back of your JavaScript so to semantic that

Minute 27

All takes to intimate the paging pattern in Ajax using McCarthyist unit extensions for Ajax to great way to really improve the aesthetic performance of your Ajax based user interface

Click here to go to original video page