Display list data using the ASP.NET Atlas ListView control

Author：Eve Cole Update Time：2009-06-30 16:12:55

English Version: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html

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

Sys.UI.Data.ListView : Display list data using ASP.NET Atlas ListView control
Sys.UI.Data.ItemView: To be continued
Sys.UI.Data.DataNavigator: To be continued
Sys.UI.Data.XSLTView: To be continued This article is the first of them: Using the ASP.NET Atlas ListView control to display list data.

In most current Web programs, we need to display some list data to the user. The GridView server control in ASP.NET provides this function, and the client control ListView in Atlas can also provide similar functions on the client side and run in AJAX mode. Although you can use a traditional GridView control plus Atlas's UpdatePanel to provide the same AJAX operation, this implementation is less efficient and is not a "pure" Atlas approach. The recommended method is to use Atlas's client control ListView instead. Don't worry, Atlas's ListView control is as simple as the GridView, and the two are similar in many concepts, such as the ItemTemplate. However, it should be noted that the current IDE does not provide an intelligent perception function for Atlas scripts. In addition, Atlas scripts do not have compile-time checks, so you should be extra careful when writing code.

When using ListView, you should provide it with some necessary templates (Template) to tell Atlas how to render your content. There are the following templates in ListView:

layoutTemplate: This template is used to render the container containing list items (for example, using the <table> tag), the head of the list (for example, using the <thead> tag), the tail, etc. You must specify a layoutTemplate for the ListView. And this template must contain an itemTemplate template, and optionally a separatorTemplate template.
itemTemplate: This template is used to render an item in the list (for example, using the <tr> tag). This template must be placed in layoutTemplate.
separatorTemplate: This template is used to render the separator element between items in the list (for example, using the <hr> tag). This template must be placed in layoutTemplate.
emptyTemplate.: This template is used to render the ListView when no items exist. At this time, there may be no items in the DataSource object related to the ListView, or it may be in the process of being obtained from the server.
There are also some properties in ListView:

itemCssClass: specifies the css class of the item item.
alternatingItemCssClass: The css class of the item item that specifies the interval.
selectedItemCssClass: Specifies the css class of the selected item item.
separatorCssClass: Specifies the css class that separates elements.
itemTemplateParentElementId: This attribute specifies the parent element of itemTemplate and separatorTemplate. This way the itemTemplate and separatorTemplate elements can be rendered repeatedly.
OK, let us use an example to illustrate how to use the ListView control:

First, we write a Web Service that returns a DataTable in .NET. Note that here we will inherit from the Microsoft.Web.Services.DataService base class, and add the attribute DataObjectMethod defined in the namespace System.ComponentModel to the service method. At the beginning of the service method, we use System.Threading.Thread.Sleep(2000) to simulate a 2-second network delay so that the contents of the emptyTemplate can be seen.

[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService : Microsoft.Web.Services.DataService {

[DataObjectMethod(DataObjectMethodType.Select)]
public DataTable GetListData()
{
System.Threading.Thread.Sleep(2000);

DataTable dt = new DataTable("MyListData");
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Email", typeof(string));
DataRow newRow;
for (int i = 0; i < 5; ++i)
{
newRow = dt.NewRow();
newRow["Name"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
return dt;
}
}

Then, add some necessary controls/tags in the ASP.NET page: <atlas:ScriptManager ID="ScriptManager1" runat="server" />

<div id="myList"></div>

<div style="display: none;">
</div>
In the above tag, we added three tags: a required ScriptManager control. A div with the id myList is used to allow Atlas to place the rendered ListView here. A hidden div that defines our template. The elements in this hidden div are not visible on the page and are only used to provide Atlas with the necessary templates.

We add the following ListView template to this hidden div:

<table id="myList_layoutTemplate" border="1" cellpadding="3">
<thead>
<tr>
<td><span>No.</span></td>
<td><span>Name</span></td>
<td><span>Email</span></td>
</tr>
</thead>

<tbody id="myList_itemTemplateParent">

<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>

<tr id="myList_separatorTemplate">
<td colspan="3">Separator</td>
</tr>
</tbody>
</table>

<div id="myList_emptyTemplate">
No Data
</div>

In the code above you can see all four templates I mentioned. Also specify an id for each template, which will be used in the Atlas script declaration below. In this example I will render this ListView as an HTML Table, unfortunately the separated elements will be ugly (a blank line).

Finally, add the Atlas script statement to the page:

Here I added an Atlas client DataSource object to obtain data from the Web Service. We won’t talk much about DataSource here (it may be introduced in subsequent articles). Let's take a look at the definition related to ListView: In the definition of ListView, we specify the itemTemplateParentElementId attribute. Then a binding segment is defined inside the ListView to bind the data obtained from the DataSource to the ListView. We also defined four template segments, each of which uses layoutElement to associate with the four templates defined above. Notice that for the first label control in the layoutTemplate template, we specified an Add transformer in its binding to change the order starting from 0 to starting from 1 (for Atlas Transformer, please refer to my article: http ://dflying.cnblogs.com/archive/2006/04/05/367908.html ).

You're done, let's run it.