Exemplarische Vorgehensweise: Erstellen der CourseManagerWeb-Anwendung

Artikel
08/21/2008

In diesem Thema wird beschrieben, wie eine grundlegende ASP.NET-Anwendung erstellt wird, die ein Entity Data Model (EDM) verwendet. Die Anwendung CourseManagerWeb ähnelt der Windows Forms-Anwendung CourseManager im Schnellstart für ADO.NET Entity Framework.

Erforderliche Komponenten

Zum Durchführen dieser exemplarischen Vorgehensweise muss Folgendes installiert sein:

Microsoft Visual Studio 2008 SP1
Die Beispieldatenbank "School". Informationen zum Erstellen dieser kleinen Datenbank finden Sie unter Erstellen der Beispieldatenbank 'School' (Entity Framework-Schnellstart).

In dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in Visual Studio, .NET Framework und entweder Visual C#- oder Visual Basic-Programmierung verfügen.

Erstellen der Projektmappe

Diese Anwendung basiert auf einem normalen ASP.NET-Webanwendungsprojekt.

So erstellen Sie die Projektmappe "CourseManagerWeb" in Visual Studio

Wählen Sie im Menü Datei in Visual Studio Neu aus, und klicken Sie dann auf Projekt.

Das Dialogfeld Neues Projekt wird angezeigt.
Wählen Sie im Bereich Projekttyp entweder Visual Basic oder Visual C# aus. Geben Sie als Typ der VorlageASP.NET-Webanwendung an, und geben Sie den Namen CourseManagerWeb ein.
Klicken Sie auf OK.
Vergewissern Sie sich, dass die Projektmappe erzeugt wurde und die Dateien Default.aspx und Web.config enthält.

Erstellen des "School"-Entity Data Models

Diese Anwendung zeigt Daten an, indem ASP.NET-Steuerelemente an ein EDM gebunden werden.

So erstellen Sie das "School"-EDM

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt CourseManagerWeb, zeigen Sie auf Hinzufügen, und klicken Sie anschließend auf Neues Element.
Wählen Sie im Bereich Vorlagen das ADO.NET Entity Data Model aus.
Geben Sie als Modellname School.edmx ein, und klicken Sie dann auf Hinzufügen.

Die erste Seite des Assistenten für Entity Data Model wird angezeigt.
Wählen Sie im Dialogfeld Modellinhalte auswählen die Option Aus Datenbank generieren aus, und klicken Sie dann auf Weiter.

Das Dialogfeld Wählen Sie Ihre Datenverbindung aus wird angezeigt.
Klicken Sie auf die Schaltfläche Neue Verbindung.

Das Dialogfeld Verbindungseigenschaften wird angezeigt.
Geben Sie den Servernamen ein, wählen Sie die Authentifizierungsmethode aus, geben Sie als Datenbanknamen School ein, und klicken Sie anschließend auf OK.

Das Dialogfeld Wählen Sie Ihre Datenverbindung aus wird mit den Verbindungseinstellungen für die Datenbank aktualisiert.
Stellen Sie sicher, dass Speichern Sie die Entitätsverbindungseinstellungen in Web.Config als: aktiviert und der Wert auf SchoolEntities festgelegt ist. Klicken Sie auf Weiter.

Das Dialogfeld Wählen Sie Ihre Datenbankobjekte aus wird angezeigt.
Stellen Sie sicher, dass alle Tabellen ausgewählt sind und für Modellnamespace der Wert SchoolModel festgelegt ist. Klicken Sie anschließend auf Fertig stellen, um den Assistenten zu beenden.

Folgendes wird vom Assistenten durchgeführt:
- Verweise auf die Namespaces System.Data.Entity, System.Runtime.Serialization und System.Security werden hinzugefügt.
- Die Datei School.edmx wird zur Definition des EDM erstellt.
- Eine Quellcodedatei wird erstellt, die die auf der Grundlage des EDM generierten Klassen enthält. Sie können die Quellcodedatei anzeigen, indem Sie im Projektmappen-Explorer den Knoten Default.aspx erweitern.
- Der Abschnitt mit der Verbindungszeichenfolge der Datei Web.Config wird aktualisiert.

