Menu:

Recent Entries

Categories

Archives

Links

Blogs
- Dflying's Night
- David's Untitled Life
- Dflying's Blog in Chinese

This blog is hosted by DreamHost!

Syndicate

RSS 0.90
RSS 1.0
RSS 2.0
Atom 0.3

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:

  1. Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
  2. Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
  3. Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
  4. Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
  5. 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:

  1. 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.

  1. 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.
  2. nextpage: Switch to the next page.
  3. previouspage: Switch to the previous page.
  4. firstpage: Switch to the first page.
  5. 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:

  1. A ScriptManager control, which is required in every Atlas page.
  2. The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.
  3. A group of buttons (the command buttons) in a container div (the DataNavigator), which are used for implementing the page navigation.
  4. 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: (8). Trackbacks:(195). Permalink
«Next post | Previous post»

Referers

Comments

  1. 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. 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. 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. 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. 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. 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. 7. tbeyieyeky  |  05/10,2008 at 06:45

    addition house ranch remodel renovate

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

    teen boy dildo

Leave a Reply

Auth Image