Exemplarische Vorgehensweise: Erstellen einer AJAX-fähigen Datenanwendung
Aktualisiert: November 2007
In dieser exemplarischen Vorgehensweise wird beschrieben, wie Sie eine AJAX-fähige Webanwendung erstellen, die als Aufgabenliste eingesetzt werden kann. Die Anwendung unterstützt Sie beim Erstellen einer grundlegenden Benutzeroberfläche zum Erstellen, Verwalten und Löschen von Listen und der darin enthaltenen Einträge. Sämtliche Schritte in Verbindung mit den Vorgängen Einfügen, Aktualisieren, Löschen, Sortieren und Paging werden innerhalb eines UpdatePanel-Steuerelements ausgeführt, das AJAX verwendet.
Sie können das UpdatePanel-Steuerelement verwenden, um asynchrone Postbacks auf einer Seite zu aktivieren. Standardmäßig aktualisiert ASP.NET die ganze Seite, wenn ein Postback auftritt. Wenn Sie jedoch das UpdatePanel-Steuerelement zum Erstellen von asynchronen Postbacks verwenden, werden nur die Seitenelemente geändert, die sich innerhalb des UpdatePanel-Steuerelements befinden. Dies bewirkt eine dynamischere und schnellere Verarbeitung der Seite sowie eine bessere Benutzererfahrung.
In dieser exemplarischen Vorgehensweise werden u. a. die folgenden Aufgaben veranschaulicht:
Erstellen einer SQL-Datenbank und Hinzufügen von Daten
Hinzufügen eines LinqDataSource-Steuerelements zu einer Seite
Hinzufügen einer LINQ to SQL-Klassen-Datei.
Verwenden des ListView-Steuerelements zum Anzeigen, Bearbeiten und Löschen von Daten
Verwenden des LinqDataSource-Steuerelements, um mithilfe der sprachintegrierten Abfrage (Language Integrated Query, LINQ) eine Verbindung zu einer Datenbank herzustellen. Weitere Informationen finden Sie unter Sprachintegrierte Abfrage (Language-Integrated Query, LINQ).
Verwenden des UpdatePanel-Steuerelements zum Hinzufügen von AJAX-Funktionalität zur Seite
Vorbereitungsmaßnahmen
Zum Durchführen der exemplarischen Vorgehensweise benötigen Sie Folgendes:
Microsoft Visual Studio 2008 oder Visual Web Developer 2008 Express Edition. Informationen zum Herunterladen finden Sie auf der Website Visual Studio Development Center (möglicherweise in englischer Sprache).
Eine auf dem Computer installierte SQL Server Express Edition. Sie können auch eine SQL Server-Installation verwenden, jedoch müssen Sie an einigen Prozeduren kleine Anpassungen vornehmen.
Erstellen einer Website
In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Website und fügen dieser eine Seite hinzu. Im nächsten Abschnitt stellen Sie eine Verbindung zu einer Datenbank her. Wenn Sie bereits eine Website erstellt haben (z. B. indem Sie die Schritte unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer befolgt haben), können Sie diese Website in dieser exemplarischen Vorgehensweise verwenden. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen.
So erstellen Sie eine neue Dateisystem-Website
Klicken Sie in Visual Web Developer im Menü Datei auf Neue Website.
Das Dialogfeld Neue Website wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Klicken Sie im Feld Speicherort auf Dateisystem, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.
Klicken Sie im Listenfeld Sprache auf Visual Basic oder Visual C#, und klicken Sie dann auf OK.
.gif "Hinweis")
Hinweis:Die gewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.
Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.
Erstellen einer neuen SQL Server-Datenbank
Nachdem Sie jetzt über eine Website verfügen, besteht der nächste Schritt darin, eine Datenbank zu erstellen und im Server-Explorer einen Verweis auf die Datenbank hinzuzufügen. (In Visual Web Developer 2008 Express Edition hat der Server-Explorer den Namen Datenbank-Explorer.) Wenn Sie dem Server-Explorer eine Datenbank hinzufügen, können Sie Visual Studio verwenden, um Tabellen, gespeicherte Prozeduren, Ansichten usw. hinzuzufügen. Außerdem können Sie Tabellendaten anzeigen oder manuell bzw. grafisch eigene Abfragen erstellen, indem Sie das Fenster Abfrage-Generator verwenden.
So fügen Sie dem Projekt eine Datenbank hinzu
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und klicken Sie dann auf Neues Element hinzufügen.
Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie SQL-Datenbank, geben Sie der Datenbank den Namen Tasks.mdf, und klicken Sie auf OK.
Klicken Sie auf Ja, wenn Visual Studio Sie fragt, ob die Datenbank im Ordner App_Data gespeichert werden soll.
Erstellen eines Schemas und von Beispieldaten für die Datenbank
Sie können die Entwurfs- und Bearbeitungsfunktionen der Datenbank verwenden, um ein Schema für die neue Tabelle zu erstellen, in der die Aufgabenelemente gespeichert sind.
So erstellen Sie ein Schema und Beispieldaten für die Datenbank
Öffnen Sie im Projektmappen-Explorer den Ordner App_Data, und doppelklicken Sie auf Tasks.mdf.
Die hierarchische Struktur der Aufgabendatenbank wird im Server-Explorer (bzw. Datenbank-Explorer) angezeigt.
Klicken Sie mit der rechten Maustaste auf den Ordner Tabellen, und klicken Sie auf Neue Tabelle hinzufügen.
Erstellen Sie im Datenbanktabellen-Editor die folgenden Spalten für die Tabelle:
Spaltenname
Datentyp
Eigenschaften
taskId
int
NULL zulassen: Nein
taskName
nvarchar(50)
NULL zulassen: Nein
dateCreated
DateTime
NULL zulassen: Nein
isComplete
bit
NULL zulassen: Nein
Klicken Sie mit der rechten Maustaste auf die Zeile, die den Eintrag taskid enthält, und klicken Sie dann auf Primärschlüssel festlegen.
Öffnen Sie bei aktivierter taskid-Zeile auf der Registerkarte Spalteneigenschaften den Abschnitt Identitätsspezifikation, und setzen Sie (Ist Identity) auf Ja.
Speichern Sie die Tabelle unter dem Namen TasksList.
Klicken Sie im Server-Explorer mit der rechten Maustaste auf die Tabelle, und klicken Sie auf Tabellendaten anzeigen.
Es wird ein Fenster angezeigt, in dem Sie die Daten anzeigen und hinzufügen können.
Fügen Sie der Tabelle vier oder fünf Datensätze hinzu, und schließen Sie dann den Datenbank-Designer.
Sie müssen für taskId keinen Wert angeben, da es sich um eine Identitätsspalte handelt, deren Wert automatisch zugewiesen wird. Sie müssen für das isComplete-Feld entweder False oder True angeben.
Erstellen der Steuerelemente für den Datenzugriff
In diesem Abschnitt verwenden Sie das LinqDataSource-Steuerelement und erstellen Klassen, die Datenbankentitäten darstellen. Beim Steuerelement und den erstellten Klassen handelt es sich um die Datenzugriffsschicht, die in dieser exemplarischen Vorgehensweise verwendet wird.
Das LinqDataSource-Steuerelement stellt LINQ (Language-Integrated Query, sprachintegrierte Abfrage) mithilfe der ASP.NET-Datenquellensteuerelement-Architektur für Webentwickler bereit. Das LinqDataSource-Steuerelement erstellt den Code zum Auswählen, Einfügen, Aktualisieren und Löschen von Objekten in der Datenbank. LINQ wendet die Prinzipien der objektorientierten Programmierung auf relationale Daten an. LINQ stellt ein einheitliches Programmiermodell zum Abfragen und Aktualisieren von Daten aus verschiedenen Datenquellentypen bereit und erweitert direkt die Datenfunktionen der Sprachen C# und Visual Basic. Weitere Informationen zu LINQ finden Sie unter Sprachintegrierte Abfrage (Language-Integrated Query, LINQ).
Zuordnen der Aufgabendatenbank zu einem SQL-Datenkontextobjekt
Um mit dem Erstellen der Datenzugriffsschicht zu beginnen, fügen Sie dem Projekt ein typisiertes Dataset hinzu.
So erstellen Sie eine Klasse für die TasksList-Tabelle
Wenn die Website nicht bereits über den Ordner App_Code verfügt, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, klicken Sie auf ASP.NET-Ordner hinzufügen, und klicken Sie dann auf App_Code.
Klicken Sie mit der rechten Maustaste auf den Ordner App_Code, und klicken Sie dann auf Neues Element hinzufügen.
Wählen Sie unter Von Visual Studio installierte Vorlagen die Vorlage LINQ to SQL-Klassen aus, benennen Sie die Datei in Tasks.dbml um, und klicken Sie dann auf Hinzufügen.
Der O/R-Designer wird angezeigt.
Ziehen Sie im Server-Explorer die Tabelle TasksList ins Fenster O/R-Designer.
Speichern Sie die Datei Tasks.dbml.
Wenn Sie die Datei speichern, erstellt Visual Studio im Ordner App_Code unter Tasks.dbml zwei Dateien. Die erste Datei ist Tasks.dbml.layout. Die zweite Datei ist Tasks.designer.cs oder Tasks.designer.vb. Dies hängt davon ab, welche Sprache Sie beim Erstellen der Datei Tasks.dbml gewählt haben.
Öffnen Sie im Projektmappen-Explorer die Datei Tasks.designer.cs bzw. Tasks.designer.vb.
Beachten Sie, dass der Code Klassen mit den Namen TasksDataContext und TasksList enthält. Die TasksDataContext-Klasse stellt die Datenbank dar, und die TasksList stellt die Datenbanktabelle dar. Der parameterlose Konstruktor für die TasksDataContext-Klasse liest die Verbindungszeichenfolge aus der Datei Web.config.
Öffnen Sie die Datei Web.config.
Beachten Sie, dass im connectionStrings-Element eine Verbindungszeichenfolge für die Datenbank Tasks.mdf hinzugefügt wurde.
Schließen Sie die Klassendatei, das Fenster O/R-Designer und die Datei Web.config.
Erstellen und Konfigurieren eines LinqDataSource-Steuerelements
Da Sie nun über eine Datenbanktabelle und über Klassen verfügen, die Datenbankentitäten darstellen, können Sie auf einer ASP.NET-Webseite mit einem LinqDataSource-Steuerelement auf die Datenbank zugreifen.
So erstellen und konfigurieren Sie ein LinqDataSource-Steuerelement
Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser Seite.
Wechseln Sie in die Entwurfsansicht.
Ziehen Sie ein LinqDataSource-Steuerelement auf die Seite.
Sie können für die ID-Eigenschaft den Wert LinqDataSource1 übernehmen.
Klicken Sie im Smarttagbereich LinqDataSource-Aufgaben auf Datenquelle konfigurieren.
Hinweis:Wenn der Smarttagbereich nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf das LinqDataSource-Steuerelement und anschließend auf Smarttag anzeigen.
Wählen Sie in der Liste Kontextobjekt auswählen den Eintrag TasksDataContext aus, und klicken Sie dann auf Weiter.
Wählen Sie in der Liste Tabelle den Eintrag TasksLists(Table<TasksList>) aus, und klicken Sie dann auf Fertig stellen.
Wählen Sie im Menü LinqDataSource-Aufgaben die Optionen Löschen aktivieren, Einfügen aktivieren und Aktualisieren aktivieren aus.
Beachten Sie, dass Sie keine Datenbankbefehle zum Auswählen der Daten angeben müssen.
Speichern Sie die Seite.
Verwenden der Datenquellensteuerelemente
In diesem Abschnitt fügen Sie der Seite Steuerelemente hinzu, die die LINQ to SQL-Klassendatei verwenden, über die die Datenbanktabelle den Klassen zugeordnet ist. Außerdem verwenden Sie das LinqDataSource-Steuerelement, um eine grundlegende Datenanwendung zu erstellen.
Sie fügen ein ListView-Steuerelement hinzu, um Daten aus einer SQL Server-Datenbank anzuzeigen. Anschließend fügen Sie ein DropDownList-Steuerelement hinzu, um die Daten zu filtern, die im ListView-Steuerelement angezeigt werden. Im weiteren Verlauf der exemplarischen Vorgehensweise fügen Sie die Steuerelemente in ein UpdatePanel-Steuerelement ein, um die Funktionen für asynchrone Postbacks hinzuzufügen.
Anzeigen von Daten mit einem ListView-Steuerelement
Das ListView-Steuerelement ist besonders zum Anzeigen von Daten mit sich wiederholenden Strukturen geeignet, vergleichbar mit den Steuerelementen DataList und Repeater. Im Gegensatz zu diesen Steuerelementen werden vom ListView-Steuerelement jedoch Vorgänge zum Bearbeiten, Einfügen und Löschen sowie Sortieren und Paging unterstützt.
Sie fügen ein ListView-Steuerelement hinzu, das alle Aufgaben anzeigt. Später fügen Sie eine Dropdownliste hinzu, mit der Sie die Daten filtern können. Das ListView-Steuerelement formatiert die Darstellung der Daten und zeigt Schaltflächen an, mit denen der Inhalt bearbeitet und aktualisiert bzw. neuer Inhalt eingefügt werden kann.
So fügen Sie der Seite ein ListView-Steuerelement hinzu
Öffnen Sie die Seite bzw. wechseln Sie auf die Seite, auf der Sie das LinqDataSource-Steuerelement hinzugefügt haben.
Ziehen Sie aus der Registerkarte Daten der Symbolleiste ein ListView-Steuerelement auf die Seite.
Wählen Sie im Menü ListView-Aufgaben in der Liste Datenquelle auswählen den Eintrag LinqDataSource1 aus.
Dadurch wird ListView an das LinqDataSource-Steuerelement gebunden, das Sie weiter oben in der exemplarischen Vorgehensweise konfiguriert haben.
Klicken Sie im Smarttagbereich ListView-Aufgaben auf ListView konfigurieren.
Wählen Sie im Dialogfeld ListView konfigurieren die Optionen Bearbeiten aktivieren, Einfügen aktivieren, Löschen aktivieren und Paging aktivieren aus.
Klicken Sie auf OK.
Speichern Sie die Seite.
Hinzufügen eines DropDownList-Steuerelements zum Filtern von Daten
Sie können die Daten filtern, die im ListView-Steuerelement angezeigt werden, indem Sie eine Dropdownliste erstellen, in der Sie die anzuzeigenden Aufgaben auswählen können. Für dieses Beispiel erstellen Sie eine Liste, in der entweder aktive Aufgaben oder abgeschlossene Aufgaben angezeigt werden.
Sie können Code in das ListView-Steuerelement einfügen, um automatisch eine Where-Klausel zu generieren und nur die Datensätze anzuzeigen, die mit der Auswahl im DropDownList-Steuerelement übereinstimmen.
So fügen Sie ein Steuerelement zum Filtern von Daten hinzu
Öffnen Sie die Seite Default.aspx bzw. wechseln Sie zu dieser Seite, und wechseln Sie in die Quellansicht.
Fügen Sie innerhalb des form-Elements und oberhalb des ListView-Steuerelements das folgende Markup hinzu:
<span id="filter"> Current List Filter: <asp:DropDownList ID="DropDownList1" AutoPostBack="true" > <asp:ListItem Text="Active" Value="False" /> <asp:ListItem Text="Completed" Value="True" /> </asp:DropDownList> </span> <hr id="separator" />Setzen Sie die AutoGenerateWhereClause-Eigenschaft im LinqDataSource-Steuerelement auf true. Dies ist im folgenden Beispiel gezeigt:
<asp:LinqDataSource ID="LinqDataSource1" ContextTypeName="TasksDataContext" TableName="TasksLists" EnableDelete="True" EnableInsert="True" EnableUpdate="True" AutoGenerateWhereClause="true" >Fügen Sie das folgende Markup für Where-Parameter zwischen dem öffnenden und schließenden Tag des LinqDataSource-Steuerelements hinzu.
<WhereParameters> <asp:ControlParameter Name="isComplete" ControlID="DropDownList1" Type="Boolean" /> </WhereParameters>Speichern Sie die Seite.
Sie können die Seite jetzt testen, um sicherzustellen, dass sie die gewählten Daten anzeigt.
So testen Sie die Seite
Drücken Sie STRG+F5, um die Seite im Browser anzuzeigen.
Wählen Sie aus der Dropdownliste die Option Abgeschlossen aus.
Wenn Aufgaben vorhanden sind, die als abgeschlossen gekennzeichnet sind, werden nur diese Aufgaben aufgeführt.
Hinzufügen von AJAX-Funktionalität zur Seite
In diesem Abschnitt fügen Sie der Seite ein ScriptManager-Steuerelement hinzu, um die AJAX-Features von ASP.NET zu aktivieren. Anschließend fügen Sie der Seite ein UpdatePanel-Steuerelement hinzu, mit dem Sie Aufgaben im ListView-Steuerelement ausführen können, ohne dass ein Postback für die gesamte Seite erforderlich ist.
Hinzufügen eines ScriptManager-Steuerelements
Um ASP.NET-AJAX-Features wie das UpdatePanel-Steuerelement verwenden zu können, müssen Sie der Seite ein ScriptManager-Steuerelement hinzufügen.
So fügen Sie der Seite ein ScriptManager-Steuerelement hinzu
Öffnen Sie die Seite Default.aspx bzw. wechseln Sie zu dieser Seite, und wechseln Sie in die Quellansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es der Seite im form-Element hinzuzufügen.
Einfügen des ListView-Steuerelements in ein UpdatePanel-Steuerelement
In diesem Beispiel fügen Sie ListView in ein UpdatePanel-Steuerelement ein. Änderungen des ListView-Steuerelements erfordern kein vollständiges Postback.
So fügen Sie das ListView-Steuerelement in ein UpdatePanel-Steuerelement ein
Fügen Sie auf der Seite Default.aspx direkt nach dem öffnenden <form>-Tag das folgende Markup hinzu:
<asp:UpdatePanel ID="UpdatePanel1" > <ContentTemplate>Fügen Sie direkt vor dem schließenden </form>-Tag den folgenden Code hinzu:
</ContentTemplate> </asp:UpdatePanel>Dieser Code umschließt das ListView-Steuerelement und das DropDownList-Steuerelement mit einem UpdatePanel-Steuerelement.
Speichern Sie die Seite.
Sie können die Seite jetzt noch einmal testen.
So testen Sie die Seite
Drücken Sie STRG+F5, um die Seite in einem Browser anzuzeigen.
Beachten Sie, dass kein vollständiges Postback erfolgt, wenn Sie als Listenfilterung Aktiv oder Abgeschlossen wählen, und dass die aktualisierte Liste der Daten unter ListView ohne Flackern angezeigt wird.
Nächste Schritte
Diese exemplarische Vorgehensweise hat verdeutlicht, wie Sie einer Seite mit einem LinqDataSource-Steuerelement ListView hinzufügen, um das Hinzufügen, Ändern und Löschen von Aufgaben in einer Datenbank zu ermöglichen. Anschließend haben Sie mithilfe des UpdatePanel-Steuerelements die AJAX-Funktionalität hinzugefügt.
Weitere Informationen dazu, wie Sie mit Datenbanken arbeiten, finden Sie z. B. in den exemplarischen Vorgehensweisen Exemplarische Vorgehensweise: Datenbindung an ein benutzerdefiniertes Geschäftsobjekt und Exemplarische Vorgehensweise: Erstellen von Master-Detail-Webseiten in Visual Studio.