Cărțile de cumpărături sunt foarte importante și pot fi de multe ori cea mai intimidantă parte a construirii unui site de comerț electronic. Acest tutorial va arăta cât de ușor poate fi implementarea unui coș de cumpărături folosind ASP.NET. În plus, vor fi furnizate câteva explicații de bază pentru a ajuta programatorii ASP.NET să înțeleagă acest cadru minunat.

Prezentare generală rapidă a ASP.NET

Din moment ce ASP.NET nu a fost acoperit prea mult de NETTUTS, am crezut că ar fi bine să includeți o scurtă trecere în revistă a unora dintre lucrurile care o deosebesc de celelalte limbi.

1. Codul este compilat. Prima dată când o pagină ASP.NET este solicitată pe web, codul este compilat într-unul sau mai multe fișiere DLL de pe server. Acest lucru vă oferă posibilitatea de a copia codul pe server și vă oferă avantajul de viteză al codului compilat.
2. ASP.NET este un cadru orientat pe obiecte. Fiecare funcție, proprietate și pagină fac parte dintr-o clasă. De exemplu, fiecare pagină web este propria clasă care extinde clasa de pagini. Clasa Pagină are un eveniment care este declanșat când pagina Web este încărcată numită "Event Load Page". Puteți scrie o funcție care subscrie la eveniment și este chemată. Același principiu se aplică și altor evenimente, cum ar fi clicurile pe butoane și "drop-down" "evenimente index selectate".
3. Logica este separată de design și conținut. Ei interacționează unul cu celălalt, dar se află în locuri separate. În general, acest lucru permite proiectantului să proiecteze fără a-și face griji în legătură cu funcția și permite programatorului să se concentreze asupra funcției fără a privi designul. Aveți posibilitatea să alegeți să le puneți atât în ​​același fișier, fie în fișiere diferite. Acest lucru este similar modelului model-view-controller.

Dacă sunteți nou în ASP.NET (și aveți Windows), îl puteți încerca gratuit Puteți descărca Visual Studio Express vizitând site-ul web ASP.NET. De asemenea, atunci când creați un site local pe mașina dvs., puteți rula site-ul în orice moment și Visual Studio va porni rapid un server de pe computer și va trage în sus site-ul dvs. în browser-ul dvs. implicit.

Pasul 1: Creați Clasa ShoppingCart

Avem nevoie de un loc pentru a stoca elementele din coșul de cumpărături, precum și funcții pentru a manipula elementele. Vom crea o clasă ShoppingCart pentru asta. Această clasă va gestiona, de asemenea, stocarea sesiunii.

În primul rând, trebuie să creați directorul App_Code. Pentru a face acest lucru, mergeți la meniul "Site-ul", apoi pe "Adăugați dosarul ASP.NET" și alegeți "App_Code". Aici vom pune toate clasele personalizate. Aceste clase vor fi accesate în mod automat din cod în oricare dintre paginile noastre (nu trebuie să le menționăm folosind ceva similar cu "include" sau orice altceva). Apoi, putem adăuga o clasă la acel dosar făcând clic dreapta pe dosar și selectând "Adăugați un element nou".

Sfat rapid: Regiunile din ASP.NET sunt foarte bine organizate și grupate împreună. Cel mai frumos lucru despre ei este că puteți să deschideți și să închideți regiunile pentru a minimiza cantitatea de cod pe care o căutați sau pentru a găsi rapid drumul în jurul unui fișier.

 folosind System.Collections.Generic; utilizând System.Web; / ** * Clasa ShoppingCart * * Menține elementele aflate în cărucior și oferă metode pentru manipularea lor * / public class ShoppingCart #region Proprietăți Lista publică Elemente get; set privat;  #endregion #region Implementarea Singleton // Proprietățile readonly pot fi setate numai în inițializare sau într-un constructor public static cititorly ShoppingCart; // Constructorul static este apelat de îndată ce clasa este încărcată în memoria statică ShoppingCart () // Dacă coșul nu este în sesiune, creați-l și puneți-l acolo // Altfel, obțineți-l din sesiune dacă (HttpContext .Current.Session ["ASPNETShoppingCart"] == null) Instance = nou ShoppingCart (); Instance.Items = Listă nouă(); HttpContext.Current.Session ["ASPNETShoppingCart"] = instanță;  altceva Instance = (ShoppingCart) HttpContext.Current.Session ["ASPNETShoppingCart"];  // Un constructor protejat asigură faptul că un obiect nu poate fi creat din afara ShoppingCart protejat ()  #endregion #region Metode de modificare a elementelor / ** * AddItem () - Adaugă un element în AddItem (int productId) // Creați un element nou pentru a adăuga în coș CartItem newItem = new CartItem (productId); // Dacă acest element există deja în lista noastră de elemente, măriți cantitatea // În caz contrar, adăugați noul element în listă dacă (Items.Contains (newItem)) foreach (elementul CartItem în Elemente) if (item.Equals (newItem)) item.Quantity ++; întoarcere;  altceva newItem.Quantity = 1; Items.Add (newItem);  / ** * SetItemQuantity () - Modifică cantitatea unui element din cărucior * / void publice SetItemQuantity (int productId, int quantity) // Dacă setăm cantitatea la 0, == 0) RemoveItem (productId); întoarcere;  // Găsiți elementul și actualizați cantitatea CartItem updatedItem = new CartItem (productId); foreach (elementul CartItem din Elemente) if (item.Equals (updatedItem)) item.Quantity = quantity; întoarcere;  / ** * RemoveItem () - Înlăturarea unui element din coșul de cumpărături * / public void RemoveItem (int productId) CartItem removedItem = CartItem nou (productId); Items.Remove (removedItem);  #endregion #region Metode de raportare / ** * GetSubTotal () - returnează prețul total al tuturor elementelor * înainte de impozitare, transport, etc * / public zecimal GetSubTotal () decimal subTotal = 0; foreach (elementul CartItem din Elemente) subTotal + = item.TotalPrice; retur subtotal;  #endregion

