Verwenden von TemplateFields im GridView-Steuerelement (C#)

2025-04-30

Um Flexibilität zu bieten, bietet GridView das TemplateField, das mithilfe einer Vorlage gerendert wird. Eine Vorlage kann eine Kombination aus statischem HTML, Websteuerelementen und Datenbindungssyntax enthalten. In diesem Lernprogramm untersuchen wir, wie Sie das TemplateField verwenden, um ein größeres Maß an Anpassungen mit dem GridView-Steuerelement zu erzielen.

Einleitung

Die GridView besteht aus einer Reihe von Feldern, die angeben, welche Eigenschaften aus der DataSource in die gerenderte Ausgabe aufgenommen werden und wie die Daten angezeigt werden. Der einfachste Feldtyp ist das BoundField, das einen Datenwert als Text anzeigt. Andere Feldtypen zeigen die Daten mithilfe alternativer HTML-Elemente an. Das CheckBoxField wird beispielsweise als Kontrollkästchen gerendert, dessen Aktivierter Zustand vom Wert eines angegebenen Datenfelds abhängt. Das ImageField rendert ein Bild, dessen Bildquelle auf einem angegebenen Datenfeld basiert. Links und Schaltflächen, deren Status von einem zugrunde liegenden Datenfeldwert abhängt, können mithilfe der Feldtypen HyperLinkField und ButtonField gerendert werden.

Während die Feldtypen "CheckBoxField", "ImageField", "HyperLinkField" und "ButtonField" eine alternative Ansicht der Daten ermöglichen, sind sie hinsichtlich der Formatierung immer noch relativ begrenzt. Ein CheckBoxField kann nur ein einzelnes Kontrollkästchen anzeigen, während ein ImageField nur ein einzelnes Bild anzeigen kann. Was geschieht, wenn ein bestimmtes Feld Text, ein Kontrollkästchen und ein Bild basierend auf unterschiedlichen Datenfeldwerten anzeigen muss? Oder was geschieht, wenn wir die Daten mit einem anderen Websteuerelement als checkBox, Image, HyperLink oder Button anzeigen möchten? Darüber hinaus beschränkt das BoundField seine Anzeige auf ein einzelnes Datenfeld. Was wäre, wenn zwei oder mehr Datenfeldwerte in einer einzelnen GridView-Spalte angezeigt werden sollen?

Um diese Flexibilität zu gewährleisten, bietet GridView das TemplateField, das mithilfe einer Vorlage gerendert wird. Eine Vorlage kann eine Kombination aus statischem HTML, Websteuerelementen und Datenbindungssyntax enthalten. Darüber hinaus verfügt das TemplateField über eine Vielzahl von Vorlagen, die zum Anpassen des Renderings für verschiedene Situationen verwendet werden können. Beispielsweise wird die ItemTemplate Zelle standardmäßig für jede Zeile gerendert, aber die EditItemTemplate Vorlage kann verwendet werden, um die Schnittstelle beim Bearbeiten von Daten anzupassen.

In diesem Lernprogramm untersuchen wir, wie Sie das TemplateField verwenden, um ein größeres Maß an Anpassungen mit dem GridView-Steuerelement zu erzielen. Im vorherigen Lernprogramm haben wir gesehen, wie Sie die Formatierung anhand der zugrunde liegenden Daten mithilfe der DataBound Ereignishandler und RowDataBound anpassen. Eine weitere Möglichkeit zum Anpassen der Formatierung basierend auf den zugrunde liegenden Daten besteht darin, Formatierungsmethoden aus einer Vorlage aufzurufen. Wir werden diese Technik auch in diesem Lernprogramm betrachten.

In diesem Lernprogramm verwenden wir TemplateFields, um die Darstellung einer Liste von Mitarbeitern anzupassen. Speziell werden alle Mitarbeiter aufgelistet, wobei der Vor- und Nachname des Mitarbeiters in einer Spalte, ihr Einstellungsdatum in einem Kalendersteuerelement und eine Statusspalte angezeigt werden, die angibt, wie viele Tage sie im Unternehmen beschäftigt sind.

Abbildung 1: Drei TemplateFields werden verwendet, um die Anzeige anzupassen (Zum Anzeigen des Bilds mit voller Größe klicken)

Schritt 1: Binden der Daten an die GridView

In Berichtsszenarien, in denen Sie TemplateFields zum Anpassen der Darstellung verwenden müssen, finde ich es am einfachsten, zunächst ein GridView-Steuerelement zu erstellen, das nur BoundFields enthält, und dann neue TemplateFields hinzuzufügen oder die vorhandenen BoundFields nach Bedarf in TemplateFields zu konvertieren. Deshalb beginnen wir dieses Lernprogramm, indem wir eine GridView zur Seite über den Designer hinzufügen und an eine ObjectDataSource binden, die die Liste der Mitarbeiter zurückgibt. Diese Schritte erstellen ein GridView mit BoundFields für jedes der Mitarbeiterfelder.

Öffnen Sie die GridViewTemplateField.aspx Seite, und ziehen Sie eine GridView aus der Toolbox auf den Designer. Wählen Sie im Smarttag von GridView ein neues ObjectDataSource-Steuerelement hinzu, das die Methode der EmployeesBLL Klasse GetEmployees() aufruft.

Abbildung 2: Hinzufügen eines neuen ObjectDataSource-Steuerelements, das die GetEmployees() Methode aufruft (Klicken, um das Bild in voller Größe anzuzeigen)

Wenn Sie die GridView auf diese Art binden, wird automatisch ein BoundField für jede der Mitarbeitereigenschaften hinzugefügt: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo und Country. Lassen Sie uns für diesen Bericht darauf verzichten, die EmployeeID, ReportsTo oder Country Eigenschaften anzuzeigen. So entfernen Sie die folgenden BoundFields:

Klicken Sie im Dialogfeld "Felder" auf den Link "Spalten bearbeiten" im Smarttag von GridView, um dieses Dialogfeld anzuzeigen. Wählen Sie als Nächstes die BoundFields aus der unteren linken Liste aus, und klicken Sie auf die rote X-Schaltfläche, um das BoundField zu entfernen.
Bearbeiten Sie die deklarative Syntax von GridView manuell aus der Quellansicht, löschen Sie das <asp:BoundField> Element für das BoundField, das Sie entfernen möchten.

Nachdem Sie die EmployeeID, ReportsTo und Country BoundFields entfernt haben, sollte Ihr GridView-Markup wie folgt aussehen:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Nehmen Sie sich einen Moment Zeit, um unseren Fortschritt im Browser zu betrachten. An diesem Punkt sollte eine Tabelle mit einem Datensatz für jeden Mitarbeiter und vier Spalten angezeigt werden: eine für den Nachnamen des Mitarbeiters, eine für den Vornamen, eine für ihren Titel und eine für das Einstellungsdatum.

Abbildung 3: Die LastNameFelder FirstNameTitleund HireDate Felder werden für jeden Mitarbeiter angezeigt (Zum Anzeigen des Bilds mit voller Größe klicken)

Schritt 2: Anzeigen der Vor- und Nachnamen in einer einzelnen Spalte

Derzeit werden die Vor- und Nachnamen jedes Mitarbeiters in einer separaten Spalte angezeigt. Es könnte schön sein, sie stattdessen in einer einzigen Spalte zu kombinieren. Dazu müssen wir ein TemplateField verwenden. Wir können entweder ein neues TemplateField hinzufügen, ihr die erforderliche Markup- und Datenbindungssyntax hinzufügen und dann die FirstName und LastName boundFields löschen oder das FirstName BoundField in ein TemplateField konvertieren, das TemplateField bearbeiten, um den LastName Wert einzuschließen, und dann das LastName BoundField entfernen.

Beide Ansätze führen zum gleichen Ergebnis, aber mir persönlich gefällt es, BoundFields nach Möglichkeit in TemplateFields zu konvertieren, da die Konvertierung automatisch ein ItemTemplate und EditItemTemplate mit Websteuerelementen und Datenbindungssyntax hinzufügt, um die Darstellung und Funktionalität des BoundField nachzuahmen. Der Vorteil besteht darin, dass wir weniger Arbeit mit dem TemplateField ausführen müssen, da der Konvertierungsprozess einige der Arbeit für uns ausgeführt hat.

Wenn Sie ein vorhandenes BoundField in ein TemplateField konvertieren möchten, klicken Sie im Smarttag von GridView auf den Link "Spalten bearbeiten", um das Dialogfeld "Felder" anzuzeigen. Wählen Sie das BoundField aus, um aus der Liste in der unteren linken Ecke zu konvertieren, und klicken Sie dann in der unteren rechten Ecke auf den Link "Dieses Feld in ein TemplateField konvertieren".

Abbildung 4: Ein BoundField aus dem Dialogfeld "Felder" in ein TemplateField konvertieren (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Fahren Sie fort, und konvertieren Sie das FirstName BoundField in ein TemplateField. Nach dieser Änderung gibt es keinen wahrnehmbaren Unterschied im Designer. Dies liegt daran, dass beim Konvertieren des BoundFields in ein TemplateField ein TemplateField erstellt wird, das das Erscheinungsbild des BoundFields verwaltet. Obwohl an diesem Punkt im Designer kein visueller Unterschied besteht, hat dieser Konvertierungsprozess die deklarative Syntax von BoundField durch die folgende TemplateField-Syntax <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> ersetzt:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Wie Sie sehen können, besteht das TemplateField aus zwei Vorlagen, die ItemTemplate über eine Bezeichnung verfügen, deren Text Eigenschaft auf den Wert des FirstName Datenfelds festgelegt ist, und ein EditItemTemplate mit einem TextBox-Steuerelement, dessen Text Eigenschaft auch auf das FirstName Datenfeld festgelegt ist. Die Datenbindungssyntax – <%# Bind("fieldName") %> gibt an, dass das Datenfeld fieldName an die angegebene Websteuerelementeigenschaft gebunden ist.

Zum Hinzufügen des LastName Datenfeldwerts zu diesem TemplateField müssen wir ein weiteres Label-Websteuerelement im ItemTemplate hinzufügen und dessen Text-Eigenschaft an LastName binden. Dies kann entweder von Hand oder über den Designer erreicht werden. Fügen Sie es manuell hinzu, indem Sie einfach die entsprechende deklarative Syntax zum ItemTemplate hinzufügen.

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Wenn Sie ihn über den Designer hinzufügen möchten, klicken Sie im Smarttag von GridView auf den Link "Vorlagen bearbeiten". Dadurch wird die Bearbeitungsschnittstelle der GridView-Vorlage angezeigt. Das Smarttag der Schnittstelle enthält eine Liste der Vorlagen im GridView. Da an diesem Punkt nur ein TemplateField vorhanden ist, sind die einzigen Vorlagen, die in der Dropdownliste aufgeführt sind, diese Vorlagen für das FirstName TemplateField zusammen mit den EmptyDataTemplate und PagerTemplate. Wenn die EmptyDataTemplate Vorlage angegeben ist, wird sie verwendet, um die Ausgabe von GridView zu rendern, wenn keine Ergebnisse in den an die GridView gebundenen Daten vorhanden sind. Wenn PagerTemplate angegeben ist, wird die Pagingschnittstelle für eine GridView gerendert, die Paging unterstützt.

Abbildung 5: Die Vorlagen von GridView können über den Designer bearbeitet werden (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Um das LastName im FirstName TemplateField anzuzeigen, ziehen Sie das Label-Steuerelement aus der Toolbox in das FirstName TemplateField's ItemTemplate in der Vorlagenbearbeitungsschnittstelle von GridView.

Abbildung 6: Hinzufügen eines Bezeichnungswebsteuerelements zur FirstName ItemTemplate von TemplateField (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

An diesem Punkt hat das Dem TemplateField hinzugefügte Label-Websteuerelement seine Text Eigenschaft auf "Label" festgelegt. Dies muss geändert werden, damit diese Eigenschaft stattdessen an den Wert des LastName Datenfelds gebunden ist. Klicken Sie dazu auf das Smarttag des Bezeichnungssteuerelements, und wählen Sie die Option "DataBindings bearbeiten" aus.

Abbildung 7: Wählen Sie die Option "DataBindings bearbeiten" im SmartTag der Bezeichnung aus (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Dadurch wird das Dialogfeld "DataBindings" angezeigt. Von hier aus können Sie die Eigenschaft auswählen, an der Datenbindung aus der Liste auf der linken Seite teilzunehmen, und das Feld auswählen, an das die Daten aus der Dropdownliste auf der rechten Seite gebunden werden sollen. Wählen Sie die Text Eigenschaft von links und das LastName Feld von rechts aus, und klicken Sie auf "OK".

Abbildung 8: Binden der Text Eigenschaft an das LastName Datenfeld (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Hinweis

Im Dialogfeld "DataBindings" können Sie angeben, ob eine bidirektionale Datenbindung durchgeführt werden soll. Wenn Sie dies nicht markieren, wird die Datenbindungssyntax <%# Eval("LastName")%> anstelle von <%# Bind("LastName")%> verwendet. Beide Vorgehensweisen sind für dieses Lernprogramm in Ordnung. Bidirektionale Datenbindung wird beim Einfügen und Bearbeiten von Daten wichtig. Für die einfache Anzeige von Daten funktionieren beide Ansätze jedoch gleichermaßen gut. Wir werden die bidirektionale Datenbindung in zukünftigen Lernprogrammen ausführlich besprechen.

Nehmen Sie sich einen Moment Zeit, um diese Seite im Browser anzusehen. Wie Sie sehen können, enthält die GridView weiterhin vier Spalten. Die FirstName Spalte listet jedoch jetzt sowohl die Werte als auch die FirstNameLastName Datenfeldwerte auf.

Abbildung 9: Sowohl die Werte FirstName als auch die LastName Werte werden in einer einzelnen Spalte angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Um diesen ersten Schritt abzuschließen, entfernen Sie das LastName BoundField, und benennen Sie die Eigenschaft von FirstNameHeaderText TemplateField in "Name" um. Nach diesen Änderungen sollte das deklarative Markup von GridView wie folgt aussehen:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Abbildung 10: Die Vor- und Nachnamen jedes Mitarbeiters werden in einer Spalte angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Schritt 3: Verwenden des Kalendersteuerelements zum Anzeigen des Felds`HiredDate`

Das Anzeigen eines Datenfeldwerts als Text in einer GridView ist so einfach wie die Verwendung eines BoundFields. Bei bestimmten Szenarien werden die Daten jedoch am besten mithilfe eines bestimmten Websteuerelements ausgedrückt, anstatt nur Text zu verwenden. Eine solche Anpassung der Anzeige von Daten ist mit TemplateFields möglich. Anstatt beispielsweise das Einstellungsdatum des Mitarbeiters als Text anzuzeigen, könnten wir einen Kalender (mithilfe des Kalendersteuerelements) mit hervorgehobenem Einstellungsdatum anzeigen.

Um dies zu erreichen, konvertieren Sie zunächst das HiredDate BoundField in ein TemplateField. Wechseln Sie einfach zum Smarttag von GridView, und klicken Sie auf den Link "Spalten bearbeiten", und öffnen Sie das Dialogfeld "Felder". Wählen Sie das HiredDate BoundField aus, und klicken Sie auf "Dieses Feld in ein TemplateField konvertieren".

Abbildung 11: Konvertieren des HiredDate BoundField in ein TemplateField (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wie wir in Schritt 2 gesehen haben, ersetzt dies das BoundField durch ein TemplateField, das ein ItemTemplate Label EditItemTemplate und TextBox enthält, dessen Text Eigenschaften mithilfe der Datenbindungssyntax HiredDatean den <%# Bind("HiredDate")%> Wert gebunden sind.

Um den Text durch ein Steuerungselement vom Typ Kalender zu ersetzen, bearbeiten Sie die Vorlage, indem Sie die Bezeichnung entfernen und ein Steuerungselement vom Typ Kalender hinzufügen. Wählen Sie im Designer die Option "Vorlagen bearbeiten" aus dem Smarttag von GridView aus, und wählen Sie in der Dropdownliste das HireDate TemplateField ItemTemplate aus. Als nächstes löschen Sie das Steuerelement 'Label' und ziehen ein Steuerelement 'Kalender' aus der Toolbox in die Vorlagen-Bearbeitungsoberfläche.

Abbildung 12: Hinzufügen eines Kalendersteuerelements zum HireDate TemplateField-Objekt ItemTemplate (Klicken Sie hier, um das Bild mit voller Größe anzuzeigen)

An diesem Punkt enthält jede Zeile in GridView ein Calendar-Steuerelement in seinem HiredDate TemplateField. Der tatsächliche HiredDate Wert des Mitarbeiters wird jedoch nicht überall im Kalendersteuerelement festgelegt, wodurch jedes Kalendersteuerelement standardmäßig den aktuellen Monat und das aktuelle Datum anzeigt. Um dies zu beheben, müssen wir die Eigenschaften HiredDate" und "VisibleDate" jedes Mitarbeiters den Eigenschaften SelectedDate und VisibleDate des Kalendersteuerelements zuweisen.

Wählen Sie im Smart Tag des Kalender-Steuerelements "Datenbindungen bearbeiten" aus. Als Nächstes binden Sie beide SelectedDate und VisibleDate Eigenschaften an das HiredDate Datenfeld.

Abbildung 13: Binden der SelectedDate und VisibleDate Eigenschaften an das HiredDate Datenfeld (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Hinweis

Das Datum, das im Kalender-Steuerelement ausgewählt ist, muss nicht unbedingt sichtbar sein. Beispielsweise kann ein Kalender den 1^. August 1999 als ausgewähltes Datum aufweisen, aber den aktuellen Monat und das aktuelle Jahr anzeigen. Die durch die SelectedDate- und VisibleDate-Eigenschaften des Kalendersteuerelements angegebenen Daten umfassen das ausgewählte Datum und das sichtbare Datum. Da wir sowohl die Mitarbeiterdaten HiredDate auswählen als auch sicherstellen möchten, dass sie angezeigt werden, müssen wir beide Eigenschaften an das HireDate Datenfeld binden.

Beim Anzeigen der Seite in einem Browser zeigt der Kalender jetzt den Monat des Einstellungsdatums des Mitarbeiters an und wählt dieses bestimmte Datum aus.

Abbildung 14: Die Mitarbeiter HiredDate werden im Kalendersteuerelement angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Hinweis

Im Gegensatz zu allen Beispielen, die wir bisher gesehen haben, haben wir für dieses Lernprogramm keine Eigenschaft EnableViewState für dieses GridView festgelegtfalse. Der Grund für diese Entscheidung ist, dass durch Klicken auf die Datumsangaben des Kalendersteuerelements ein Postback verursacht wird und das ausgewählte Datum des Kalenders auf das Datum festgelegt wird, auf das gerade geklickt wurde. Wenn der Ansichtszustand von GridView deaktiviert ist, werden die Daten von GridView jedoch bei jedem Postback an die zugrunde liegende Datenquelle zurückgebunden, wodurch das ausgewählte Datum des Kalenders auf das Datum des Mitarbeiters zurückgesetzt wird und somit das vom Benutzer ausgewählte Datum überschrieben wird.

Für dieses Lernprogramm ist dies eine irrelevante Diskussion, da der Benutzer die Mitarbeiter HireDate nicht aktualisieren kann. Es wäre wahrscheinlich am besten, das Kalendersteuerelement so zu konfigurieren, dass seine Datumsangaben nicht auswählbar sind. Unabhängig davon zeigt dieses Lernprogramm, dass in einigen Fällen der Ansichtszustand aktiviert sein muss, um bestimmte Funktionen bereitzustellen.

Schritt 4: Anzeigen der Anzahl der Tage, an denen der Mitarbeiter für das Unternehmen gearbeitet hat

Bisher haben wir zwei Anwendungen von TemplateFields gesehen:

Kombinieren von zwei oder mehr Datenfeldwerten in einer Spalte und
Ausdrücken eines Datenfeldwerts mithilfe eines Websteuerelements anstelle von Text

Eine dritte Verwendung von TemplateFields besteht darin, Metadaten zu den zugrunde liegenden Daten von GridView anzuzeigen. Zusätzlich zu den Einstellungsterminen der Mitarbeiter möchten wir möglicherweise auch eine Spalte haben, in der angezeigt wird, wie viele Gesamttage sie am Arbeitsplatz waren.

Eine weitere Verwendung von TemplateFields tritt jedoch in Szenarien auf, wenn die zugrunde liegenden Daten im Webseitenbericht anders angezeigt werden müssen als im Format, das in der Datenbank gespeichert ist. Stellen Sie sich vor, dass die Employees Tabelle ein Gender Feld hatte, das das Zeichen M gespeichert hat oder F um das Geschlecht des Mitarbeiters anzugeben. Bei der Anzeige dieser Informationen auf einer Webseite möchten wir möglicherweise das Geschlecht als "Männlich" oder "Weiblich" im Gegensatz zu "M" oder "F" anzeigen.

Beide Szenarien können behandelt werden, indem eine Formatierungsmethode in der CodeBehind-Klasse der ASP.NET Seite (oder in einer separaten Klassenbibliothek, implementiert als static Methode) erstellt wird, die aus der Vorlage aufgerufen wird. Eine solche Formatierungsmethode wird aus der Vorlage mithilfe derselben zuvor gezeigten Datenbindungssyntax aufgerufen. Die Formatierungsmethode kann eine beliebige Anzahl von Parametern annehmen, muss jedoch eine Zeichenfolge zurückgeben. Diese zurückgegebene Zeichenfolge ist der HTML-Code, der in die Vorlage eingefügt wird.

Um dieses Konzept zu veranschaulichen, erweitern wir unser Lernprogramm, um eine Spalte anzuzeigen, in der die Gesamtzahl der Tage aufgelistet ist, die ein Mitarbeiter am Arbeitsplatz war. Diese Formatierungsmethode nimmt ein Northwind.EmployeesRow Objekt und gibt die Anzahl der Tage zurück, die der Mitarbeiter beschäftigt war, als Zeichenfolge. Diese Methode kann der CodeBehind-Klasse der ASP.NET Seite hinzugefügt werden, muss jedoch als protected oder public für den Zugriff über die Vorlage markiert werden.

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
{
    // Make sure HiredDate is not null... if so, return "Unknown"
    if (employee.IsHireDateNull())
        return "Unknown";
    else
    {
        // Returns the number of days between the current
        // date/time and HireDate
        TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);
        return ts.Days.ToString("#,##0");
    }
}

Da das HiredDate Feld Datenbankwerte enthalten NULL kann, müssen wir zuerst sicherstellen, dass der Wert nicht NULL ist, bevor wir mit der Berechnung fortfahren. Wenn der HiredDate Wert NULL ist, geben wir einfach die Zeichenfolge "Unbekannt" zurück. Wenn er es nicht ist, berechnen wir die Differenz zwischen der aktuellen Zeit und dem NULL Wert und geben die Anzahl der Tage zurück.

Um diese Methode zu verwenden, müssen wir sie aus einem TemplateField in gridView mithilfe der Datenbindungssyntax aufrufen. Fügen Sie zunächst ein neues TemplateField zur GridView hinzu, indem Sie im Smarttag von GridView auf den Link "Spalten bearbeiten" klicken und ein neues TemplateField hinzufügen.

Abbildung 15: Hinzufügen eines neuen TemplateFields zur GridView (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Legen Sie die Eigenschaft des neuen TemplateField HeaderText auf "Tage im Dienst" und dessen ItemStyle-Eigenschaft auf HorizontalAlignCenter. Um die DisplayDaysOnJob Methode aus der Vorlage aufzurufen, fügen Sie ein ItemTemplate hinzu und verwenden Sie die folgende Syntax für die Datenbindung:

<%# DisplayDaysOnJob((Northwind.EmployeesRow)
     ((System.Data.DataRowView) Container.DataItem).Row) %>

Container.DataItem gibt ein DataRowView Objekt zurück, das dem DataSource Datensatz zugeordnet ist und an die GridViewRow gebunden ist. Die Row-Eigenschaft gibt den stark typisierten Northwind.EmployeesRow-Wert zurück, der an die DisplayDaysOnJob-Methode übergeben wird. Diese Datenbindungssyntax kann direkt im ItemTemplate auftreten (wie in der im Folgenden beschriebenen deklarativen Syntax) oder der Text-Eigenschaft der Label-Websteuerelements zugewiesen werden.

Hinweis

Alternativ können wir, anstatt eine EmployeesRow Instanz zu übergeben, einfach den HireDate Wert mit <%# DisplayDaysOnJob(Eval("HireDate")) %> übergeben. Die Eval Methode gibt jedoch eine object, daher müssen wir unsere DisplayDaysOnJob Methodensignatur ändern, um stattdessen einen Eingabeparameter vom Typ object zu akzeptieren. Wir können den Eval("HireDate") Aufruf nicht blind in ein DateTime Objekt umwandeln, da die HireDate Spalte in der Employees Tabelle Werte enthalten NULL kann. Daher müssen wir einen object als Eingabeparameter für die DisplayDaysOnJob Methode akzeptieren, überprüfen, ob es einen Datenbankwert (die mithilfe NULLder Methode Convert.IsDBNull(objectToCheck) erreicht werden kann) und dann entsprechend fortfahren.

Wegen dieser Feinheiten habe ich mich entschieden, das gesamte EmployeesRow Exemplar zu übergeben. Im nächsten Tutorial werden wir ein besser geeignetes Beispiel für die Verwendung der Eval("columnName") Syntax zum Übergeben eines Eingabeparameters an eine Formatierungsmethode einsehen.

Das Folgende zeigt die deklarative Syntax für unsere GridView, nachdem das TemplateField hinzugefügt wurde und die DisplayDaysOnJob Methode von der ItemTemplate aufgerufen wurde.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate"
            SortExpression="HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
            </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob((Northwind.EmployeesRow)
                    ((System.Data.DataRowView) Container.DataItem).Row) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Abbildung 16 zeigt das fertige Lernprogramm, wenn es über einen Browser angezeigt wird.

Abbildung 16: Die Anzahl der Tage, die der Mitarbeiter im Unternehmen beschäftigt ist, wird dargestellt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Das TemplateField im GridView-Steuerelement ermöglicht ein höheres Maß an Flexibilität beim Anzeigen von Daten als für die anderen Feldsteuerelemente verfügbar ist. TemplateFields sind ideal für Situationen, in denen:

Mehrere Datenfelder müssen in einer GridView-Spalte angezeigt werden
Die Daten werden am besten mit einem Web-Control und nicht mit einfachem Text ausgedrückt.
Die Ausgabe hängt von den zugrunde liegenden Daten ab, z. B. dem Anzeigen von Metadaten oder beim Neuformatieren der Daten.

Zusätzlich zum Anpassen der Anzeige von Daten werden TemplateFields auch zum Anpassen der Benutzeroberflächen verwendet, die zum Bearbeiten und Einfügen von Daten verwendet werden, wie wir in zukünftigen Lernprogrammen sehen werden.

Die nächsten beiden Lernprogramme erkunden weiterhin Vorlagen, beginnend mit einem Blick auf die Verwendung von TemplateFields in einer DetailsView. Danach wenden wir uns an die FormView, die Vorlagen anstelle von Feldern verwendet, um mehr Flexibilität beim Layout und der Struktur der Daten zu bieten.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

Besonderer Dank an

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Lead Reviewer für dieses Lernprogramm war Dan Jagers. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn dies der Fall ist, schreiben Sie mir eine Nachricht an mitchell@4GuysFromRolla.com.

Vorherige Nächstes

Freigeben über

Verwenden von TemplateFields im GridView-Steuerelement (C#)

Einleitung

Schritt 1: Binden der Daten an die GridView

Schritt 2: Anzeigen der Vor- und Nachnamen in einer einzelnen Spalte

Schritt 3: Verwenden des Kalendersteuerelements zum Anzeigen des FeldsHiredDate

Schritt 4: Anzeigen der Anzahl der Tage, an denen der Mitarbeiter für das Unternehmen gearbeitet hat

Zusammenfassung

Zum Autor

Besonderer Dank an

Feedback

Zusätzliche Ressourcen

Schritt 3: Verwenden des Kalendersteuerelements zum Anzeigen des Felds`HiredDate`