Programmer Dflying | Display One Item in a Collection using ASP.NET Atlas ItemView Control

Display One Item in a Collection using ASP.NET Atlas ItemView Control

Dflying | 08 April, 2006 20:36

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 second post of the series: Display One Item in a Collection using ASP.NET Atlas ItemView Control

We need to display user a detailed view about our items in a collection, such as the details about your product in a shopping application. ASP.NET Atlas ItemView client side control provides this feature for you, just like the ASP.NET server control DetailsView behaviors, but it runs totally on the client side.

The ItemView class (also ListView class, see http://dflying.dflying.net/1/
archive/113_display_listible_data_using_aspnet_atlas_listview_control.html) inherits from base class: Sys.UI.Data.DataControl, which provides the basic functionalities of a DataControl, including properties:

canMoveNext: whether there’s a next record I can move to.
canMovePrevious: whether there’s a previous record I can move to.
data: the records data.
dataIndex: current record index.
dataItem: current item based on dataIndex
length: record count.

And following methods:

addItem: adds a new item to the data collection
deleteCurrentItem: deletes current item based on dataIndex.
moveNext: increases current dataIndex by 1, if canMoveNext is true.
movePrevious: decreases current dataIndex by 1, if canMovePrevious is true.

Please note all the operations above are at client side, which just modify the client side data. So if you want to commit the changes to server, you have to call the methods in DataSource.

ItemView gains properties and methods above by inheriting, and also has following extensions:

itemTemplate: this template is used by Atlas to display your content.
emptyTemplate: this template is used by Atlas to display an empty message when there’s no item in your collection or the DataSource is fetching data.

Ok for the introductions, let’s go though a demo to use ItemView. This demo is based on Atlas official demos and I’ve made a few modifications to make it simpler.

First thing is to expose a Web Service to Atlas:

Define item entry class:

public class Entry
{
    private string _name;
    private string _description;
    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 Description
    {
        get { return _description; }
        set { _description = value; }
    }
 
    public Entry()
    {
        _id = -1;
    }
 
    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _description = description;
    }
}

Define Web Methods. We have to provide the Select, Insert, Update and Delete methods for this DataService so that we can apply the full CRUD operations on our data collection. Note we use System.Threading.Thread.Sleep(2000); to simulate a 2 seconds network delay so we can see the emptyTemplate content.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyDataService : DataService
{
    static List<Entry> _data;
    static int _nextId;
    static object _dataLock = new object();
 
    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        System.Threading.Thread.Sleep(2000);
                        
                        _data = new List<Entry>();
                        _data.Add(new Entry(0, "ListView", "A control to display data using templates."));
                        _data.Add(new Entry(1, "Window", "A control to display dialogs."));
                        _data.Add(new Entry(2, "Weather", "A control to display local weather."));
                        _nextId = 3;
                    }
                }
            }
            return _data;
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Delete)]
    public void DeleteRow(int id)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == id)
            {
                lock (_dataLock)
                {
                    _data.Remove(row);
                }
                break;
            }
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return MyDataService.Data.ToArray();
    }
 
    [DataObjectMethod(DataObjectMethodType.Insert)]
    public Entry InsertRow(string name, string description)
    {
        Entry newRow;
        lock (_dataLock)
        {
            newRow = new Entry(_nextId++, name, description);
            _data.Add(newRow);
        }
        return newRow;
    }
 
    [DataObjectMethod(DataObjectMethodType.Update)]
    public void UpdateRow(Entry updateRow)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == updateRow.Id)
            {
                row.Name = updateRow.Name;
                row.Description = updateRow.Description;
                break;
            }
        }
    }
}

Then, add the essential tags/controls and ItemView templates in ASP.NET page. There are five parts in the script we need to add:

Atlas server side control ScriptManager, which is request in every Atlas page to load essential framework files.
<div> with id detailsView, which is used by Atlas to place the rendered content.
Navigators part, which is used to navigate between the client side records.
Commands part, which is used to modify/add/delete records (on the client side) and commit to server.
Templates part, which is used to tell Atlas how to render your content. And all the templates are place in a hidden <div> so they will not be shown on the page.

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- Element for ItemView (container) -->
<div id="detailsView">
</div>
 
<!-- Navigators -->
<input type="button" id="previousButton" value="<" title="Go to previous row" />
<span id="rowIndexLabel"></span>
<input id="nextButton" type="button" value=">" title="Go to next row" />
|
 
<!-- Commands -->
<input type="button" id="addButton" value="New" title="Create a new row" />
<input type="button" id="delButton" value="Delete" title="Delete the current row" />
|
<input type="button" id="saveButton" value="Save" title="Save all pending changes" />
<input type="button" id="refreshButton" value="Refresh" title="Discard pending changes and get the latest data from the server" />
 
<!-- Templates -->
<div style="visibility: hidden; display: none">
    <div id="detailsTemplate">
        Name:
        <input id="nameField" size="30" /><br />
        Description:<br />
        <text_area id="descriptionField" rows="4" cols="40"></text_area><br />
    </div>
    <div id="emptyTemplate">
        Getting Data...
    </div>
</div>

The last thing is add Atlas script to the page.

Here’s the script for Atlas client side control DataSource:

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

Here’s the script for ItemView: we bind the data from the DataSource defined above, and bind the enabled property of our ItemView to the isReady property of DataSource, so that only when the DataSource has got data from server, the ItemView is enabled. We also defined the itemTemplate and emptyTemplate for the ListView below.

<itemView id="detailsView">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data"/>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <itemTemplate>
        <template layoutElement="detailsTemplate">
            <textBox id="nameField">
                <bindings>
                    <binding dataPath="Name" property="text" direction="InOut"/>
                </bindings>
            </textBox>
            <textBox id="descriptionField">
                <bindings>
                    <binding dataPath="Description" property="text" direction="InOut"/>
                </bindings>
            </textBox>
        </template>
    </itemTemplate>
    <emptyTemplate>
        <template layoutElement="emptyTemplate" />
    </emptyTemplate>
</itemView>

Here’s the script for Navigators. We have a label displays current record number (item index plus 1 using Atlas Add transformer.), and two navigators to navigate between the client side records (by using Atlas InvokeMethod action to invoke the methods in ItemView).

<button id="previousButton">
    <bindings>
        <binding dataContext="detailsView" dataPath="canMovePrevious" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="movePrevious" />
    </click>
</button>
 
<label id="rowIndexLabel">
    <bindings>
        <binding dataContext="detailsView" dataPath="dataIndex" property="text" transform="Add" />
    </bindings>
</label>
 
<button id="nextButton">
    <bindings>
        <binding dataContext="detailsView" dataPath="canMoveNext" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="moveNext" />
    </click>
</button>

Here’s the script for Commands. We can add/delete record on the client side, commit changes to server or discard all pending changes.

<button id="addButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="addItem" />
    </click>
</button>
 
<button id="delButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="deleteCurrentItem" />
    </click>
</button>
 
<button id="saveButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isDirtyAndReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="dataSource" method="save" />
    </click>
</button>
 
<button id="refreshButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="dataSource" method="load" />
    </click>
</button>