Pasul 2: Clasele Cartitem & produse

Cu un spațiu pentru stocarea articolelor de coș de cumpărături, trebuie să putem stoca informații despre fiecare element. Vom crea o clasă CartItem care va face acest lucru. Vom crea, de asemenea, o clasă de produse simplă, care va simula o modalitate de a obține informații despre produsele pe care le vindem.

Clasa CartItem:

 utilizând Sistemul; / ** * Clasa CartItem * * În principiu, o structură pentru păstrarea datelor elementului * / clasa publică CartItem: IEquatable #regiunea Proprietăți // Un loc pentru a stoca cantitatea în coșul de cumpărături // Această proprietate are un getter și setter implicit. public int Cantitate get; a stabilit;  private int _productId; public int ProdusI get return _productId;  set // Pentru a vă asigura că obiectul Prod va fi re-creat _product = null; _productId = valoare;  produs privat _product = null; public Produs Prod get // Initializare Lazy - obiectul nu va fi creat pana cand nu este necesar daca (_product == null) _product = produs nou (ProductId);  return _product;  șir public Descriere get return Prod.Description;  zecimal public UnitPrice get return Prod.Price;  public zecimal TotalPrice get return UnitPrice * Cantitate;  #endregion // Constructorul CartItem are nevoie doar de un produsIndividual CartItem (int productId) this.ProductId = productId;  / ** * Egal () - Necesar pentru implementarea interfetei IEquatable * Testeaza daca acest element este sau nu egal cu parametrul * Aceasta metoda este numita de metoda Contains () din clasa List * Am folosit aceasta metoda Contains în metoda AddItem () ShoppingCart * / public bool Equals (element CartItem) return item.ProductId == this.ProductId; 

Clasa de produse:

 / ** * Clasa Produs * * Aceasta este doar pentru a simula o modalitate de a accesa date despre produsele noastre * / clasa publica Produsul public int Id get; a stabilit;  zecimal public Preț get; a stabilit;  șir public Descriere get; a stabilit;  produs public (int id) this.Id = id; comutator (id) caz 1: this.Price = 19.95m; this.Description = "Pantofi"; pauză; cazul 2: această.Price = 9,95m; this.Description = "Shirt"; pauză; cazul 3: această.Price = 14,95m; this.Description = "Pantaloni"; pauză; 

Definiție: O "proprietate" în ASP.NET este o variabilă într-o clasă care are un setter, un getter sau ambele. Acest lucru este similar cu alte limbi, dar în ASP.NET, cuvântul proprietate se referă în mod specific la acest lucru. Un exemplu este proprietatea ProductId din clasa CartItem. Nu este pur și simplu o variabilă într-o clasă, cu o metodă de a obține sau ao seta. Este declarată într-un mod special cu blocurile și set .

Să adăugăm elemente la coș

După ce ne-am pus capul în cod de mult timp, este timpul să facem ceva vizibil. Această pagină va fi pur și simplu o modalitate de a adăuga elemente în coș. Tot ce avem nevoie este câteva articole cu link-uri "Adăugare în coș". Să punem acest cod în pagina Default.aspx.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>        
 
 
Magazinul meu
 
 
Pantofi - Adaugă în coș
 
Cămaşă - Adaugă în coș
 
Pantaloni - Adaugă în coș
 
 Vizualizare coș 
 
  

După cum puteți vedea, singurul lucru care se întâmplă aici este că avem câteva linkuri LinkButtons care au asociați cu ei pe handlers de evenimente OnClick.

