Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Pagination with WebMatrix/Razor

pagination matrix

  • Please log in to reply
1 reply to this topic

#1 ufodisko

ufodisko

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 23 March 2012 - 09:02 AM

Hello,

I'm using WebMatrix/Razor along with the "Gallery Template" and I'm building up my site from there.

Now I'm trying to add pagination in the user's profile for the photos. I want to show 3 photos per page.
I have built the code but something is not right.

The code is fetching the number of photos per user and it is displaying the correct number of pages that need to be there but when I visit a user's profile, I get to see all the photos dumped on the first page and when I goto page 2 or 3, I still see the same images (all of them).

A little help here would be great.

The code is as follows.

@{
var db = Database.Open("PhotoGallery");
var pageSize = 2; 
var totalPages = 0; 
var count = 0;
var page = UrlData[1].IsInt() ? UrlData[1].AsInt() : 1;
var offset = (page -1) * pageSize; 
var id = UrlData[0].AsInt();
var user = db.QuerySingle("SELECT UserId, DisplayName, Bio FROM UserProfiles WHERE UserId = @0", id);
if (user == null) {
    Response.SetStatus(HttpStatusCode.NotFound);
    return;
}
Page.Title = "User - " + user.DisplayName;
var photos = db.Query("SELECT Id, FileTitle FROM Photos WHERE UserId = @0 ORDER BY FileTitle", id).ToList();
var sQS = "Select Count(*) From Photos WHERE UserId = @0";
count = (int)db.QueryValue(sQS, id);
totalPages = count/pageSize; 
if(count % pageSize > 0){
    totalPages += 1;
}
//var data = db.Query(sQS);
var sql = "SELECT * FROM Photos " + "Order By Id DESC OFFSET @0 ROWS FETCH NEXT @1 ROWS ONLY";
var result = db.Query(sql, offset, pageSize);
}



<!-- Small Gallery Content: Start -->
    <ul class="gallery small">
        <!-- Small Gallery Image: Start -->
        @foreach (var photo in photos) {
        <li data-type="buildings" data-id="g001">
            <a href="~/Photo/View/@photo.Id" class="">
                <img alt="thumbnail of @Path.GetFileNameWithoutExtension(photo.FileTitle)" src="~/Photo/Thumbnail/@photo.Id" />
            <span class="image-overlay">@Path.GetFileNameWithoutExtension(photo.FileTitle)</span>
            </a>
        </li>
        }
        <!-- Small Gallery Image: End -->
    </ul>
    <!-- Small Gallery Content: End -->
    <!-- Small Gallery Footer: Start -->
    <div class="padding">
        <button>Add Image to Gallery</button>
        <!-- Pagination: Start -->
        <ul class="pagination right nomargin">
            @for (var i = 1; i < totalPages + 1; i++){
            <li><a href="~/User/View/@id/@i" class="active">@i</a></li> 
            } 
        </ul>
        <!-- Pagination: End -->
    </div>

  • 0

#2 kernelcoder

kernelcoder

    CC Devotee

  • Expert Member
  • PipPipPipPipPipPip
  • 990 posts
  • Location:Dhaka
  • Programming Language:C, Java, C++, C#, Visual Basic .NET
  • Learning:Objective-C, PHP, Python, Delphi/Object Pascal

Posted 09 April 2012 - 04:32 AM

It seems you are showing all the thumbnails in the list. Why? I think you should get only those images for that page and show it. For that you should have a variable like currentPage (integer and zero index). Then you should code like follow...



@for (int i = currentPage*pageSize; i < ((currentPage +1)*pageSize)) && i < photos.Count; i++ {
var photo = photos[i];
		<li data-type="buildings" data-id="g001">
			<a href="~/Photo/View/@photo.Id" class="">
				<img alt="thumbnail of @Path.GetFileNameWithoutExtension(photo.FileTitle)" src="~/Photo/Thumbnail/@photo.Id" />
			<span class="image-overlay">@Path.GetFileNameWithoutExtension(photo.FileTitle)</span>
			</a>
		</li>
		}


Please have a look http://www.aspsnippe...Pagination.aspx . It seems pretty good. Hopes this will solve your problem.
  • 0





Also tagged with one or more of these keywords: pagination, matrix

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download