Programmer Dflying | Paging Your List Using ASP.NET Atlas PageNavigator Control

Paging Your List Using ASP.NET Atlas PageNavigator Control

Dflying | 17 April, 2006 23:33

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the third post: Paging Your List Using ASP.NET Atlas PageNavigator Control

Put all your records on one page will always be a bad idea especially you have hundreds of rows or more. Your user needs to scroll up and down the page, even uses Control + F to open a search box to find their interesting content. Some of the ASP.NET server controls have this functionality such as the DataGrid and GridView. And Atlas client side control Sys.UI.Data.DataNavigator also provides this feature on the client side, which is very useful and makes the life easier.

DataNavigator control works with DataView control (see: Introduction to Atlas Controls in Namespace Sys.Data – DataView and DataFilter). We know that the DataView does not provide the page navigation methods, so we have to set the pageIndex property of DataView manually to make the navigation work, which is rude and developers are easy to make mistakes such as forgetting to check the boundary of pageIndex. That’s the reason why Atlas offers you the DataNavigator control, which acts as the proxy of DataView by providing navigation operations on the DataView.

DataNavigator object only has one property:

dataView: A reference of DataView object that this DataNavigator operates on. You should always set this peoperty.

Still, to use the DataNavigator, you have to provide some Atlas Buttons with some specified commandName property values to trigger the paging operations. Also, the property parent of these should be set to the DataNavigator to make sure that the DataNavigator can capture these commands.

There are following five command name values you may choose. All the command name values are case insensitive.

page: Switch current page index to the value specified in the command argument. This is almost as raw as the way by changing page index value directly.
nextpage: Switch to the next page.
previouspage: Switch to the previous page.
firstpage: Switch to the first page.
lastpage: Switch to the last page.

Ok for the introductions, let’s go through a demo to get familiar with the DataNavigator control.

The first thing is to expose a Web Service for Atlas pages. Following is the source code for MyDataService.asmx and it is very easy to understand so I just skip the detailed introductions. It just simply returns a collection of 100 entries.

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Services;
 
//
// For simplicity this example demonstraes storing and  manipulating 
// the data objects in memory. A database can also be used.
//
    
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyDataService : DataService
{
    static List<Entry> _data;
    static object _dataLock = new object();
 
    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        _data = new List<Entry>();
                        for (int i = 0; i < 100; i++)
                        {
                            _data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format("Dflying{0}@dflying.net", i.ToString())));
                        }
                    }
                }
            }
            return _data;
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return MyDataService.Data.ToArray();
    }
}
 
public class Entry
{
    private string _name;
    private string _email;
    private int _id;
 
    [DataObjectField(true, true)]
    public int Id
    {
        get { return _id; }
        set { _id = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("New row")]
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("")]
    public string Email
    {
        get { return _email; }
        set { _email = value; }
    }
 
    public Entry()
    {
        _id = -1;
    }
 
    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _email = description;
    }
}

Then the ASPX page, there are four sections in the ASPX page you need to consider:

A ScriptManager control, which is required in every Atlas page.
The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.
A group of buttons (the command buttons) in a container div (the DataNavigator), which are used for implementing the page navigation.
A hidden <div>, which is used to define the templates.

Here’s the code, for more details about the ListView template, please refer to: Display Listible Data Using ASP.NET Atlas ListView Control

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- Element for paged ListView (container) -->
<div id="dataContents">
</div>
 
<!-- PageNavigator -->
<div id="pageNavigator">
    <input type="button" id="btnFirstPage" value="<<" />
    <input type="button" id="btnPrevPage" value="<" />
    <span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
    <input type="button" id="btnNextPage" value=">" />
    <input type="button" id="btnLastPage" value=">>" />
</div>
 
<!-- Templates -->
<div style="visibility: hidden; display: none">
    <table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
        <thead>
            <tr>
                <td><span>No.</span></td>
                <td><span>Name</span></td>
                <td><span>Email</span></td>
            </tr>
        </thead>
        <!-- Repeat Template -->
        <tbody id="myList_itemTemplateParent">
            <!-- Repeat Item Template -->
            <tr id="myList_itemTemplate">
                <td><span id="lblIndex" /></td>
                <td><span id="lblName" /></td>
                <td><span id="lblEmail" /></td>
            </tr>
        </tbody>
    </table>
    <!-- Empty Template -->
    <div id="myList_emptyTemplate">
        No Data
    </div>
</div>

Let’s look at the Atlas XML scripts. There are four sections of the script.

Section 1. Atlas client side control DataSource, used to retrieve data from server.

<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />

Section 2. A DataView, used to paging the collection we get in Section 1.

<dataView id="view" pageSize="12">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data" />
    </bindings>
</dataView>

Section 3. DataNavigator control and buttons. Note here we have four navigation buttons with four kinds of commandName properties and the parent properties are all set to the DataNavigator object.

<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
    <bindings>
        <binding property="enabled" dataPath="hasPreviousPage"/>
    </bindings>