Sehen Sie sich die Datei School.edmx an, bevor Sie mit dem nächsten Schritt fortfahren. Öffnen Sie die Datei dazu im ADO.NET Entity Data Model-Designer (dem Standardanzeigeprogramm).

Hinweis
Für Visual Basic-Projekte werden einige Dateien im Projektmappen-Explorer möglicherweise nicht angezeigt. Klicken Sie in der Visual Studio-Taskleiste auf Projekt, und wählen Sie Alle Dateien anzeigen aus, um alle Projektdateien anzuzeigen.

Erstellen der Benutzeroberfläche (UI)

Die Benutzeroberfläche für diese Anwendung enthält HTML- und ASP.NET-Websteuerelemente.

So erstellen Sie die "CourseManager"-Webseite

Klicken Sie im CourseManagerWeb-Projekt mit der rechten Maustaste auf die Standardwebseite (Default.aspx), und wählen Sie Ansicht-Designer aus.

Die Datei wird im Webseiten-Designer geöffnet.
Löschen Sie den Standardabschnitt div, der in neuen ASP.NET-Webanwendungen automatisch erzeugt wird.
Ziehen Sie von der Toolbox ein DropDownList-Steuerelement auf die Entwurfsoberfläche, und legen Sie die folgenden Eigenschaften fest:
- ID auf departmentList
- AutoPostBack auf True
Erweitern Sie den Abschnitt Daten der Toolbox, und ziehen Sie ein EntityDataSource-Steuerelement in den Bereich. Ändern Sie seine ID-Eigenschaft in departmentDS.
Ziehen Sie ein GridView-Websteuerelement in den Bereich, und legen Sie seine ID-Eigenschaft auf courseGridView fest.

Die Benutzeroberfläche ist damit vollständig.

Binden des "DropDownList"-Steuerelements

Im nächsten Schritt binden Sie das DropDownList-Steuerelement an das EntityDataSource-Steuerelement, sodass DropDownList Abteilungsnamen anzeigt.

So binden Sie das "DropDownList"-Steuerelement

Drücken Sie STRG+F5, um die Anwendung zu erstellen. Das ist erforderlich, um die Modellmetadaten für den Assistenten zum Konfigurieren von Datenquellen verfügbar zu machen, den Sie im nächsten Schritt verwenden.
Wählen Sie im Fenster Webseiten-Designer das EntityDataSource-Steuerelement departmentDS aus, klicken Sie auf sein Smarttag, und wählen Sie den Befehl Datenquelle konfigurieren aus.

Der Assistent zum Konfigurieren von Datenquellen wird gestartet.
Wählen Sie im Dialogfeld ObjectContext konfigurieren aus der Dropdownliste Benannte Verbindung den Eintrag SchoolEntities aus.
Wählen Sie aus der Dropdownliste Standardcontainer den Eintrag SchoolEntities aus.
Klicken Sie auf Weiter.
Führen Sie im Dialogfeld Datenauswahl konfigurieren folgende Aktionen aus:
1. Wählen Sie aus der Dropdownliste EntitySetName den Eintrag Department aus.
2. Wählen Sie aus der Dropdownliste EntityTypeFilter die Option (Keine) aus.
3. Überprüfen Sie im Feld Auswählen das DepartmentID-Feld und das Name-Feld.
4. Klicken Sie auf Fertig stellen, um die Konfiguration der Datenquelle abzuschließen.
Kehren Sie zur Entwurfsansicht der Webseite zurück.
Wählen Sie das DropDownList-Steuerelement departmentList aus, klicken Sie auf das Smarttag und dann auf Datenquelle auswählen.

