Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Die Erstellung eines Einkaufswagens in ASP.NET

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Der Einkaufswagen sind sehr wichtig und können oft der schrecklichste Teil beim Aufbau einer E-Commerce-Website sein. Dieses Tutorial zeigt, wie einfach es sein kann, einen Warenkorb mit ASP.NET zu realisieren. Es gibt auch einige grundlegende Erklärungen, die den Anfängern von ASP.NET-Programmierern das Verständnis dieses wunderbaren Frameworks zu erleichtern.


Kurzübersicht über ASP.NET

Da ASP.NET in NETTUTS nicht zu ausführlich behandelt wurde, und ich denke, es wäre gut, einen kurzen Überblick über einige der Dinge zu geben, die es von anderen Sprachen unterscheiden.

  1. Code wird kompiliert. Wenn zum ersten Mal eine ASP.NET-Seite über das Web angefordert wird, wird der Code in eine oder mehrere DLL-Dateien auf dem Server kompiliert. Das gibt Ihnen die Möglichkeit, Code einfach auf den Server zu kopieren, und bietet Ihnen den Geschwindigkeitsvorteil von kompiliertem Code.
  2. ASP.NET ist ein objektorientiertes Framework. Jede Funktion, Eigenschaft und Seite ist Teil einer Klasse. Beispielsweise ist jede Webseite eine eigene Klasse, die die Page-Klasse erweitert. Die Page-Klasse verfügt über ein Ereignis, das beim Laden der Webseite ausgelöst wird und als "Page Load Event" bezeichnet wird. Sie können eine Funktion schreiben, die dieses Ereignis abonniert und aufgerufen wird. Das gleiche Prinzip gilt für andere Ereignisse wie das Klicken auf die Schaltfläche und "drop-down"-Ereignisse "select index changed".
  3. Die Logik ist vom Design und Inhalt getrennt. Sie interagieren miteinander, befinden sich jedoch an unterschiedlichen Orten. Im Allgemeinen kann ein Designer so entwerfen, ohne sich um die Funktion kümmern zu müssen, und der Programmierer kann sich auf die Funktion konzentrieren, ohne das Design zu betrachten. Sie haben die Wahl, beide in dieselbe Datei oder in verschiedene Dateien zu legen. Dies ähnelt dem Modellansicht-Controller-Modell.

Wenn Sie ASP.NET noch nicht kennen (und Windows haben), können Sie es kostenlos ausprobieren. Sie können Visual Studio Express herunterladen, indem Sie die ASP.NET-Website besuchen. Wenn Sie eine Website lokal auf Ihrem Computer erstellen, können Sie die Website jederzeit ausführen, und Visual Studio startet schnell einen Server auf Ihrem Computer und ruft Ihre Website in Ihrem Standardbrowser auf.

Schritt 1: Erstellen Sie die ShoppingCart-Klasse

Wir brauchen einen Platz zum Speichern der Artikel im Warenkorb sowie Funktionen zum Bearbeiten der Artikel. Wir werden dafür eine ShoppingCart-Klasse erstellen. Diese Klasse verwaltet auch den Sitzungsspeicher.

Zuerst müssen wir den Ordner App_Code erstellen. Gehen Sie dazu zum Menü "Website", dann zu "ASP.NET-Ordner hinzufügen" und wählen Sie "App_Code". Hier platzieren wir alle unsere benutzerdefinierten Klassen. Auf diese Klassen kann automatisch über den Code auf einer unserer Seiten zugegriffen werden (wir müssen nicht mit etwas ähnlichem wie "include" oder etwas anderem darauf verweisen). Anschließend können wir diesem Ordner eine Klasse hinzufügen, indem Sie mit der rechten Maustaste auf den Ordner klicken und "Add New Item" auswählen.

Kurztipp: Regionen in ASP.NET lassen sich sehr gut organisieren und Code gruppieren. Das Schönste an ihnen ist, dass Sie Regionen öffnen und schließen können, um die Menge an Code, die Sie betrachten, zu minimieren oder sich schnell in einer Datei zurechtzufinden.

Schritt 2: Die CartItem- und Produktklassen

Mit einem Platz zum Speichern unserer Warenkorbartikel müssen wir in der Lage sein, Informationen zu jedem Artikel zu speichern. Wir erstellen eine CartItem-Klasse, die dies erledigt. Wir werden auch eine einfache Produktklasse erstellen, die eine Möglichkeit simuliert, Daten über die von uns verkauften Produkte abzurufen.

Die CartItem-Klasse:

Die Produktklasse:

Definition: Eine "property" in ASP.NET ist eine Variable in einer Klasse, die einen Setter, einen Getter oder beides hat. Dies ähnelt anderen Sprachen, aber in ASP.NET bezieht sich die Worteigenschaft speziell darauf. Ein Beispiel hierfür ist die ProductId-Eigenschaft in der CartItem-Klasse. Es ist nicht einfach eine Variable in einer Klasse mit einer Methode zum Abrufen oder Festlegen. Es wird auf besondere Weise mit get{} und set{} Blöcken deklariert.

Fügen wir Artikel zum Warenkorb hinzu

