Version anglaise : http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
Dans cette série, je présenterai certains des contrôles les plus avancés d'Atlas Sys.UI.Data, notamment :
Sys.UI.Data.ListView : Afficher les données de la liste à l'aide du contrôle ASP.NET Atlas ListView
Sys.UI.Data.ItemView : à suivre
Sys.UI.Data.DataNavigator : à suivre
Sys.UI.Data.XSLTView : à suivre Cet article est le premier d'entre eux : Utilisation du contrôle ASP.NET Atlas ListView pour afficher les données de liste
Dans la plupart des programmes Web actuels, nous devons afficher certaines données de liste à l'utilisateur. Le contrôle serveur GridView dans ASP.NET fournit cette fonction, et le contrôle client ListView dans Atlas peut également fournir des fonctions similaires côté client et s'exécuter en mode AJAX. Bien que vous puissiez utiliser un contrôle GridView traditionnel ainsi que UpdatePanel d'Atlas pour fournir la même opération AJAX, cette implémentation est moins efficace et ne constitue pas une approche Atlas « pure ». La méthode recommandée consiste à utiliser à la place le contrôle client ListView d'Atlas. Ne vous inquiétez pas, le contrôle ListView d'Atlas est aussi simple que GridView, et les deux sont similaires dans de nombreux concepts, tels que ItemTemplate. Cependant, il convient de noter que l'EDI actuel ne fournit pas de fonction de perception intelligente pour les scripts Atlas. De plus, les scripts Atlas n'ont pas de contrôles au moment de la compilation, vous devez donc être très prudent lors de l'écriture du code.
Lorsque vous utilisez ListView, vous devez lui fournir certains modèles nécessaires (Modèle) pour indiquer à Atlas comment restituer votre contenu. Il existe les modèles suivants dans ListView :
layoutTemplate : ce modèle est utilisé pour restituer le conteneur contenant les éléments de la liste (par exemple, en utilisant la balise <table>), l'en-tête de la liste (par exemple, en utilisant la balise <thead>), la queue, etc. Vous devez spécifier un layoutTemplate pour ListView. Et ce modèle doit contenir un modèle itemTemplate, et éventuellement un modèle separatorTemplate.
itemTemplate : ce modèle est utilisé pour restituer un élément de la liste (par exemple, en utilisant la balise <tr>). Ce modèle doit être placé dans layoutTemplate.
separatorTemplate : ce modèle est utilisé pour restituer l'élément séparateur entre les éléments de la liste (par exemple, en utilisant la balise <hr>). Ce modèle doit être placé dans layoutTemplate.
emptyTemplate. : Ce modèle est utilisé pour restituer le ListView lorsqu’aucun élément n’existe. À l'heure actuelle, il se peut qu'il n'y ait aucun élément dans l'objet DataSource lié à ListView, ou il peut être en cours d'obtention à partir du serveur.
Il existe également quelques propriétés dans ListView :
itemCssClass : spécifie la classe CSS de l'élément item.
alternatingItemCssClass : classe CSS de l'élément item qui spécifie l'intervalle.
selectedItemCssClass : Spécifie la classe CSS de l’élément sélectionné.
separatorCssClass : Spécifie la classe CSS qui sépare les éléments.
itemTemplateParentElementId : cet attribut spécifie l'élément parent de itemTemplate et separatorTemplate. De cette façon, les éléments itemTemplate et separatorTemplate peuvent être rendus à plusieurs reprises.
OK, utilisons un exemple pour illustrer comment utiliser le contrôle ListView :
Tout d'abord, nous écrivons un service Web qui renvoie un DataTable dans .NET. Notez qu'ici nous hériterons de la classe de base Microsoft.Web.Services.DataService et ajouterons l'attribut DataObjectMethod défini dans l'espace de noms System.ComponentModel à la méthode de service. Au début de la méthode de service, nous utilisons System.Threading.Thread.Sleep(2000) pour simuler un délai réseau de 2 secondes afin que le contenu du emptyTemplate puisse être vu.
[WebService (Espace de noms = " http://tempuri.org/ ")]
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
classe publique MyService : Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
public DataTable GetListData()
{
Système.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MaListeDonnées");
dt.Columns.Add("Nom", typeof(string));
dt.Columns.Add("Email", typeof(string));
DataRow newRow ;
pour (int je = 0; je < 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);
}
retourner dt ;
}
}
Ensuite, ajoutez quelques contrôles/balises nécessaires dans la page ASP.NET : <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Élément pour maListe (conteneur) -->
<div id="maListe"></div>
<!-- Éléments de mise en page -->
<div style="affichage : aucun ;">
</div>
Dans la balise ci-dessus, nous avons ajouté trois balises : un contrôle ScriptManager requis. Un div avec l'identifiant myList est utilisé pour permettre à Atlas de placer le ListView rendu ici. Un div caché qui définit notre modèle. Les éléments de ce div caché ne sont pas visibles sur la page et ne sont utilisés que pour fournir à Atlas les modèles nécessaires.
Nous ajoutons le modèle ListView suivant à ce div caché :
<!-- Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<tête>
<tr>
<td><span>Non.</span></td>
<td><span>Nom</span></td>
<td><span>E-mail</span></td>
</tr>
</tête>
<!-- Répéter le modèle -->
<tbody id="myList_itemTemplateParent">
<!-- Répéter le modèle d'élément -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
<!-- Modèle d'élément de séparation -->
<tr id="myList_separatorTemplate">
<td colspan="3">Séparateur</td>
</tr>
</tbody>
</table>
<!-- Modèle vide -->
<div id="myList_emptyTemplate">
Aucune donnée
</div>
Dans le code ci-dessus, vous pouvez voir les quatre modèles que j'ai mentionnés. Spécifiez également un identifiant pour chaque modèle, qui sera utilisé dans la déclaration du script Atlas ci-dessous. Dans cet exemple, je vais rendre ce ListView sous forme de tableau HTML, malheureusement les éléments séparés seront laids (une ligne vide).
Enfin, ajoutez l'instruction de script Atlas à la page :
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<liaisons>
<binding dataContext="listDataSource" dataPath="data" property="data" />
</liaisons>
<modèle de mise en page>
<template layoutElement="myList_layoutTemplate" />
</layoutTemplate>
<modèle d'élément>
<template layoutElement="myList_itemTemplate">
<ID d'étiquette="lblIndex">
<liaisons>
<binding dataPath="$index" transform="Add" property="text"/>
</liaisons>
</étiquette>
<ID d'étiquette="lblName">
<liaisons>
<binding dataPath="Name" property="text" />
</liaisons>
</étiquette>
<ID d'étiquette="lblEmail">
<liaisons>
<binding dataPath="Email" property="text" />
</liaisons>
</étiquette>
</modèle>
</itemTemplate>
<modèle de séparateur>
<template layoutElement="myList_separatorTemplate" />
</separatorTemplate>
<Modèle vide>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Ici, j'ai ajouté un objet DataSource client Atlas pour obtenir des données du service Web. Nous ne parlerons pas beaucoup de DataSource ici (il pourra être introduit dans des articles ultérieurs). Jetons un coup d'œil à la définition liée à ListView : Dans la définition de ListView, nous spécifions l'attribut itemTemplateParentElementId. Ensuite, un segment de liaison est défini à l’intérieur du ListView pour lier les données obtenues du DataSource au ListView. Nous avons également défini quatre segments de modèle, chacun utilisant layoutElement pour s'associer aux quatre modèles définis ci-dessus. Notez que pour le premier contrôle d'étiquette dans le modèle layoutTemplate, nous avons spécifié un transformateur Add dans sa liaison pour changer l'ordre de 0 à 1 (pour Atlas Transformer, veuillez vous référer à mon article : http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
Vous avez terminé, exécutons-le.