Das Dialogfeld Datenquelle auswählen des Assistenten zum Konfigurieren von Datenquellen wird angezeigt.
Wählen Sie im Dialogfeld Eine Datenquelle auswählen Folgendes aus:
- Wählen Sie für Datenquelle auswählen die Option departmentDS aus.
- Wählen Sie für Datenfeld für die Anzeige in DropDownList auswählen die Option Name aus.
- Wählen Sie für Datenfeld für den Wert von DropDownList auswählen die Option DepartmentID aus.
Hinweis

Wenn in den Dropdownlisten keine Werte verfügbar sind, klicken Sie auf Schema aktualisieren.
Klicken Sie auf OK.

Hinweis
Wenn in den Dropdownlisten keine Werte verfügbar sind, klicken Sie auf Schema aktualisieren.

Die Projektmappe wird nun erstellt. Wenn die Anwendung ausgeführt wird, wird das DropDownList-Steuerelement mit den Namen von Abteilungen gefüllt. Wenn Sie eine Abteilung auswählen, wird das Formular zwar übermittelt, die Informationen zu den geplanten Kursen werden jedoch noch nicht angezeigt.

Binden des "GridView"-Steuerelements

Fügen Sie als Nächstes Code hinzu, damit das GridView-Steuerelement alle in der ausgewählten Abteilung angebotenen Kurse anzeigt. Dazu erstellen Sie stark typisierte Abfragen für die CLR-Objekte, die Entitäten und Zuordnungen im "School"-Modell darstellen.