În pagina cod-din spate, avem 4 procesatori de evenimente. Avem unul pentru fiecare LinkButton care adaugă doar un element la coșul de cumpărături și redirecționează utilizatorul pentru a-și vedea coșul de cumpărături. De asemenea, avem un handler de eveniment Page_Load creat de IDE în mod implicit, pe care nu trebuie să-l folosim.

 utilizând Sistemul; clasa parțială publică _Default: System.Web.UI.Page protejat void Page_Load (expeditor obiect, EventArgs e)  protejat void btnAddShoes_Click (expeditor obiect, EventArgs e) // Adăugați produsul 1 în coșul de cumpărături ShoppingCart.Instance.AddItem (1); // Redirecționați utilizatorul pentru a vedea coșul de cumpărături Response.Redirect ("ViewCart.aspx");  void protejat btnAddShirt_Click (expeditor obiect, EventArgs e) ShoppingCart.Instance.AddItem (2); Response.Redirect ( "ViewCart.aspx");  void protejat btnAddPants_Click (expeditor obiect, EventArgs e) ShoppingCart.Instance.AddItem (3); Response.Redirect ( "ViewCart.aspx"); 

Construiți pagina de coș de cumpărături

În cele din urmă, ceea ce ne-am pregătit pentru tot timpul - coșul de cumpărături! Să ne uităm mai întâi la ViewCart.aspx și o să explic asta după aceea.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %>        
 
 
Cărucior de cumpărături
 < Back to Products 

         „>
 „>       
  
 
  

Controlul GridView este un control puternic care poate părea complicat la început. Nu voi discuta elementele de stil pentru că ele sunt explicative. (Există câteva principii pe care nu le voi explica în profunzime. Voi încerca doar să înțeleg ideea principală). Să-l rupem.

• Oferirea GridView a unui ID ne va permite să accesăm GridView de la codul din spatele acestui cod.

  ID = "gvShoppingCart"

• GridView va genera în mod automat coloane și nume de coloane din datele pe care le furnizăm, cu excepția cazului în care îi spunem în mod special că nu.

  AutoGenerateColumns = "false"

• Putem spune GridView ce să afișeze în cazul în care nu îl furnizăm fără date.

  EmptyDataText = "Nu există nimic în coșul dvs. de cumpărături".

• Vrem să afișăm subsolul pentru a putea afișa prețul total.

  ShowFooter = "true"

• Va fi frumos pentru noi să avem o serie de ProductIds indexate de indicele rând atunci când actualizăm cantitatea unui articol de coș în codul din spate. Acest lucru va face asta pentru noi:

  DataKeyNames = "productId"

• Avem nevoie de evenimente pentru a răspunde la două evenimente: RowDataBound și RowCommand. Practic, RowDataBound este concediat atunci când GridView ia un șir de date și o adaugă la masă. Folosim numai acest eveniment pentru a răspunde la subsol fiind legat, astfel încât să putem personaliza ceea ce dorim afișat acolo. RowCommand este concediat atunci când se face clic pe un link sau pe un buton din interiorul GridView. În acest caz, este linkul "Eliminați".

  OnRowDataBound = "gvShoppingCart_RowDataBound" OnRowCommand = "gvShoppingCart_RowCommand"

Acum hai să vorbim despre coloane. Definim coloanele de aici si GridView va lua fiecare rand din datele pe care le furnizam si cartografiaza datele din acel rand in coloana pe care ar trebui sa o afiseze. Cea mai simpla coloana este BoundField. În cazul nostru, vom căuta o proprietate "Description" în obiectul CartItem și îl vom afișa în prima coloană. Antetul pentru acea coloană va afișa, de asemenea, "Descriere".

Aveam nevoie de cantitatea de afișat în interiorul unei casete de text, mai degrabă decât de afișarea ca text, așa că am folosit un TemplateField. TemplateField vă permite să plasați orice doriți în coloana respectivă. Dacă aveți nevoie de date din rând, introduceți doar <%# Eval("PropertyName") %>. LinkButton-ul pe care l-am pus în TemplateField are un CommandName și un CommandArgument, ambele care vor fi transmise procesorului de evenimente RowCommand al GridView.

Ultimul lucru pe care merită menționat este că ultimele două BoundFields au un DataFormatString specificat. Acesta este doar unul dintre numeroasele șiruri de formate pe care ASP.NET le oferă. Aceasta formatează numărul ca monedă. Consultați documentația Microsoft pentru alte șiruri de format.

Acum ne putem uita la pagina din spatele codului. Am furnizat multe comentarii aici pentru a descrie ce se întâmplă.

Rezultatul final:

Acum avem un coș de cumpărături frumos!

De asemenea, ați putea dori ...

Cum să căutați un site folosind ASP.NET 3.5 - screencast

1 octombrie în scenariile lui Jeffrey Way

56

Sunt fericit să spun că astăzi, vom posta primul nostru articol pe ASP.NET. În acest ecran, vă vom arăta cum să implementați o funcție de căutare simplă pe site-ul dvs. personal. Vom trece peste multe dintre noile caracteristici din ASP.NET 3.5, cum ar fi LINQ și multe dintre controalele AJAX livrate cu Visual Studio / Web Developer.

Continuați lectură

• Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.