Handlekurver er svært viktige og kan mange ganger være den mest skremmende delen av å bygge et e-handelsnettsted. Denne opplæringen vil vise hvor lett det kan være å implementere en handlekurv ved hjelp av ASP.NET. I tillegg vil flere grunnleggende forklaringer bli gitt for å hjelpe begynnelsen av ASP.NET-programmører å forstå dette fantastiske rammeverket.

Rask oversikt over ASP.NET

Siden ASP.NET ikke har blitt dekket for mye på NETTUTS, syntes jeg det ville være bra å ta en kort oversikt over noen av de tingene som skiller det fra andre språk.

1. Koden er kompilert. Første gang en ASP.NET-side blir bedt om via nettet, blir koden kompilert i en eller flere DLL-filer på serveren. Dette gir deg muligheten til å bare kopiere kode ut til serveren, og det gir deg hastighetsfordelen av kompilert kode.
2. ASP.NET er et objektorientert rammeverk. Hver funksjon, eiendom og side er en del av en klasse. For eksempel er hver nettside sin egen klasse som utvider sideklassen. Sideklassen har en hendelse som er avbrutt når nettsiden er lastet, kalt "Sidestrømshendelse". Du kan skrive en funksjon som abonnerer på den aktuelle hendelsen og er påkalt. Det samme prinsippet gjelder for andre hendelser som knappeklikk og "rullegardin" "valgt indeks endret" hendelser.
3. Logikken er skilt fra design og innhold. De samhandler med hverandre, men de er på forskjellige steder. Generelt gjør dette at en designer kan designe uten å bekymre seg for funksjonen, og det gjør at programmereren kan fokusere på funksjon uten å se på designet. Du har valget om å sette dem både i samme fil eller i forskjellige filer. Dette ligner modellen modell-visning-kontrolleren.

Hvis du er ny på ASP.NET (og du har Windows), kan du prøve det gratis. Du kan laste ned Visual Studio Express ved å besøke ASP.NET nettsiden. Når du oppretter et nettsted lokalt på din maskin, kan du også kjøre nettstedet når som helst, og Visual Studio vil raskt starte en server på datamaskinen din og trekke opp nettstedet ditt i standard nettleser.

Trinn 1: Opprett ShoppingCart-klassen

Vi trenger et sted å lagre varene i handlekurven, samt funksjoner for å manipulere varene. Vi lager en ShoppingCart-klasse for dette. Denne klassen vil også håndtere økt lagring.

Først må vi opprette App_Code-mappen. For å gjøre dette, gå til "Nettsted" -menyen, deretter "Legg til ASP.NET-mappe", og velg "App_Code." Det er her vi skal sette alle våre tilpassede klasser. Disse klassene vil automatisk være tilgjengelige fra koden på noen av våre sider (vi trenger ikke å referere til det ved å bruke noe som ligner på "inkludere" eller noe). Da kan vi legge til en klasse i den mappen ved å høyreklikke på mappen og velge "Legg til nytt element."

Raskt tips: Regioner i ASP.NET er veldig hyggelige å organisere og gruppere sammen. Den fineste tingen om dem er at du kan åpne og lukke regioner for å minimere mengden kode du ser på eller raskt finne deg rundt en fil.

 bruker System.Collections.Generic; bruker System.Web; / ** * ShoppingCart-klassen * * Holder elementene som er i handlekurven og gir metoder for deres manipulering * / offentlig klasse ShoppingCart #region Egenskaper offentlig liste Elementer get; privat sett;  #endregion #region Singleton Implementation // Readonly egenskaper kan bare settes i initialisering eller i en konstruktør offentlig statisk, lettvint ShoppingCart Instance; // Den statiske konstruktøren kalles så snart klassen er lastet inn i minnet statisk ShoppingCart () // Hvis vognen ikke er i sesjonen, opprett en og sett den der // Ellers hent det fra økten hvis (HttpContext .Current.Session ["ASPNETShoppingCart"] == null) Instance = new ShoppingCart (); Instance.Items = ny liste(); HttpContext.Current.Session ["ASPNETShoppingCart"] = Instance;  else Instance = (ShoppingCart) HttpContext.Current.Session ["ASPNETShoppingCart"];  // En beskyttet konstruktør sikrer at en gjenstand ikke kan opprettes fra utenfor beskyttet ShoppingCart ()  #endregion #region Item Modification Methods / ** * AddItem () - Legger til et element til shopping * / public void AddItem (int productId) // Opprett et nytt element for å legge til i handlekurven CartItem newItem = nytt CartItem (productId); // Hvis dette elementet allerede finnes i vår liste over varer, øk mengden // Ellers legger du til det nye elementet i listen hvis (Items.Contains (newItem)) foreach (CartItem-element i elementer) hvis (item.Equals (newItem)) item.Quantity ++; komme tilbake;  else newItem.Quantity = 1; Items.Add (newItem);  / ** * SetItemQuantity () - Endrer mengden av et element i handlekurven * / offentlig tomgang SetItemQuantity (int produktId, int mengde) // Hvis vi setter mengden til 0, fjern elementet helt hvis == 0) RemoveItem (productId); komme tilbake;  // Finn varen og oppdatere mengden CartItem updatedItem = new CartItem (productId); foreach (CartItem element i elementer) if (item.Equals (updatedItem)) item.Quantity = quantity; komme tilbake;  / ** * RemoveItem () - Fjerner et element fra handlekurven * / public void RemoveItem (int productId) CartItem removedItem = new CartItem (productId); Items.Remove (removedItem);  #endregion #region Rapporteringsmetoder / ** * GetSubTotal () - returnerer totalprisen på alle elementene * før skatt, frakt, etc. * / offentlig desimal GetSubTotal () decimal subTotal = 0; foreach (CartItem element i elementer) subTotal + = item.TotalPrice; returnere subTotal;  #endregion

