Paging with Webmatrix

[UFO Disko]

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>