So binden Sie das "GridView"-Steuerelement

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Default.aspx.vb oder Default.aspx.cs, und wählen Sie Code anzeigen aus.
Fügen Sie folgende using-Anweisung (C#) oder Imports-Anweisung (Visual Basic) hinzu, um auf das aus der Datenbank "School" erstellte Modell und den Entitätsnamespace zu verweisen.
```
Imports System.Data.Objects
```
```
using System.Data.Objects;
```

Fügen Sie eine Eigenschaft zur _Default-Klasse hinzu, die den Objektkontext darstellt.

' Create an ObjectContext based on SchoolEntity.
Private schoolContext As SchoolEntities

// Create an ObjectContext based on SchoolEntity.
private SchoolEntities schoolContext;

Fügen Sie im vorhandenen Ereignishandler zum Laden der Seite den folgenden Code hinzu, um die schoolContext-Eigenschaft zu initialisieren.

 ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()

// Initialize the data context.
schoolContext = new SchoolEntities();

Kehren Sie zur Entwurfsansicht der Webseite Default.aspx zurück. Doppelklicken Sie auf das DropDownList-Steuerelement departmentList.

Dadurch wird der Datei Default.aspx.vb bzw. der Datei Default.aspx.cs ein SelectedIndexChanged-Ereignishandler für das departmentList-Steuerelement hinzugefügt.

Fügen im SelectedIndexChanged-Ereignishandler folgenden Code hinzu:

'Get the department ID.
Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

    ' Select course information based on department ID.
    Dim courseInfo = _
        From c In schoolContext.Course _
        Where c.Department.DepartmentID = departmentID _
        Select New With _
        { _
            .CourseID = c.CourseID, _
            .CourseName = c.Title, _
            .CourseCredits = c.Credits _
        }

    ' Bind the GridView control to the courseInfo collection.
    courseGridView.DataSource = courseInfo
    courseGridView.DataBind()

// Get the department ID.
Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

// Select course information based on department ID.
var courseInfo = from c in schoolContext.Course
                where c.Department.DepartmentID == departmentID
                select new
                {
                    CourseID = c.CourseID,
                    CourseTitle = c.Title,
                    CourseCredits = c.Credits
                };

// Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo;
courseGridView.DataBind();

In diesem Code wird eine LINQ to Entities-Abfrage verwendet, um die Kursinformationen auf der Basis der angegebenen DepartmentID abzurufen. Die Abfrage erzeugt eine Auflistung von anonymen Typen, die die ID, den Titel und die Mitwirkenden des Kurses enthält. Diese Auflistung wird dann an das GridView-Steuerelement gebunden.

Fügen Sie der _Default-Klasse in der Default.aspx.vb bzw. der Datei Default.aspx.cs einen PreRenderComplete-Ereignishandler hinzu. Fügen Sie den folgenden Code hinzu, um das GridView-Steuerelement zu initialisieren, wenn die Seite das erste Mal angezeigt wird.

Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
    ' Force initial GridView update.
    departmentList_SelectedIndexChanged(Me, New EventArgs())
End Sub

protected void Page_PreRenderComplete(object sender, EventArgs e)
{
    // Force initial GridView update.
    departmentList_SelectedIndexChanged(this.Page, new EventArgs());
}

Die Anwendung kann nun erfolgreich erstellt werden und ist voll funktionsfähig. Durch die Auswahl einer anderen Abteilung wird das Formular gesendet und das GridView-Steuerelement mit den entsprechenden Kursinformationen aktualisiert.

Codelisting

In diesem Abschnitt werden die endgültigen Versionen für den Textkörper der Standardwebseite und die CodeBehind-Datei der CourseManagerWeb-Projektmappe dargestellt.

Textkörper der Standardwebseite

<body>
  <form id="form1" >
    <asp:DropDownList ID="departmentList"  
         AutoPostBack="True" DataSourceID="departmentDS" 
        DataTextField="Name" DataValueField="DepartmentID" 
        onselectedindexchanged="departmentList_SelectedIndexChanged"> 
    </asp:DropDownList>
    
    <asp:EntityDataSource ID="departmentDS"  
       ConnectionString="name=SchoolEntities"
       DefaultContainerName="SchoolEntities" 
       EntitySetName="Department" Select="it.[DepartmentID], 
       it.[Name]">
    </asp:EntityDataSource>

    <asp:GridView ID="courseGridView" >
    </asp:GridView>

    <asp:Button ID="closePage"  Text="Close" 
       onclick="closePage_Click" />
  </form>
</body>

CodeBehind-Datei

Imports System.Data.Objects
Partial Public Class _Default
    Inherits System.Web.UI.Page
    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Initialize the ObjectContext.
        schoolContext = New SchoolEntities()
    End Sub

    Protected Sub departmentList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles departmentList.SelectedIndexChanged
    'Get the department ID.
    Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

        ' Select course information based on department ID.
        Dim courseInfo = _
            From c In schoolContext.Course _
            Where c.Department.DepartmentID = departmentID _
            Select New With _
            { _
                .CourseID = c.CourseID, _
                .CourseName = c.Title, _
                .CourseCredits = c.Credits _
            }

        ' Bind the GridView control to the courseInfo collection.
        courseGridView.DataSource = courseInfo
        courseGridView.DataBind()
    End Sub
    Private Sub Page_PreRenderComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRenderComplete
        ' Force initial GridView update.
        departmentList_SelectedIndexChanged(Me, New EventArgs())
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Objects;
namespace CourseManagerWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        // Create an ObjectContext based on SchoolEntity.
        private SchoolEntities schoolContext;

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            // Force initial GridView update.
            departmentList_SelectedIndexChanged(this.Page, new EventArgs());
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Initialize the data context.
            schoolContext = new SchoolEntities();
        }

        protected void departmentList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Get the department ID.
            Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);
            
            // Select course information based on department ID.
            var courseInfo = from c in schoolContext.Course
                            where c.Department.DepartmentID == departmentID
                            select new
                            {
                                CourseID = c.CourseID,
                                CourseTitle = c.Title,
                                CourseCredits = c.Credits
                            };

            // Bind the GridView control to the courseInfo collection.
            courseGridView.DataSource = courseInfo;
            courseGridView.DataBind();
        }
    }
}

Nächste Schritte

Sie haben die Anwendung CourseManagerWeb erfolgreich erstellt und ausgeführt. Weitere Informationen zum Entity Framework finden Sie unter ADO.NET Entity Framework.

Siehe auch

Weitere Ressourcen

Schnellstart (Entity Framework)
Beispiele (Entity Framework)
Object Services (Entity Framework)
Arbeiten mit Entitätsdaten

Freigeben über