Nachdem wir unsere Köpfe so lange im Code haben, ist es Zeit, etwas Visuelles zu tun. Diese Seite ist einfach eine Möglichkeit, Artikel in den Warenkorb zu legen. Alles was wir brauchen sind ein paar Artikel mit "Add to Cart" -Links. Lassen Sie uns diesen Code in die Seite Default.aspx einfügen.

Wie Sie sehen, passiert hier nur, dass wir einige LinkButtons haben, denen OnClick-Ereignishandler zugeordnet sind.

Auf der CodeBehind-Seite haben wir 4 Ereignishandler. Wir haben einen für jeden LinkButton, der nur einen Artikel zum Warenkorb hinzufügt und den Benutzer weiterleitet, seinen Warenkorb anzuzeigen. Wir haben auch einen Page_Load-Ereignishandler, der standardmäßig von der IDE erstellt wird und den wir nicht benötigen.

Erstellen Sie die Warenkorbseite

Endlich, was wir die ganze Zeit vorbereitet haben - der Einkaufswagen! Schauen wir uns zuerst ViewCart.aspx an und ich werde es danach erklären.

Das GridView-Steuer -element ist ein leistungsstarkes Steuerelement, das auf den ersten Blick kompliziert erscheinen kann. Ich werde die Stilelemente nicht diskutieren, da sie selbsterklärend sind. (Es gibt hier einige Prinzipien, die ich nicht ausführlich erläutern werde. Ich werde nur versuchen, die Hauptidee zu vermitteln.) Lassen Sie es uns zusammenfassen.

  • Wenn Sie der GridView eine ID geben, können wir mit dieser ID vom CodeBehind aus auf die GridView zugreifen.
  • Die GridView generiert automatisch Spalten und Spaltennamen aus den von uns bereitgestellten Daten, sofern wir dies nicht ausdrücklich anweisen.
  • Wir können dem GridView mitteilen, was angezeigt werden soll, falls wir es ohne Daten liefern.
  • Wir möchten die Fußzeile anzeigen, damit wir den Gesamtpreis anzeigen können.
  • Es ist schön, wenn wir ein Array von ProductIds nach dem Zeilenindex indizieren, wenn wir die Menge eines Warenkorbartikels im CodeBehind aktualisieren. Dies wird das für uns tun:
  • Wir benötigen Ereignisse, um auf zwei Ereignisse zu reagieren: RowDataBound und RowCommand. Grundsätzlich wird RowDataBound ausgelöst, wenn GridView eine Zeile unserer Daten nimmt und sie der Tabelle hinzufügt. Wir verwenden dieses Ereignis nur, um auf die gebundene Fußzeile zu reagieren, damit wir anpassen können, was dort angezeigt werden soll. RowCommand wird ausgelöst, wenn in der GridView auf einen Link oder eine Schaltfläche geklickt wird. In diesem Fall handelt es sich um den Link "Remove".

Lassen Sie uns nun über die Spalten sprechen. Wir definieren die Spalten hier und die GridView nimmt jede Zeile in den von uns bereitgestellten Daten und ordnet die Daten in dieser Zeile der Spalte zu, in der sie angezeigt werden soll. Die einfachste Spalte ist das BoundField. In unserem Fall wird in unserem CartItem-Objekt nach einer "Description" -Eigenschaft gesucht und in der ersten Spalte angezeigt. In der Kopfzeile dieser Spalte wird auch "Description" angezeigt.

Wir brauchten die Menge, um sie in einem Textfeld anzuzeigen, anstatt sie nur als Text anzuzeigen. Deshalb haben wir ein TemplateField verwendet. Mit dem TemplateField können Sie alles, was Sie wollen, in diese Spalte einfügen. Wenn Sie Daten aus der Zeile benötigen, fügen Sie einfach <% #Eval("PropertyName") %> ein. Der LinkButton, den wir in unser TemplateField einfügen, hat einen CommandName und ein CommandArgument, die beide an den RowCommand-Ereignishandler unseres GridView übergeben werden.

Das letzte, was hier erwähnt werden sollte, ist, dass für die letzten beiden BoundFields ein DataFormatString angegeben wurde. Dies ist nur eine der vielen Formatzeichenfolgen, die ASP.NET bereitstellt. Dieser formatiert die Nummer als Währung. Weitere Formatzeichenfolgen finden Sie in der Microsoft-Dokumentation.

Jetzt können wir uns die CodeBehind-Seite ansehen. Ich habe hier viele Kommentare abgegeben, um zu beschreiben, was passiert.

Das Endergebnis:

Jetzt haben wir einen gut funktionierenden Einkaufswagen!

Sie könnten auch mögen...

Screencast

Wie man eine Website mit ASP.NET 3.5 - Screencast suchen kann

Der 1. Oktober in Screencasts von Jeffrey Way

56

Ich freue mich sagen zu können, dass wir heute unseren ersten Artikel auf ASP.NET veröffentlichen. In diesem Screencast zeige ich Ihnen, wie Sie eine einfache Suchfunktion in Ihre persönliche Website implementieren. Wir werden viele der neuen Funktionen in ASP.NET 3.5 erläutern, z. B. LINQ und viele der AJAX-Steuerelemente, die im Lieferumfang von Visual Studio/Web Developer enthalten sind.

Weiterlesen

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.