Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 02, 2010 @ 15:01
    Jeroen Breuer
    0

    Xslt paging vs UserControl gridview

    Hello,

    I just created an xslt with paging. I used the example at http://www.nibble.be/?p=11. Now that's it's finished I'm not really happy with it. If I had build this xslt page in an UserControl with a gridview paging would have been a lot easier. It would need a lot less code to produce paging and I could use ajax updatepanels to create smooth paging (instead of a full postback with an extra querystring as in xslt). Now is my question: For the next time I create a page with paging what should I use? I just read data from umbraco.config so xslt would be perfect, but the paging is done much better in a UserControl. I'd like to hear other people their opinion.

    Jeroen

  • Petr Snobelt 923 posts 1535 karma points
    Mar 02, 2010 @ 16:27
    Petr Snobelt
    1

    It depends on scenario.

    Default gridview paging isn't SEO friendly, uses viewstate and don't work without jscript, but is easy to develop.

    XSLT paging is harder to create, but it should be seo and no-javascript friendly. You can try use some jquery plugin to do paging with ajax bor better user experience.

     

    Petr

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 02, 2010 @ 16:29
    Jeroen Breuer
    0

    Thanks Petr. Do you know where I can find a sample of xslt paging in combination with jquery? It sounds interesting.

  • Petr Snobelt 923 posts 1535 karma points
    Mar 03, 2010 @ 12:10
    Petr Snobelt
    0

    Hi try look at http://trirand.com/blog/jqgrid/jqgrid.html for example, it has option to load data as xml

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 03, 2010 @ 12:25
    Jeroen Breuer
    0

    Thanks for the example. Is there somebody else who would like to give the pros and cons?

  • dandrayne 1138 posts 2262 karma points
    Mar 03, 2010 @ 12:56
    dandrayne
    0

    +1 got the xslt paging example, and I think that having the page number in the querystring is better from both an seo and usability perspective.  "Power users" may want to jump to a particular page by adjusting the querystring, and googlebot will know that they are different pages based on the url.

    Dan

  • Dan 1285 posts 3917 karma points c-trib
    Mar 03, 2010 @ 13:30
    Dan
    0

    I'd avoid using javascript for paging.  It can be quick and easier to set up than XSLT paging, but has accessibility issues, usability issues and will increase the load time of your page for potentially no reason i.e. if someone just wants the first page, they're forced to have all of the records loaded but hidden.  I recently built a simple XLST paging script and keep meaning to blog a simple tutorial about it - must get around to doing that!

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 03, 2010 @ 13:53
    Jeroen Breuer
    0

    I created a usercontrol which fetches the new rows on each postback (so it doesn't load all the records). With this I can combine nice ajax paging and I create fast paging because only the displayed rows are fetched. In my opinion it has both advantages of xslt paging and javascript paging. Only problem is the SEO.

  • Jesper Hauge 298 posts 487 karma points c-trib
    Mar 03, 2010 @ 13:58
    Jesper Hauge
    1

    In this page: http://www.petersen-tegl.dk/referencer/liste.aspx i just list out all the references with xslt, and then create a paging table with jquery table pager: http://slashjquery.com/tablepager/index.html

    Pros: It's SEO friendly, and i doesn't break without javascripts, just displays a long table

    Cons: It displays a long table which might collide with page layout.

    Regards
    Jesper Hauge

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 04, 2010 @ 08:14
    Jeroen Breuer
    0

    Thanks for all the great tips! I guess you can use xslt paging and UserControl gridview paging for different situations:

    Xslt paging: If the data is stored inside xml (umbraco.config) you should use xslt paging.

    UserControl gridview: If the data is fetched directly from a database (like products of a webshop) you can fetch them in C# and use a gridview on a UserControl.

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    May 10, 2010 @ 09:22
    Jeroen Breuer
    0

    I'm starting a new project were I need paging again, but I'm not sure which approch is the best right now. I'm going to use XSLT paging, but I'd like the possibility of using a querystring for making it seo friendly and also use javascript for making it user friendly (like an ajax updatepanel). Should I do full postbacks with a querystring, use javascript for paging or is there a good combination for both of these?

    Are there perhaps some new blogs about this or does someone have more good examples?

    Thanks

    Jeroen

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    May 10, 2010 @ 09:44
    Matt Brailsford
    1

    Hi Jeroen,

    Incorporating jQuery into the XSLT paging can be pretty easy. One way I have done it before is, for the page with the paged list on, create a second teamplate in Umbraco that ONLY outputs the contents of the paged list and associate it with the Document Type for the page. You can than use jQuery to automaticaly attach a click event to the pager controls to load the content of the page, using the new template (Read more on how to do this here http://www.nibble.be/?p=42) and then just replace the lists html with the result.

    I'm sure there are other ways, but this has worked well for me, as it works fine without JS, but you get an "enhanced" experience if you do have JS. Just the way JS should be.

    Matt

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    May 10, 2010 @ 09:54
    Jeroen Breuer
    0

    Hi Matt,

    I'm not sure I follow you. You use a different template for paging? That's a complete different approach from Tim's example (http://www.nibble.be/?p=11) right? Do you have some examples or some code how you do this? It's seems like an interesting solution.

    Jeroen

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    May 10, 2010 @ 10:06
    Jeroen Breuer
    0

    Just had a tweet from Warren about using /Base with jQuery.load. Not sure how that works. Can someone provide me with some samples of this?

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    May 10, 2010 @ 10:16
    Matt Brailsford
    2

    Sure, I'll send you a link shortly (Sorry I can't put it on here, but the sites not live yet).

    But the main Idea is to develop the paged content as usual just using XSLT. Once you have this working, you basicaly create a new template which is basicaly a "cut out" of the html for the page content block, ie:

    StandardTemplate

    <html>
    <head>...</head>
    <body>
    <div id="page-content">
    ...
    </div>

    </body>
    </html>

    AjaxTemplate

    <div id="paged-content">
    ...
    </div>

    If you now assign both these templates to you doc type, you can switch templates simply by modifying the url as in nibles example. So, say you have the URL:

    http://www.mydomain.com/paged-content.aspx

    You can get jQuery to grap that URL, add the template on to the query string

    http://www.mydomain.com/paged-content.aspx?alttemplate=ajaxtemplate

    And use the jQuery load command to load the content into place:

    $("paged-content").load(ajaxUrl)

    Do this for all the pager controls, and you paged list is now jQuery powered.

    Cheers

    Matt

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    May 10, 2010 @ 10:19
    Matt Brailsford
    0

    Do, the second url got modified for some reason, it should read:

    http://www.mydomain.com/paged-content.aspx ? alttemplate=ajaxtemplate

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    May 10, 2010 @ 10:38
    Jeroen Breuer
    0

    Wow this is great! This is a brilliant combination of Umbraco templates, xslt and jQuery. I've got 1 final question. Is this also seo friendly? Can the pages also be viewed by changing the querystring manually? I tried it on the link you sended, but couldn't get it working. Maybe I did something wrong?

    Thank you Matt for all your help. I'll mark your post a the solution :).

    Jeroen

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    May 10, 2010 @ 10:54
    Matt Brailsford
    0

    Ho Jeroen,

    It should all be SEO friendly as the jQuery is an unobtrusive extension. Without JS, it falls back to the regular XSLT paged content (ie, using the querystring to change page). Modifying the url should also work (Just add ?page=n on the end).

    Many thanks

    Matt

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    May 10, 2010 @ 11:06
    Jeroen Breuer
    0

    Hi Matt,

    You're right. I've tested it and it's also SEO friendly. This means it's perfect! Now all I've gotta do is try the same thing for the ASP.NET Gridview in UserControls (for when the data is not available in xml), but that´s another story :).

    Jeroen

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    May 10, 2010 @ 11:09
    Matt Brailsford
    0

    Glad I could help.

    Matt

Please Sign in or register to post replies

Write your reply to:

Draft