To setup the sample, follow the below steps:
1) Have VS 2005 or Visual Web Developer and SQL Express
installed. Visual Web Developer and SQL Express are both free downloads and
provide everything you need to build, debug and run the application. You can
download them from here.\
2) Download this .zip file containing the sample. Expand it
into any directory you want.
3) Using Visual Web Developer or VS 2005, choose
File->Open Web-site and point to the root directory of the sample
sub-directory (the one with the files in it).
4) Select the “PagedData.aspx” file and hit run.
This will bring up a page that looks like this:
Figure 1
This allows you to query for lists by categories in your
database. The default database in the sample doesn’t have any list items, so
first we’ll want to create some. To-do this click the “Bulk Add” link.
Create a category called “test” and add 100 items to it.
This will create a bunch of sample data in the database that will help simulate
paging. Then repeat this with a new category called “test2” and add 10,000
items to it. Then repeat this with a new category called “test3” and add
100,000 items to it. Note that this last category will probably take a few
minutes to create (since the logic in my app is simple and just adds them one
row at a time).
Figure 2
Then click on the “Return to Paged Data Page” link and start
typing a search string in the textbox. Pause slightly after you type “tes” –
and then notice how the auto-suggest box will list the three new categories you
added:
Figure 3
These are being populated using the
<atlas:autocompleteextender> server control (which is hitting a
web-service on the server to lookup the available categories – and so will
return the three new ones we just created).
Search using “test3” (the one with 100,000 items), and
you’ll see this paged view of 100,000 items in the GridView:
Figure 4
Each page of the screen contains 15 items from the
database. You can switch around to see the different pages. Click the “…”
link to go to pages 11-20. Click “Last” to jump to the final page of data:
Figure 5
Note that as you choose the different pages, the only thing
that gets updated is the grid of data – the overall page does not refresh.
This is because the GridView control is wrapped using the
<atlas:updatepanel> control which allows incremental Ajax refreshes of
the page (no code required to accomplish this <g>).
Page back a few screens, and then click “edit” on one of the
rows. Note that you can now edit and update its items. You can also click
“delete” on a row to remove one. Both operations occur in an Ajax way:
Figure 6
