Utilisez le contrôle de liaison ASP + List
Nikhil Kothari
Microsoft Corporation
Juillet 2000
Résumé: Expliquez les contrôles de répéteur ASP +, de datalist et de serveur de datagrid. Ces commandes peuvent réaliser une interface utilisateur d'application basée sur la source de données, HTML. Discutez des concepts liés à ces contrôles et résumez les exemples de base de l'utilisation de ces contrôles.
Table des matières
Brève introduction
Comment fonctionne le contrôle de liaison de la liste?
Contrôle du répéteur
Contrôle des données
Contrôle de datagride
Répéteur, datalist ou dataGrid?
Ressources connexes
Téléchargez l'exemple de fichier (56 Ko) lié à cet article.
Brève introduction
Le témoin du répéteur, du datalist et du dataGrid constitue les ensembles de contrôle Web connexes dans l'espace de nom dans le System.web.webControls dans ASP + Page Framework. Ces contrôles font du contenu de la liste de liaison ou de la source de données de l'affichage HTML. Par conséquent, ils les appellent collectivement "Contrôles de liaison de liste".
Semblable à d'autres contrôles Web dans le cadre, ces contrôles fournissent des modèles de programmation cohérents et encapsulent une logique représentative indépendante du navigateur. Ces caractéristiques permettent aux développeurs de programmer dans des modèles d'objets sans avoir à maîtriser les connaissances techniques incohérentes et complexes liées au HTML.
Ces trois contrôles peuvent représenter le contenu de la source de données liés à ses sources de données connexes en fonction d'une variété de dispositions (y compris des listes, des colonnes / colonnes de journaux et des dispositions de flux (flux HTML)). De plus, ils vous permettent également de créer une disposition complètement différente ou complètement personnalisée. En plus de la logique de l'emballage, il offre également la fonction du traitement des données transmises, de la gestion de l'état d'exécution et des événements déclenchés. Enfin, ils fournissent également différents niveaux de soutien aux opérations standard telles que la sélection, l'édition, la pagination et le tri. Ces contrôles peuvent simplifier plusieurs applications Web courantes, notamment des rapports, des paniers d'achat, des listes de produits, des résultats de requête et des menus de navigation.
Les éléments suivants illustreront en outre ces contrôles et comment les utiliser dans vos applications Web et comment choisir les contrôles.
Comment fonctionne le contrôle de liaison de la liste?
Cette section est le matériel de fond du reste de cet article. Présentation des méthodes de travail de ces contrôles de liaison de liste, de leurs caractéristiques communes et de certains concepts connexes.
Attribut de source de données
Chaque contrôle a un attribut de source de données avec son type est System.collections.Collection. Dans les mots les plus simples, les sources de données sont une liste ou une collecte d'objets similaires.
Plusieurs objets de ce cadre fournit la mise en œuvre de l'icollection. Cette collection comprend System.Data.Dataview (elle est généralement utilisée pour accéder aux bases de données relationnelles et aux données XML), à l'implémentation générale de l'icollection (telles que ArrayList et HashTable) et Array.
Contrairement aux contrôles traditionnels de liaison des données (ils ont généralement besoin d'ensembles d'enregistrements ADO), à l'exception de la mise en œuvre de l'interface ICOllection, ces contrôles de liaison de liste ne renforcent aucune autre exigence pour leurs sources de données. Selon la conception, la structure de type et de données qui peut être utilisée comme valeur d'attribut de source de données valide à travers une grande quantité, et ils peuvent maximiser la simple et la flexibilité pour votre code d'application.
Collection de projets
Chaque contrôle de liaison de liste contient un ensemble de projets. Le contrôle est défini dans sa collecte de projets en répertoriant la source de données actuelle de ces objets. Créez un seul élément pour chaque objet et utilisez-le pour représenter l'objet. Ces éléments font partie de la structure hiérarchique de contrôle contenue dans le contrôle de liaison de la liste.
Le tableau ci-dessous répertorie le type de projet associé à la source de données.
Le type de projet par défaut créé par le projet
AlternatingItem est la création de projet avec des enchères étranges dans la collection de projets
SelectedItem est créé pour le projet sélectionné (que le projet soit un projet alternatif)
Editem est créé pour des projets en mode d'édition (qu'il soit sélectionné ou alternatif)
Le contrôle sera créé en même temps dans les éléments suivants qui seront utilisés. Cependant, ils ne sont pas associés aux données de la source de données.
L'en-tête est utilisé pour représenter les informations d'en-tête
La note de bas de page est utilisée pour indiquer les informations sévères
Les séparateurs sont utilisés pour représenter le contenu entre chaque élément illustré à la figure 1, et il ne s'applique qu'au répéteur et au datalist
Le symbole de pagination est utilisé pour indiquer l'interface utilisateur de pagination associée au contrôle de dataGrid
Figure 1. Par rapport à la collection "Project" de la collection "Control"
Bouclage et création des données du projet
Le contrôle de liaison de liste suit le modèle de liaison de données explicite implémenté dans l'ensemble du framework ASP +. Cela signifie que le contrôle ne doit être répertorié que lorsque la méthode de Databind est appelée.
Lorsque la méthode de Databind est appelée, le contrôle de la liste répertorie sa source de données, créera un projet et l'initialise en extrait la valeur de sa source de données. Si la gestion de l'état est activée, le contrôle enregistrera également toutes les informations requises pour refréter son projet au cours de la période de traitement de retour de la page sans relancer la source de données.
Le modèle de liaison des données explicites permet à votre code d'application de déterminer avec précision quand et où la source de données est nécessaire dans la séquence de traitement. Cette fonctionnalité rend l'accès aux serveurs de base de données moins et plus efficaces, et ces accès sont généralement l'opération la plus consommée des applications Web.
La règle générale est que la données doit être appelée chaque fois que vous avez besoin de refaire le projet. Dans la plupart des cas, vous appellerez Databind lorsque votre page est priée de créer une collection de projets initiale pour la première fois. Au cours de l'exécution de suivi de cette page, vous devrez appeler cette méthode dans diverses procédures de traitement des événements qui sont modifiées par la collection de projets. Cela se produit lorsque la requête utilisée pour créer la source de données initiale peut se produire. Cela peut également se produire lorsque le statut du projet change (comme le passage du mode d'édition).
style
En utilisant des attributs de style sur le modèle d'objet, vous pouvez définir tous les contrôles de données et de dataGrid et les formats et apparences qu'il contient. Ces attributs sont autorisés à personnaliser les polices, les couleurs, les bordures et autres facteurs d'apparence. L'attribut de style du contrôle lui-même (comme la couleur de premier plan, la couleur d'arrière-plan, la police et le style de bordure) affecteront la représentation de l'ensemble du contrôle.
De plus, chaque contrôle contient un grand nombre d'attributs de style qui correspondent aux types d'articles qu'il a créés, comme le stage, l'alternativetemStyle et le stage en tête. DataGrid propose des attributs de style de niveau troisième qui affectent toutes les cellules dans des colonnes spécifiques. Chaque colonne contient dans le contrôle peut avoir son propre HeadldersTyle, FootStyle et ItemStyte.
modèle
Le format de contrôle de style s'affiche, tandis que le modèle définit le contenu et la représentation de chaque élément. Vous pouvez considérer le modèle comme une feuille de code HTML, qui définit la structure hiérarchique de contrôle utilisée pour représenter le projet.
Les commandes de répéteur et de données sont motivées par vos modèles spécifiés pour fournir diverses propriétés de modèles setables, tels que itemTemplate, alternatingItemTemplate et HeaderTemplate. Semblable au style, chaque modèle correspond à un type de projet spécifique.
Le contrôle DataGrid n'est pas un modèle. Cependant, les templatecolumns dans la collection de colonnes du contrôle font l'utilisation de modèles dans DataGrid. Chaque cellule de TemplateColum peut contenir un modèle, qui est très similaire aux éléments du contrôle du répéteur ou du datalist. Cela rend également la personnalisation dans DataGrid possible.
Liaison des données dans le modèle
La structure hiérarchique de contrôle contenue dans les éléments de définition du modèle. En utilisant des expressions de liaison de données, les attributs de contrôle de cette structure de niveau peuvent être liés aux propriétés de données associées à ce projet.
Le projet de niveau parent logique en tant que modèle est appelé "conteneur" dans l'expression de liaison des données. Chaque conteneur a un attribut appelé DataItem, qui cite ses données associées. En conséquence, la plupart des expressions de liaison de données typiques dans le modèle lient les attributs de contrôle sur une certaine propriété du conteneur.dataitem. Cette liaison sera expliquée dans les exemples suivants.
Contrôle du répéteur
Comme mentionné précédemment, le contrôle du répéteur est complètement motivé par le modèle, permettant une représentation et une disposition complètement personnalisées. La figure ci-dessous illustre cette fonction.
Figure 2. Liste des liens des symboles de projet liés générés à l'aide du contrôle du répéteur
Extrait de répéter1.aspx:
<% @ Page Language = C # src = repeater1.cs hérite = échantillons.repeter1page%>
Élastique
<Asp: répéteur runat = server id = linkslistreater
dataSource = '<% # SiteLinks%>'>
<template name = HeaderTemplate>
<ul type = 1>
</ template>
<template name = itemTemplate>
<li>
<ASP: HyperLink Runat = Server
text = '<% # databinder.eval.eval (contener.dataitem, site)%>'
NAVIGUGURL = '<% # databinder.eval.eval.dataitem, siteUrl)%>'>
</ ASP: hyperlien>
</li>
</ template>
<template name = footertemplate>
</ul>
</ template>
</ ASP: Répéteur>
Ce fichier .aspx a montré une instruction de génération d'un contrôle de répéteur pour générer une liste de symboles de projet.
Cet exemple illustre la méthode d'instruction pour définir la source de données avec la syntaxe de liaison des données (<% # ...%>). Lorsque vous appelez la méthode Databind, l'expression de la liaison des données est exécutée. Dans ce cas, la propriété DataSource du répéteur est liée à la propriété SiteLinks sur la page, et ce dernier contient la référence URL à afficher.
Le répéteur est le seul contrôle qui permet aux fragments HTML d'exister dans son modèle. Dans cet exemple, la liste des symboles de projet est divisée en trois parties:
Démarré par la liste de HeregerTemplate (<ul type = 1>).
Terminez l'étiquette (</ul>) par la liste représentée par FootETTemplate.
Le corps principal de la liste est placé à partir de l'élément de liste (<li>) généré en répétant le titre d'élément dans chaque objet de l'ensemble de SiteLinks.
Vous pouvez également utiliser ces modèles pour spécifier la marque de démarrage (<br>) dans l'en-tête, l'étiquette de fin (</s table>) spécifie le tableau dans la note de bas de page et spécifie une ligne de montre unique dans chaque projet (<té>) Essence Cette option de remplacement mènera à la représentation de la liste.
Vous devez spécifier itemTemplate. C'est le seul modèle nécessaire. Lorsque d'autres modèles ne sont pas spécifiés, le contrôle utilisera automatiquement cet élément pour d'autres modèles.
Dans l'exemple suivant, ItemTemplate contient un contrôle Web hyperlien. Les attributs de texte et de navigation de ce contrôle sont liés aux propriétés de données associées à chaque projet en double. Ceci est terminé en utilisant l'expression de liaison des données (à la recherche immédiatement de l'expression après avoir créé un projet).
Répéter1.cs:
échantillons d'espace de noms {
Élastique
Classe publique Repeater1Page: Page {
Répéteur protégé LinksListreater;
Public icollection SiteLinks {
obtenir {
ArrayList sites = new ArrayList ();
Sites.add (nouveau siteinfo (Microsoft Home,
http://www.microsoft.com);
Sites.add (nouveau siteinfo (MSDN Home,
http://msdn.microsoft.com);
Sites.add (nouveau siteinfo (page d'accueil MSN,
http://www.msn.com));
Sites.add (nouveau siteinfo (hotmail,
http://www.hotmail.com));
Sites de retour;
}
}
Override protégé vide Overoad (EventArgs e) {{
base.onload (e);
if (! IsPostback) {
// Lorsqu'il a demandé la page pour la première fois, la liaison des données est effectuée.
// Cela appellera chaque contrôle récursivement dans la structure hiérarchique de contrôle de cette page.
databind ();
}
}
}
classe scellée publique SiteInfo {
Site de chaîne privé;
Chaîne privée SITEURL;
public SiteSInfo (String siteneName, String sItleUrl) {{
this.SiTename = siteName;
this.siteUrl = siteUrl;
}
site de chaîne publique {
obtenir {return site;}
}
String public SiteUrl {
geturn sietUrl;}
}
}
}
Ce fichier .cs contient le code qui apparaît ensemble dans la page ASPX dans la liste précédente.
La classe Repeater1Page couvre la méthode Onload de la classe de page. Cela indique que Databind est appelé dans la première demande de cette page. Cela entraînera l'expression de liaison des données sur ces pages pour évaluer les données et faire de la liste de contrôle de répéteur la source des données et créer leurs projets. Appelez la méthode Databind uniquement lorsque la première demande. La raison pour laquelle cela peut fonctionner est que le répéteur peut re-créer son projet dans le processus de retour du statut préservé avant, sans avoir besoin d'instances de source de données.
Cette page révèle les attributs publics du type icollection. Ceci sera utilisé dans l'expression de liaison des données de la valeur d'attribut de source de données du répéteur. L'acquisition d'attributs utilise ArrayList contenant un ensemble de séquences SiteInfo. Cet attribut est public, car seules les pages de membres publics et de protection peuvent être utilisées dans les expressions de liaison des données.
Chaque objet SiteInfo a deux attributs: SiteName et SITEURL. Lorsque la liaison des données du contrôle de l'hyperlien dans le modèle, accédez à ces attributs. Dans l'expression de liaison de ce contrôle, Container.Dataitem a déclaré qu'il est nécessaire de lier un élément spécifique à un seul objet SiteInfo dessus. DataBinder.eval (contener.dataittem, sitename) visite la propriété SiteTame de l'objet SiteInfo actuel.
Exemple de répéteur1 vous présente plusieurs concepts de base:
Modèle de définition
Expression de liaison de liaison aux données et d'expression de liaison des données dans le modèle
Utilisez l'icollection d'ArrayList comme source de données
Appelez la méthode Databind pendant la page de traitement initiale
Contrôle des données
Le contrôle du données de données est un contrôle axé sur le modèle qui offre la possibilité d'utiliser des attributs de style pour formater sa capacité. Il peut également produire plusieurs colonnes. La figure 3 illustre ces deux caractéristiques.
Figure 3. Exemples générés à partir des doubles colonnes de Datalist
Extrait de Datalist1.aspx:
<% @ Page Language = C # src = datalist1.cs hérite = échantillons.datalist1page%>
Élastique
<Asp: datalist runat = server id = peicdatalist
RepeatColumns = 2 répétitif = Vertical RepeatMode = Table
largeur = 100%>
<POPERTY NAME = alternativetemStyle>
<Asp: TableItemStyle backcolor = # elyeee />
</ Propriété>
<template name = itemTemplate>
<Asp: panneau runat = server font-size = 12pt font-bold = true>
<% # ((Personne) conteneur.dataitem) .name%>
</ ASP: panneau>
<asp: étiquette runat = largeur du serveur = 20px
Borderstyle = largeur de bordure solide = 1px bordercolor = noir
backcolor = '<% # ((personne) conteneur.dataitem).
</ asp: étiquette>
<asp: étiquette runat = server font-size = 10pt
Text = '<% # getColorName ((personne) conteneur.dataitem).
</ asp: étiquette>
</ template>
</ ASP: Datalist>
Ce fichier .aspx a montré une instruction de Datalist utilisée pour générer cet exemple.
Dans cet exemple, la disposition multi-colonnes de DataList est réalisée en définissant la propriété RepealColumns sur "2". Le réglage de la modification de la répétition en tant que "vertical" fera que le projet organise de haut en bas, puis disposé de gauche à droite. Inversement, la valeur définie sur "horizontal" entraînera la disposition du projet de gauche à droite, puis de haut en bas.
La syntaxe ASPX contient des paramètres pour quelques attributs de style de données. Dans cet exemple, la largeur de Datalist est définie à 100% de son niveau parent. L'alternativetemstyle avec un fond gris est d'obtenir une apparence rayée. Cet exemple montre également que le modèle peut contenir n'importe quelle définition de contrôle complexe pour répondre aux besoins de l'obtention de la disposition idéale dans chaque projet.
Enfin, l'expression de liaison des données dans ce modèle se lie au stade précoce en convertissant le conteneur.Dataitem en son type. Cela ne provoquera pas la liaison ultérieure de la liaison ultérieure de la liaison ultérieure de l'utilisation de la databinder.eval (comme indiqué dans Repeater1). Cependant, cette méthode peut produire une mauvaise lisibilité. L'exemple suivant donne également un exemple d'expression qui appelle la méthode GetColorName (cette méthode est implémentée dans un fichier pris en charge sur cette page).
Datalist1.cs:
échantillons d'espace de noms {
Élastique
classe publique Datalist1Page: page {
Datalist protégée peuplédique;
String protégé getColorname (couleur c) {
Retour
TypeeScriptor.getConverter (typeof (couleur)).
}
Prive void loadpeicallist () {
// Créer une source de données
Personne [] personnes = nouvelle personne [] {
Nouvelle personne (Nikhil Kothari, Color.Green),
Nouvelle personne (Steve Millet, Color.purple), Color.purple),
Nouvelle personne (Chris Anderson, Color.Blue), Color.Blue,
Nouvelle personne (Mike Pope, Color.Orange),
Nouvelle personne (Anthony Moore, Color.yllow),
Nouvelle personne (Jon Jung, Color.Mediumaquamarine),
Nouvelle personne (Susan Warren, Color.SlateBlue),
Nouvelle personne (Izzy Gryko, Color.Red)
};
// Définit la source de données du contrôle
peicaldatalist.datasource = pesple;
// et faire en sorte que le contrôle utilise cette source de données pour construire son projet
peicdatalist.databind ();
}
Override protégé vide Overoad (EventArgs e) {{
base.onload (e);
if (! IsPostback) {
// Voir cette page pour la première fois
Loadpeicallist ();
}
}
}
Personne de classe scellée publique {
Nom de chaîne privé;
Prive Color FavoriteColor;
Personne publique (nom de chaîne, couleur favoritecolor) {{{
this.name = name;
this.favoriteColor = favoriteColor;
}
Couleur publique favoriscolor {
geturn favoritecolor;}
}
Nom de chaîne publique {
nom geturn;}
}
}
}
Sur cette page, l'attribut de source de données du contrôle est défini via les paramètres du programme, qui est réglé dans le fichier ASPX. Les résultats des deux méthodes sont les mêmes. Quel type de méthode ne peut pas être sélectionné, vous devez appeler la méthode Databind afin que le contrôle puisse répertorier ses sources de données et créer des éléments qu'il souhaite indiquer.
La source de données utilisée dans cet exemple est un simple tableau d'objet de personne. Étant donné que chaque tableau implémente la méthode ICOllection, le tableau convient à la source de données. Cela montre la flexibilité qui peut être obtenue lorsque la structure et le type des données peuvent être obtenus lorsque la source de données peut être obtenue.
L'exemple de Datalist1 introduit les concepts suivants:
Définissez le riche UI HTML dans le modèle
Utilisez un tableau simple comme source de données
Définissez la source de données via le programme
Diverses expressions autorisées dans la syntaxe de liaison des données