Warenkorb programmierenASP.NET-Shopping

Produkte

Warenkorb programmieren

Es muss also auch möglich sein, in der Seite kategorien.aspx alle Produkte einer Kategoriegruppe anzuzeigen. Das geht allerdings ganz analog zur Ausgabe der Kategorieliste: Sie erstellen per Code Wizard eine Methode Artikel(), die alle Artikel einer Artikelgruppe zurückliefert. Dazu müssen Sie im Assistenten eine WHERE-Bedingung angeben, das Feld kategorie_id muss dabei identisch zu einem Filter @kategorie_id sein. Der Code Wizard erstellt dann die Methode Artikel() so, dass die gewünschte Kategorienummer als Parameter übergeben wird. Die selbst geschriebene Methode Artikelliste() ruft Artikel() auf und gibt alle Produkte der Kategorie ebenfalls tabellarisch aus. Jedes Produkt ist mit dem URL artikel.aspx?id= verlinkt.

Jetzt müssen Sie nur noch festlegen, was passieren soll, also ob die Kategorieliste oder die Artikelliste angezeigt werden soll. Das kann aber einfach entschieden werden: Wenn kategorien.aspx ohne URL-Parameter aufgerufen wird, wird die Kategorieliste ausgegeben, ansonsten die Artikelliste. Der folgende Code sorgt dafür:

void Page_Load() {
int id;
if (Request.QueryString["id"] != null) {
try {
id = Convert.ToInt32(Request.QueryString["id"]);
Artikelliste(id);
} catch (Exception ex) {
}
} else {
Kategorieliste();
}
}

Produktdetails

Warenkorb programmieren

Kontrolle

Warenkorb programmieren

Natürlich soll der Benutzer nicht Müll in das Textfeld einfügen dürfen, sondern nur Zahlen. Dazu benötigen Sie zwei Validation-Controls von ASP.NET: Den CompareValidator, um den Datentyp zu überprüfen, sowie den RequiredFieldValidator, der prüft, ob überhaupt etwas im Feld steht:

<asp:CompareValidator runat="server"
ControlToValidate="Anzahl" ErrorMessage="*"
Operator="DataTypeCheck" Type="Integer"
Display="Dynamic" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="Anzahl" ErrorMessage="*"
Display="Dynamic" />

Um das Control zu steuern, benötigen Sie ein Attribut, in dem die ID des Artikels angegeben wird. Die Eigenschaft heißt ProduktId (id ist ja schon vergeben), wird aber innerhalb des Steuerelements in einer Variablen id gespeichert:

private int id;

public int ProduktId {
set {
try {
id = Convert.ToInt32(value);
} catch (Exception ex) {
id = 0;
}
}
get {
return id;
}
}

Verbindung zur Datenbank

Warenkorb programmieren

Es fehlt noch die Verbindung zur Datenbank. Schließlich müssen die Produktdaten ja irgendwo herkommen. Auch hier ist Web Matrix wieder sehr nützlich und generiert mit dem Assistenten SELECT Data Method den Code, um Informationen über ein bestimmtes Produkt als DataReader zurückzuliefern. Nennen Sie die Methode Produktinfos(). In der Methode Page_Load() werden die Daten ausgelesen und in die zuvor dafür eingerichteten Web-Controls eingefügt:

void Page_Load() {
System.Data.IDataReader idr = Produktinfos(id);
if (idr.Read()) {
Name.Text = idr["name"].ToString();
Beschreibung.Text = idr["beschreibung"].ToString();
Preis.Text = String.Format("{0:c}", Convert.ToDouble(idr["preis"]));
}
}

Das Anzeigen des User-Controls geschieht in der Datei artikel.aspx. Dort befindet sich nur das nackte User-Control:

Der übergebene URL-Parameter mit der Produkt-ID wird ausgelesen und an das eingefügte User-Control übergeben, so dass die korrekten Artikelinfos angezeigt werden:

void Page_Load() {
int id = 0;
if (Request.QueryString["id"] != null) {
try {
id = Convert.ToInt32(Request.QueryString["id"]);
ProduktControl.ProduktId = id;
} catch (Exception ex) {
}
}
}

Warenkorb

Warenkorb programmieren

Bei einem Klick auf die Schaltfläche müssen die Waren in den Warenkorb gelegt werden. Da das gesamte Produktangebot datenbankgestützt ist, geht das recht einfach. Alle Warenkorbdaten werden in einer Session-Variablen gespeichert.