</button>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
    <bindings>
        <binding property="enabled" dataPath="hasNextPage"/>
    </bindings>
</button>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />

Section 4. Two labels show the page count and current page index.

<label id="lblPageNumber">
    <bindings>
        <binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
    </bindings>
</label>
<label id="lblPageCount">
    <bindings>
        <binding dataContext="view" property="text" dataPath="pageCount"/>
    </bindings>
</label>

Ok, test in browser:

Source code for this demo can be downloaded here: DataNavigatorDemo.zip

Posted in Atlas. Comment: (54). Trackbacks:(413). Permalink
«Next post | Previous post»

Referers

Comments

1. uaxfsrauxn | 02/08,2008 at 04:36

gay leather toys http://www.angelfire.com/teenkhnupanal/iyssu/gay-leather-toys.htm
[url=http://uk.geocities.com/gay372gay/rqjwi-ln/free-access-to-porn-movies-without-a-credit-card.htm]free access to porn movies without a credit card[/url]
free porn vid extreme guy stuff jewel

2. otetuksfth | 03/10,2008 at 18:46

casino news texas http://ca.geocities.com/excite745casino/gxvkg-jv/casino-news-texas.htm
[url=http://uk.geocities.com/chat759sex/wlubz-kq/teenage-male-gay-sucking.htm]teenage male gay sucking[/url]
stop smoking jacksonville

3. uxziskukds | 03/10,2008 at 18:47

indian gaming casinos in ca
girls jacking guys off
bingo roulette
teenage boys having sex
teen gay galleries
raining men
sexy gay hunks
male men beastiality bestiality
lake tahoe casino weddings
belterra cassino indiana

4. bneyvajhrk | 03/29,2008 at 14:20

100 free anal sex http://ca.geocities.com/casino537and/vqtjz-ji/100-free-anal-sex.htm
[url=http://ca.geocities.com/vegas396casino/hslgg-ho/foto-galeri-gratis-sex.htm]foto galeri gratis sex[/url]
conmigo hermana mi quiere sexo solo

5. rlhzjzbqdv | 05/10,2008 at 06:44

xxx sex xxx com http://uk.geocities.com/pharmacytzgkille/zxpbw/xxx-sex-xxx-com.htm
[url=http://uk.geocities.com/killerpainllwipi/dzfkd/prevacid-competition.htm]prevacid competition[/url]
somalistudio com

6. uimxhmjhoy | 05/10,2008 at 06:44

financial management software property management http://uk.geocities.com/pillsavicoimage/pvwsj/financial-management-software-property-management.htm
[url=http://uk.geocities.com/buygvimage/wxklr/good-sex-show-trailer.htm]good sex show trailer[/url]
lolita nymphet art nude

7. tbeyieyeky | 05/10,2008 at 06:45

addition house ranch remodel renovate

8. mclmciyyti | 05/10,2008 at 06:46

teen boy dildo

9. vndapdrj | 09/24,2008 at 18:43

[URL=http://byljierc.com]qpimtrfr[/URL] jptfnlix egyqshbs http://vtpbpjpp.com hztggjvk qvdtolsk

10. ifgtitgvon | 11/24,2008 at 21:17

Menopause

11. xgxsrsvgvo | 11/26,2008 at 15:54

Allegra

12. ypyhkrezyp | 11/26,2008 at 16:10

Wellbutrin http://pharma-search.info/Wellbutrin.html
[url=http://hotsearch.biz/Didrex.html]Didrex[/url]
Hoodia

13. crmdknihyh | 11/28,2008 at 10:03

Viagra for woman http://pharma-search.info/Viagra-for-woman.html
[url=http://pharma-search.info/Drug.html]Drug[/url]
Soma

14. vatmlgjetu | 11/28,2008 at 10:03

Zocor http://pharma-search.info/Zocor.html
[url=http://hotsearch.biz/Carisoprodol.html]Carisoprodol[/url]
Phentermine

15. lwlijofkbu | 11/28,2008 at 10:03

Ingulair

16. rqdgnmhchc | 11/28,2008 at 10:04

[url=http://pharma-search.info/Valium.html]Valium[/url]

17. nszwzivuhc | 11/28,2008 at 10:04

[url=http://pharma-search.info/Ephedra.html]Ephedra[/url]

18. ovexmxqbst | 11/28,2008 at 10:10

Herpes

19. wjwbsxmhat | 11/28,2008 at 10:11

Flexeril

20. rgxipuhmhw | 11/28,2008 at 10:12

Nexium

21. ehezshsbor | 11/28,2008 at 10:13

Lexapro

22. ihormdansr | 11/28,2008 at 10:13

[url=http://hotsearch.biz/Diflucan.html]Diflucan[/url]

23. rcryjeruzm | 11/28,2008 at 10:14

[url=http://hotsearch.biz/Levitra.html]Levitra[/url]

24. ovwtidipsr | 11/28,2008 at 10:25

Herpes http://pharma-search.info/Herpes.html
[url=http://pharma-search.info/Lipitor.html]Lipitor[/url]
Insomnia

25. hmdcjwbeve | 11/28,2008 at 10:25

Soma online http://hotsearch.biz/Soma-online.html
[url=http://hotsearch.biz/Viagra-for-woman.html]Viagra for woman[/url]
Valium

26. kvglczqbwz | 11/28,2008 at 10:25

Drug rehab

27. nkfgdmxolm | 11/28,2008 at 10:26

[url=http://hotsearch.biz/Nexium.html]Nexium[/url]

28. hixsdglunu | 11/28,2008 at 10:27

[url=http://pharma-search.info/Lasik.html]Lasik[/url]

29. rarahyfkpo | 11/28,2008 at 10:35

Acyclovir http://pharma-search.info/Acyclovir.html
[url=http://hotsearch.biz/Hoodia.html]Hoodia[/url]
Diazepam

30. qlqzmpazqj | 11/28,2008 at 10:36

Prescription drug http://hotsearch.biz/Prescription-drug.html
[url=http://pharma-search.info/Tenuate.html]Tenuate[/url]
Valtrex

31. xwpgrodojw | 11/28,2008 at 10:36

Women health

32. forqnotmje | 11/28,2008 at 10:37

[url=http://pharma-search.info/Allegra.html]Allegra[/url]

33. rsxgvshqzm | 11/28,2008 at 10:38

[url=http://pharma-search.info/Ingulair.html]Ingulair[/url]

34. nahipyfonu | 11/28,2008 at 10:39

Zocor

35. mnadslofyt | 12/04,2008 at 11:59

Impotence

36. jyhyxczude | 12/04,2008 at 12:02

Nexium

37. ijsbudgrop | 12/04,2008 at 12:04

[url=http://pharma-search.info/Impotence.html]Impotence[/url]

38. qhodkdadsp | 12/04,2008 at 12:04

Men health

39. crgtexsdep | 12/04,2008 at 12:05

Herpes

40. rkbehwlsfm | 12/04,2008 at 12:15

Ingulair

41. oxerajoxwv | 12/04,2008 at 12:32

Pain medication http://hotsearch.biz/Pain-medication.html
[url=http://pharma-search.info/Pheromone.html]Pheromone[/url]
Valtrex

42. ktgpsxqbkd | 12/04,2008 at 12:33

Pain medication

43. ebgdulonsb | 12/04,2008 at 12:36

Ultram tramadol

44. axqjybqdcv | 12/06,2008 at 15:05

Prozac http://pharma-search.info/Prozac.html
[url=http://hotsearch.biz/Phentermine.html]Phentermine[/url]
Lexapro

45. rmxmfspmvi | 12/06,2008 at 15:06

Soma online http://pharma-search.info/Soma-online.html
Wellbutrin http://pharma-search.info/Wellbutrin.html
Didrex http://hotsearch.biz/Didrex.html
Lose weight http://hotsearch.biz/Lose-weight.html
Vioxx http://hotsearch.biz/Vioxx.html
Cialis http://hotsearch.biz/Cialis.html
Cheap phentermine http://hotsearch.biz/Cheap-phentermine.html
Menopause http://pharma-search.info/Menopause.html
Anxiety http://hotsearch.biz/Anxiety.html
Cyclobenzaprine http://pharma-search.info/Cyclobenzaprine.html

46. crgpchazgb | 12/06,2008 at 15:09

Ionamin

47. uxutsrsxuj | 12/06,2008 at 15:10

Diet pills

48. idaxcfspmr | 12/06,2008 at 15:11

Lortab http://hotsearch.biz/Lortab.html
[url=http://pharma-search.info/Prilosec.html]Prilosec[/url]
Insomnia

49. lopefansje | 12/06,2008 at 15:11

Ephedra http://hotsearch.biz/Ephedra.html
[url=http://hotsearch.biz/Cialis.html]Cialis[/url]
Zithromax

50. fwdwpuzeze | 12/06,2008 at 15:11

Ingulair

51. utormbcnmr | 12/06,2008 at 15:11

[url=http://pharma-search.info/Wellbutrin.html]Wellbutrin[/url]

52. urktujezqz | 12/06,2008 at 15:12

[url=http://hotsearch.biz/Zovirax.html]Zovirax[/url]

53. zyfonghutm | 12/06,2008 at 15:12

Weight loss http://hotsearch.biz/Weight-loss.html
[url=http://hotsearch.biz/Ithromax.html]Ithromax[/url]
Financial

54. zsdcxejalc | 12/06,2008 at 15:38

Ephedra http://hotsearch.biz/Ephedra.html
[url=http://pharma-search.info/Proscar.html]Proscar[/url]
Zocor

Programmer Dflying - moved to http://me.dflying.net/

Menu:

Recent Entries

Categories

Archives

Search:

Recent Comments:

Links

Syndicate

Paging Your List Using ASP.NET Atlas PageNavigator Control

Referers

Comments

Leave a Reply