Trinn 2: CartItem & Product Classes

Med et sted å lagre varekurvene våre, må vi kunne lagre informasjon om hvert enkelt produkt. Vi lager en CartItem-klasse som vil gjøre dette. Vi lager også en enkel produktklasse som vil simulere en måte å få tak i data om produktene vi selger.

CartItem-klassen:

 bruker system; / ** * CartItem Class * * I utgangspunktet en struktur for å holde elementdata * / offentlig klasse CartItem: IEquatable #region Properties // Et sted å lagre mengden i handlekurven // Denne egenskapen har en implisitt getter og setter. offentlig int Antall get; sett;  privat int _productId; offentlig int ProductId get return _productId;  sett // For å sikre at Prod-objektet blir re-created _product = null; _productId = value;  privat produkt _product = null; Offentlig produktprodusent get // Lazy initialization - objektet vil ikke bli opprettet før det trengs hvis (_product == null) _product = nytt produkt (ProductId);  returnér produkt;  offentlig streng Beskrivelse get return Prod.Description;  offentlige desimal UnitPrice get return Prod.Price;  offentlig desimal TotalPrice get return UnitPrice * Quantity;  #endregion // CartItem-konstruktøren trenger bare et produktDet offentlige CartItem (int productId) this.ProductId = productId;  / ** * Equals () - Trengs for å implementere IEquatable-grensesnittet * Tester hvorvidt dette elementet er lik parameteren * Denne metoden kalles av Inneholder () -metoden i listeklassen * Vi brukte denne innholdermetoden () i ShoppingCart AddItem () metoden * / public bool Equals (CartItem element) return item.ProductId == this.ProductId; 

Produktklassen:

 / ** * Produktklassen * * Dette er bare for å simulere noen måte å få tilgang til data om våre produkter * / offentlig klasse Produkt public int Id get; sett;  offentlige desimalpris get; sett;  offentlig streng Beskrivelse get; sett;  offentlig produkt (int id) this.Id = id; bytt (id) tilfelle 1: this.Price = 19.95m; this.Description = "Sko"; gå i stykker; tilfelle 2: this.Price = 9,95m; this.Description = "Shirt"; gå i stykker; sak 3: this.Price = 14.95m; this.Description = "Bukser"; gå i stykker; 

Definisjon: En "egenskap" i ASP.NET er en variabel i en klasse som har en setter, en getter eller begge deler. Dette ligner på andre språk, men i ASP.NET refererer ordet eiendom spesifikt til dette. Et eksempel på dette er ProductId-egenskapen i CartItem-klassen. Det er ikke bare en variabel i en klasse med en metode for å få eller sette den. Det er erklært på en spesiell måte med og sett blokker.

La oss legge til varer i handlekurven

Etter å ha hodet i koden så lenge er det på tide å gjøre noe visuelt. Denne siden vil bare være en måte å legge til varer i handlekurven. Alt vi trenger er noen få ting med "Legg til i handlekurven" -koblinger. La oss sette denne koden på Default.aspx-siden.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>        
 
 
Min butikk
 
 
sko - Legg i handlekurv
 
Skjorte - Legg i handlekurv
 
Bukser - Legg i handlekurv
 
 Se handlekurv 
 
  

Som du kan se, er det eneste som skjer her at vi har noen LinkButtons som har OnClick-hendelsesbehandlere tilknyttet dem.