Dabei kommt der ASP.NET-Datentyp Hashtable zum Tragen, eine fortgeschrittene Version eines assoziativen Arrays. Das ermöglicht später einmal eine Erweiterung des Warenkorbs, denn in einem solchen Array können auch unterschiedliche Datentypen abgelegt werden. In diesem Beispiel ist das nicht der Fall.

Der Schlüssel für jedes Element in der Hashtable ist die Produkt-ID, der Wert ist die Anzahl der Elemente. Zunächst prüfen Sie beim Klick auf die Schaltfläche, ob der Benutzer eine »ordentliche« Stückzahl angegeben hat. Zwar funktionieren die ASP.NET Validation-Controls auch auf Seiten des Clients, aber nur im Internet Explorer und nur mit aktiviertem Javascript ? zwei Dinge, die Sie leicht abschaffen können.

void Einfuegen(Object o, EventArgs e) {
Page.Validate();
if (!Page.IsValid) {
return;
}

Dann lesen Sie die aktuelle Hashtable aus der Session aus oder legen Sie neu an, falls noch nichts im Warenkorb liegt:

Hashtable ht;
if (Session["warenkorb"] != null) {
ht = (Hashtable)Session["warenkorb"];
} else {
ht = new Hashtable();
}

Artikel einfügen

Warenkorb programmieren

Jetzt wird der Artikel in den Warenkorb eingefügt. Zunächst wird nachgesehen, ob der Artikel schon vorhanden ist ? es kann ja sein, dass ein Kunde so begeistert ist, dass er einen Artikel mehrfach in den Einkaufskorb legt. In diesem Fall wird die Anzahl des Artikels erhöht, ansonsten wird ein neuer Eintrag in der Hashtable angelegt:

if (ht.ContainsKey(id)) {
int anzahl = Convert.ToInt32(ht[id]);
anzahl += Convert.ToInt32(Anzahl.Text);
ht[id] = anzahl;
} else {
ht.Add(id, Convert.ToInt32(Anzahl.Text));
}
Session["warenkorb"] = ht;
Ausgabe.Text = "Artikel eingefügt.";
}

Datenausgabe

Warenkorb programmieren

Diese Daten müssen auf der Warenkorbseite warenkorb.aspx noch hübsch ausgegeben werden. Auch hier wäre es natürlich möglich, die HTML-Tabelle schrittweise aufzubauen. Sie gehen jedoch einen anderen Weg: Es gibt auch ASP.NET-Web-Controls für Tabellen. Damit bauen Sie die Warenkorbausgabe objektorientiert auf. Zunächst etwas Markup, das Grundgerüst:

<asp:TableCell Text="Anzahl">

<asp:TableCell Text="Name">

<asp:TableCell Text="Einzelpreis">
<asp:TableCell Text="Gesamt">

In der Methode Page_Load() der Seite wird die Tabelle dann mit Daten erweitert. Hier ein Ausschnitt:

c1 = new TableCell();
c1.Text = anzahl.ToString();
c2 = new TableCell();
c2.Text = name;
c3 = new TableCell();
c3.Text = String.Format("{0:c}", preis);
c4 = new TableCell();
c4.Text = String.Format("{0:c}", anzahl * preis);
r = new TableRow();
r.Cells.Add(c1);
r.Cells.Add(c2);
r.Cells.Add(c3);
r.Cells.Add(c4);
Warenkorb.Rows.Add(r);

Erweiterungen

Warenkorb programmieren

Starten Sie mit [F5] den Code. Web Matrix bietet an, den integrierten ASP.NET-Webserver zu benutzen. Dieser kann zwar nur für den lokalen Zugriff verwendet werden, ist aber zum Testen ausreichend.

Das ist natürlich erst der erste Schritt. Viele Erweiterungen sind denkbar. So könnten Sie die Produkte auch noch mit aussagekräftigen Grafiken bewerben, deren URLs Sie in der Datenbank ablegen. Außerdem muss die Bestellung noch per E-Mail an den Webmaster des Shops verschickt werden.

Sessions ohne Cookies

Warenkorb programmieren

Dieser Warenkorb speichert die Session-Informationen in einem temporären Cookie. Das können Sie aber ändern.

Legen Sie dazu im Hauptverzeichnis der Web-Anwendung bei der Verwendung des Web-Matrix-Webservers eine Datei web.config mit folgendem Inhalt an:

Dann fügt ASP.NET bei jedem Aufruf in den URL ein nicht existierendes Verzeichnis ein ? die Session-ID in Klammern. Doch obwohl es den Ordner nicht gibt, versteht der Webserver die Anforderung richtig, extrahiert die Session-ID aus dem URL und kann so auch ohne Cookies auf die Session-Daten zugreifen.

Alle Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.