Teil 1: Übersicht und Erstellen des Projekts

von Rick Anderson

Abgeschlossenes Projekt herunterladen

Entity Framework ist ein Objekt-/relationales Zuordnungsframework. Sie ordnet die Domänenobjekte in Ihrem Code Entitäten in einer relationalen Datenbank zu. In den meisten Fällen müssen Sie sich keine Gedanken über die Datenbankebene machen, da Entity Framework sie für Sie übernimmt. Ihr Code bearbeitet die Objekte, und Änderungen werden in einer Datenbank beibehalten.

Informationen zum Lernprogramm

In diesem Lernprogramm erstellen Sie eine einfache Store-Anwendung. Es gibt zwei Hauptteile für die Anwendung. Normale Benutzer können Produkte anzeigen und Bestellungen erstellen:

Administratoren können Produkte erstellen, löschen oder bearbeiten:

Fähigkeiten, die Sie lernen

Folgendes können Sie lernen:

• Verwenden von Entity Framework mit ASP.NET Web-API
• Verwenden von knockout.js zum Erstellen einer dynamischen Client-UI
• Verwenden der Formularauthentifizierung mit der Web-API zum Authentifizieren von Benutzern.

Obwohl dieses Lernprogramm eigenständig ist, sollten Sie zuerst die folgenden Lernprogramme lesen:

• Ihre erste ASP.NET Web-API
• Erstellen einer Web-API, die CRUD-Vorgänge unterstützt

Einige Kenntnisse über ASP.NET MVC sind ebenfalls hilfreich.

Übersicht

Auf hoher Ebene ist hier die Architektur der Anwendung:

• ASP.NET MVC generiert die HTML-Seiten für den Client.
• ASP.NET Web-API macht CRUD-Vorgänge für die Daten (Produkte und Bestellungen) verfügbar.
• Entity Framework übersetzt die von der Web-API verwendeten C#-Modelle in Datenbankentitäten.

Das folgende Diagramm zeigt, wie die Domänenobjekte auf verschiedenen Ebenen der Anwendung dargestellt werden: Die Datenbankebene, das Objektmodell und schließlich das Drahtformat, das zum Übertragen von Daten an den Client über HTTP verwendet wird.

Erstellen des Visual Studio-Projekts

Sie können das Lernprogrammprojekt entweder mit Visual Web Developer Express oder der Vollversion von Visual Studio erstellen.

Klicken Sie auf der Startseite auf "Neues Projekt".

Wählen Sie im Bereich "Vorlagen " die Option "Installierte Vorlagen " aus, und erweitern Sie den Knoten "Visual C# ". Wählen Sie unter Visual C#"Web" aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Nennen Sie das Projekt "ProductStore", und klicken Sie auf "OK".

Wählen Sie im Dialogfeld " Neues ASP.NET MVC 4-Projekt " die Option "Internetanwendung " aus, und klicken Sie auf "OK".

Die Vorlage "Internetanwendung" erstellt eine ASP.NET MVC-Anwendung, die die Formularauthentifizierung unterstützt. Wenn Sie die Anwendung jetzt ausführen, verfügt sie bereits über einige Features:

• Neue Benutzer können sich registrieren, indem Sie in der oberen rechten Ecke auf den Link "Registrieren" klicken.
• Registrierte Benutzer können sich anmelden, indem Sie auf den Link "Anmelden" klicken.

Mitgliedschaftsinformationen werden in einer Datenbank gespeichert, die automatisch erstellt wird. Weitere Informationen zur Formularauthentifizierung in ASP.NET MVC finden Sie unter Walkthrough: Using Forms Authentication in ASP.NET MVC.

Aktualisieren der CSS-Datei

Dieser Schritt ist kosmetisch, aber er bewirkt, dass die Seiten wie die vorherigen Screenshots gerendert werden.

Erweitern Sie im Projektmappen-Explorer den Ordner "Inhalt", und öffnen Sie die Datei mit dem Namen Site.css. Fügen Sie die folgenden CSS-Formatvorlagen hinzu:

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}