Best way to do paging in a .NET page

Question

Hi, Hope you are having a great day.

I have a page where I let users browse related items (photo albums) posted by other users. I show the album thumbnail, title, author, ratings views and category for each albums.

Now the number of related items can get large say 500 photo albums is related to a album user is viewing. I just show first 20 and drop a link saying 'View All'

Once the user clicks View All I take him to a page where I display 50 items per page.

Option 1: using a repeater\grid control When user clicks a page I get the right items (using sql) and bind the result to the grid The page is refreshed and user sees new page. So one big request and user sees all thumbs.

Option 2: when user clicks the pager I use Ajax to get the thumbnail file name, title, rating, author etc. Then I build the grid manually and set the src attribute of element using javascript Then I append the resulting grid to a div. User sees the new grid without page refresh.

My concerns: I have the thumbnails and all image files in file system (not database) In second approach javascript will send 50 separate request to web server to get the image files. This will cause a lot of requests on the web server. Large concurrent users will flood the server with image file requests.

What is the best & efficient way to do paging and storing user files?

Is my app going to die by putting the images in file system since the app should handle millions of photos?

Answer 1

Definetely you shouldn't use Option 1 since it would take a lot of time for the page to load

Aldso the second alternative id not so good either.

You can use your GridView/ListView control but use server side paging to get the data. This way you could load only the information that is needed per page.

You can see how to implement a stored procedure for server side paging here : http://www.sqlteam.com/article/server-side-paging-using-sql-server-2005

Then you can bind the individual page the PageIndexChanging event handler of your Gridview so only the page that is needed is actually loaded.

Answer 2

If you aren't already using one, a CDN (content delivery network, like Amazon S3 etc) will help (so you can download from multiple places concurrently).

Also, instead of requesting one image, request a page from the server. Let the server decide how many images to return.

You could try some css sprite techniques.