På koden baksiden har vi 4 arrangementshåndterere. Vi har en for hver LinkButton som bare legger til et element i handlekurven og omdirigerer brukeren til å se sin handlevogn. Vi har også en Page_Load-hendelseshåndterer som er opprettet av IDE som standard som vi ikke trenger å bruke.

 bruker system; offentlig delklass _Default: System.Web.UI.Page protected void Page_Load (objekt sender, EventArgs e)  beskyttet void btnAddShoes_Click (objekt sender, EventArgs e) // Legg til produkt 1 i handlekurven ShoppingCart.Instance.AddItem (1); // Rediger brukeren for å se sin handlekurv Response.Redirect ("ViewCart.aspx");  beskyttet tomt btnAddShirt_Click (objekt sender, EventArgs e) ShoppingCart.Instance.AddItem (2); Response.Redirect ( "ViewCart.aspx");  beskyttet tomt btnAddPants_Click (objekt sender, EventArgs e) ShoppingCart.Instance.AddItem (3); Response.Redirect ( "ViewCart.aspx"); 

Bygg handlekurvssiden

Til slutt, hva har vi forberedt på hele tiden - handlekurven! La oss bare se på ViewCart.aspx først, og jeg vil forklare det etter det.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %>        
 
 
Handlevogn
 < Back to Products 

         ">
 ">       
  
 
  

GridView-kontrollen er en kraftig kontroll som kan virke komplisert først. Jeg vil ikke diskutere stilelementene fordi de er selvforklarende. (Det er noen prinsipper her som jeg ikke kommer til å forklare i dybden. Jeg skal bare prøve å få hovedideen på tvers). La oss slå det ned.

• Å gi GridView en ID vil tillate oss å få tilgang til GridView fra koden bak med den aktuelle IDen.

  ID = "gvShoppingCart"

• GridView genererer automatisk kolonnene og kolonnens navn fra dataene vi leverer med mindre vi spesifikt sier det ikke.

  AutoGenerateColumns = "false"

• Vi kan fortelle GridView hva som skal vises i tilfelle vi leverer det uten data.

  EmptyDataText = "Det er ingenting i handlekurven din."

• Vi vil vise footer slik at vi kan vise totalprisen.

  ShowFooter = "true"

• Det vil være fint for oss å ha et utvalg av ProductIds indeksert av radindeksen når vi oppdaterer mengden av en handlekurv i koden bak. Dette vil gjøre det for oss:

  DataKeyNames = "ProductID"

• Vi trenger hendelser for å svare på to hendelser: RowDataBound og RowCommand. I utgangspunktet blir RowDataBound avbrutt når GridView tar en rad av dataene våre og legger den til bordet. Vi bruker bare denne hendelsen til å svare på bunnteksten som er bundet slik at vi kan tilpasse det vi ønsker å vises der. RowCommand slås av når en kobling eller en knapp klikkes fra innsiden av GridView. I dette tilfellet er det "Fjern" -linken.

  OnRowDataBound = "gvShoppingCart_RowDataBound" OnRowCommand = "gvShoppingCart_RowCommand"

La oss nå snakke om kolonnene. Vi definerer kolonnene her, og GridView tar hver rad i dataene vi leverer, og karter dataene i den raden til kolonnen den skal vises i. Den enkleste kolonnen er BoundField. I vårt tilfelle vil det lete etter en "Beskrivelse" -egenskap i vårt CartItem-objekt og vise den i den første kolonnen. Overskriften for den kolonnen vil også vise "Beskrivelse."

Vi trengte mengden som skulle vises i en tekstboks i stedet for bare å vise som tekst, så vi brukte en TemplateField. Med TemplateField kan du sette hva du vil i den kolonnen. Hvis du trenger noen data fra raden, legger du bare inn <%# Eval("PropertyName") %>. LinkButton som vi legger inn i vår TemplateField har et CommandName og et CommandArgument, som begge vil bli sendt til vår GridViews RowCommand event handler.

Den siste tingen å nevne her er at de to siste BoundFieldene har en DataFormatString spesifisert. Dette er bare en av de mange formatstrengene som ASP.NET gir. Denne formaterer tallet som en valuta. Se Microsoft-dokumentasjonen for andre formatstrenger.

Nå kan vi se på koden baksiden. Jeg har levert mange kommentarer her for å beskrive hva som skjer.

Sluttresultatet:

Nå har vi en fin arbeids handlekurv!

Du kan også like ...

Slik søker du et nettsted ved hjelp av ASP.NET 3.5 - screencast

1. oktober i Screencasts av Jeffrey Way

56

Jeg er glad for å si at i dag legger vi inn vår aller første artikkel på ASP.NET. I denne skjermbildet viser jeg deg hvordan du implementerer en enkel søkefunksjonalitet i ditt personlige nettsted. Vi går over mange av de nye funksjonene i ASP.NET 3.5, for eksempel LINQ og mange av AJAX-kontrollene som leveres med Visual Studio / Web Developer.

Fortsett å lese

• Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.