Englische Version: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
In dieser Serie werde ich einige der erweiterten Steuerelemente in Atlas Sys.UI.Data vorstellen, darunter:
Sys.UI.Data.ListView : Listendaten mithilfe des ASP.NET Atlas ListView-Steuerelements anzeigen
Sys.UI.Data.ItemView: Fortsetzung folgt
Sys.UI.Data.DataNavigator: Fortsetzung folgt
Sys.UI.Data.XSLTView: Fortsetzung folgt. Dieser Artikel ist der erste davon: Verwenden des ASP.NET Atlas ListView-Steuerelements zum Anzeigen von Listendaten.
In den meisten aktuellen Webprogrammen müssen wir dem Benutzer einige Listendaten anzeigen. Das GridView-Serversteuerelement in ASP.NET stellt diese Funktion bereit, und das Clientsteuerelement ListView in Atlas kann auch ähnliche Funktionen auf der Clientseite bereitstellen und im AJAX-Modus ausgeführt werden. Obwohl Sie ein herkömmliches GridView-Steuerelement plus UpdatePanel von Atlas verwenden können, um denselben AJAX-Vorgang bereitzustellen, ist diese Implementierung weniger effizient und kein „reiner“ Atlas-Ansatz. Die empfohlene Methode besteht darin, stattdessen das Client-Steuerelement ListView von Atlas zu verwenden. Keine Sorge, das ListView-Steuerelement von Atlas ist genauso einfach wie das GridView, und die beiden ähneln sich in vielen Konzepten, wie zum Beispiel dem ItemTemplate. Es ist jedoch zu beachten, dass die aktuelle IDE keine intelligente Wahrnehmungsfunktion für Atlas-Skripte bietet. Darüber hinaus verfügen Atlas-Skripte nicht über Überprüfungen zur Kompilierungszeit, sodass Sie beim Schreiben von Code besonders vorsichtig sein sollten.
Wenn Sie ListView verwenden, sollten Sie ihm einige notwendige Vorlagen (Template) zur Verfügung stellen, um Atlas mitzuteilen, wie Ihre Inhalte gerendert werden sollen. In ListView gibt es die folgenden Vorlagen:
layoutTemplate: Diese Vorlage wird verwendet, um den Container mit Listenelementen (z. B. mithilfe des <table>-Tags), den Kopf der Liste (z. B. mithilfe des <thead>-Tags) und der Schwanz usw. Sie müssen eine layoutTemplate für die ListView angeben. Und diese Vorlage muss eine ItemTemplate-Vorlage und optional eine SeparatorTemplate-Vorlage enthalten.
itemTemplate: Diese Vorlage wird zum Rendern eines Elements in der Liste verwendet (z. B. mithilfe des <tr>-Tags). Diese Vorlage muss in layoutTemplate platziert werden.
SeparatorTemplate: Diese Vorlage wird verwendet, um das Trennelement zwischen Elementen in der Liste darzustellen (z. B. mithilfe des <hr>-Tags). Diese Vorlage muss in layoutTemplate platziert werden.
emptyTemplate.: Diese Vorlage wird zum Rendern der ListView verwendet, wenn keine Elemente vorhanden sind. Zu diesem Zeitpunkt befinden sich möglicherweise keine Elemente im DataSource-Objekt, das sich auf ListView bezieht, oder es wird gerade vom Server abgerufen.
Es gibt auch einige Eigenschaften in ListView:
itemCssClass: Gibt die CSS-Klasse des Elements an.
alternierendItemCssClass: Die CSS-Klasse des Elementelements, die das Intervall angibt.
selectedItemCssClass: Gibt die CSS-Klasse des ausgewählten Elementelements an.
SeparatorCssClass: Gibt die CSS-Klasse an, die Elemente trennt.
itemTemplateParentElementId: Dieses Attribut gibt das übergeordnete Element von itemTemplate und separatorTemplate an. Auf diese Weise können die Elemente „itemTemplate“ und „separatorTemplate“ wiederholt gerendert werden.
OK, lassen Sie uns die Verwendung des ListView-Steuerelements anhand eines Beispiels veranschaulichen:
Zuerst schreiben wir einen Webdienst, der eine DataTable in .NET zurückgibt. Beachten Sie, dass wir hier von der Basisklasse Microsoft.Web.Services.DataService erben und das im Namespace System.ComponentModel definierte Attribut DataObjectMethod zur Dienstmethode hinzufügen. Zu Beginn der Servicemethode simulieren wir mit System.Threading.Thread.Sleep(2000) eine Netzwerkverzögerung von 2 Sekunden, sodass der Inhalt der emptyTemplate sichtbar ist.
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
öffentliche Klasse MyService: Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
öffentliche Datentabelle 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);
}
dt zurückgeben;
}
}
Fügen Sie dann einige erforderliche Steuerelemente/Tags auf der ASP.NET-Seite hinzu: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Element für myList (Container) -->
<div id="myList"></div>
<!-- Layout-Elemente -->
<div style="display: none;">
</div>
Im obigen Tag haben wir drei Tags hinzugefügt: ein erforderliches ScriptManager-Steuerelement. Ein Div mit der ID myList wird verwendet, damit Atlas die gerenderte ListView hier platzieren kann. Ein verstecktes Div, das unsere Vorlage definiert. Die Elemente in diesem versteckten Div sind auf der Seite nicht sichtbar und werden nur verwendet, um Atlas mit den notwendigen Vorlagen zu versorgen.
Wir fügen diesem versteckten Div die folgende ListView-Vorlage hinzu:
<!--Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<thead>
<tr>
<td><span>Nr.</span></td>
<td><span>Name</span></td>
<td><span>E-Mail</span></td>
</tr>
</thead>
<!-- Wiederholungsvorlage -->
<tbody id="myList_itemTemplateParent">
<!-- Vorlage für Wiederholungselemente -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
<!-- Separator Item Template -->
<tr id="myList_separatorTemplate">
<td colspan="3">Trennzeichen</td>
</tr>
</tbody>
</table>
<!-- Leere Vorlage -->
<div id="myList_emptyTemplate">
Keine Daten
</div>
Im obigen Code können Sie alle vier von mir erwähnten Vorlagen sehen. Geben Sie außerdem für jede Vorlage eine ID an, die in der folgenden Atlas-Skriptdeklaration verwendet wird. In diesem Beispiel werde ich diese ListView als HTML-Tabelle rendern, leider sind die getrennten Elemente hässlich (eine Leerzeile).
Fügen Sie abschließend die Atlas-Skriptanweisung zur Seite hinzu:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<Bindungen>
<binding dataContext="listDataSource" dataPath="data" property="data" />
</bindings>
<layoutTemplate>
<template layoutElement="myList_layoutTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<Bindungen>
<binding dataPath="$index" transform="Add" property="text"/>
</bindings>
</label>
<label id="lblName">
<Bindungen>
<binding dataPath="Name" property="text" />
</bindings>
</label>
<label id="lblEmail">
<Bindungen>
<binding dataPath="Email" property="text" />
</bindings>
</label>
</template>
</itemTemplate>
<separatorTemplate>
<template layoutElement="myList_separatorTemplate" />
</separatorTemplate>
<emptyTemplate>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Hier habe ich ein Atlas-Client-DataSource-Objekt hinzugefügt, um Daten vom Webdienst abzurufen. Wir werden hier nicht viel über DataSource sprechen (es wird möglicherweise in späteren Artikeln vorgestellt). Werfen wir einen Blick auf die Definition von ListView: In der Definition von ListView geben wir das Attribut itemTemplateParentElementId an. Anschließend wird innerhalb der ListView ein Bindungssegment definiert, um die von der DataSource erhaltenen Daten an die ListView zu binden. Wir haben außerdem vier Vorlagensegmente definiert, von denen jedes „layoutElement“ verwendet, um es mit den vier oben definierten Vorlagen zu verknüpfen. Beachten Sie, dass wir für das erste Beschriftungssteuerelement in der Vorlage „layoutTemplate“ einen Add-Transformer in seiner Bindung angegeben haben, um die Reihenfolge beginnend bei 0 auf beginnend bei 1 zu ändern (Informationen zum Atlas Transformer finden Sie in meinem Artikel: http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
Sie sind fertig, lassen Sie es uns ausführen.