Winkelwagentjes zijn erg belangrijk en kunnen vaak het meest intimiderende onderdeel zijn van het bouwen van een e-commercesite. Deze zelfstudie laat zien hoe gemakkelijk het is om een ​​winkelwagentje te implementeren met behulp van ASP.NET. Daarnaast zullen verschillende basisverklaringen worden gegeven om beginnende ASP.NET-programmeurs dit prachtige kader te helpen begrijpen.

Snel overzicht van ASP.NET

Aangezien ASP.NET nog niet te veel op NETTUTS is gedekt, dacht ik dat het goed zou zijn om een ​​kort overzicht te geven van enkele dingen die het van andere talen onderscheiden.

1. Code is gecompileerd. De eerste keer dat een ASP.NET-pagina wordt aangevraagd via internet, wordt de code gecompileerd tot een of meer DLL-bestanden op de server. Dit geeft u de mogelijkheid om gewoon code naar de server te kopiëren en het geeft u het snelheidsvoordeel van gecompileerde code.
2. ASP.NET is een objectgeoriënteerd framework. Elke functie, eigenschap en pagina maakt deel uit van een klasse. Elke webpagina is bijvoorbeeld een eigen klasse die de klasse Page uitbreidt. De klasse Page heeft een gebeurtenis die wordt geactiveerd wanneer de webpagina wordt geladen, de "gebeurtenis pagina laden". U kunt een functie schrijven die zich op die gebeurtenis abonneert en wordt opgeroepen. Hetzelfde principe is van toepassing op andere evenementen zoals klikken op de knop en "drop-down" "geselecteerde index gewijzigd" -gebeurtenissen.
3. De logica staat los van het ontwerp en de inhoud. Ze communiceren met elkaar, maar ze bevinden zich op verschillende plaatsen. Over het algemeen stelt dit een ontwerper in staat te ontwerpen zonder zich zorgen te hoeven maken over de functie en kan de programmeur zich op functionaliteit concentreren zonder naar het ontwerp te kijken. Je hebt de keuze om ze allebei in hetzelfde bestand of in verschillende bestanden te plaatsen. Dit is vergelijkbaar met model-view-controller model.

Als u nog niet bekend bent met ASP.NET (en Windows hebt), kunt u het gratis proberen. U kunt Visual Studio Express downloaden door naar de ASP.NET-website te gaan. Als u een website lokaal op uw computer maakt, kunt u de website op elk gewenst moment gebruiken en start Visual Studio snel een server op uw computer en opent u uw website in uw standaardbrowser.

Stap 1: Maak de ShoppingCart-klasse

We hebben een plaats nodig om de items in het winkelwagentje op te slaan, evenals functies om de items te manipuleren. We zullen hiervoor een ShoppingCart-klasse maken. Deze klasse beheert ook sessieopslag.

Eerst moeten we de map App_Code maken. Ga hiervoor naar het menu "Website", vervolgens naar "ASP.NET-map toevoegen" en kies "App_Code". Hier plaatsen we al onze aangepaste klassen. Deze klassen zijn automatisch toegankelijk via de code op een van onze pagina's (we hoeven er niet naar te verwijzen met iets dat lijkt op "opnemen" of iets anders). Vervolgens kunnen we een klasse aan die map toevoegen door met de rechtermuisknop op de map te klikken en 'Nieuw item toevoegen' te kiezen.

Snelle tip: Regio's in ASP.NET zijn erg leuk om samen code te organiseren en te groeperen. Het leuke aan hen is dat je regio's kunt openen en sluiten om de hoeveelheid code die je bekijkt tot een minimum te beperken of om snel een weg te vinden in een bestand.

 met behulp van System.Collections.Generic; met behulp van System.Web; / ** * De klasse ShoppingCart * * Bevat de items in de winkelwagen en biedt methoden voor hun manipulatie * / public class ShoppingCart #region Properties public list Items krijgen; privé set;  #endregion #region Implementatie Singleton // Alleen-lezen eigenschappen kunnen alleen worden ingesteld in de initialisatie of in een constructor public static readonly ShoppingCart Instance; // De statische constructor wordt opgeroepen zodra de klasse in het geheugen is geladen static Winkelwagentje () // Als de winkelwagen zich niet in de sessie bevindt, maakt u er een en plaatst u deze daar // Anders haalt u deze uit de sessie if (HttpContext .Current.Session ["ASPNETShoppingCart"] == null) Instance = new ShoppingCart (); Instance.Items = nieuwe lijst(); HttpContext.Current.Session ["ASPNETShoppingCart"] = instantie;  else Instance = (Winkelwagentje) HttpContext.Current.Session ["ASPNETShoppingCart"];  // Een beschermde constructor zorgt ervoor dat een object niet kan worden gemaakt van extern beschermd ShoppingCart ()  #endregion #region Item Modification Methods / ** * AddItem () - Voegt een item toe aan het winkelen * / public void AddItem (int productId) // Maak een nieuw item om toe te voegen aan de winkelwagen CartItem newItem = new CartItem (productId); // Als dit item al in onze lijst met items voorkomt, verhoog dan de hoeveelheid // Anders, voeg het nieuwe item toe aan de lijst als (Items.Contains (newItem)) foreach (Itemitemitem in items) if (item.Equals (nieuw item)) item.Quantity ++; terug te keren;  else newItem.Quantity = 1; Items.Add (newItem);  / ** * SetItemQuantity () - Wijzigt de hoeveelheid van een item in de winkelwagen * / public void SetItemQuantity (int productId, int quantity) // Als we de hoeveelheid instellen op 0, verwijder het item dan volledig als (hoeveelheid == 0) RemoveItem (productId); terug te keren;  // Zoek het item en update de hoeveelheid CartItem updatedItem = new CartItem (productId); foreach (Item CartItem in Items) if (item.Equals (updatedItem)) item.Quantity = quantity; terug te keren;  / ** * RemoveItem () - Verwijdert een artikel uit het winkelwagentje * / public void RemoveItem (int productId) CartItem removedItem = new CartItem (productId); Items.Remove (removedItem);  #endregion #region Reporting Methods / ** * GetSubTotal () - geeft als resultaat de totale prijs van alle items * vóór belasting, verzending, etc. * / public decimal GetSubTotal () decimal subtotaal = 0; foreach (item CartItem in items) subtotaal + = item.Totaalprijs; return subtotaal;  #endregion

Stap 2: De cartItem & Product Classes

Met een plek om onze winkelwagen-items op te slaan, moeten we informatie over elk item kunnen opslaan. We zullen een CartItem-klasse maken die dit zal doen. We zullen ook een eenvoudige productklasse maken die een manier zal simuleren om gegevens te verzamelen over de producten die we verkopen.

De klasse CartItem:

 systeem gebruiken; / ** * De klasse CartItem * * Fundamenteel een structuur voor het bewaren van artikelgegevens * / public class CartItem: IEquatable #region Properties // Een plaats om de hoeveelheid in de winkelwagen op te slaan // Deze eigenschap heeft een impliciete getter en een setter. public int Quantity get; vast te stellen;  private int _productId; public int ProductId krijg return _productId;  set // Om ervoor te zorgen dat het Prod-object opnieuw wordt gemaakt _product = null; _productId = waarde;  privéproduct _product = null; public Product Prod get // Lazy initialization - het object wordt pas gemaakt als het nodig is als (_product == null) _product = nieuw product (ProductId);  return _product;  public string Description krijg return Prod.Description;  public decimal UnitPrice krijg return Prod.Price;  public decimal TotalPrice krijg return UnitPrice * Quantity;  # endregion // CartItem constructor heeft gewoon een productId public CartItem (int productId) nodig this.ProductId = productId;  / ** * Gelijk aan () - Nodig om de IEquatable-interface te implementeren * Test of dit item gelijk is aan de parameter * Deze methode wordt aangeroepen door de methode Contains () in de klasse List * We hebben deze methode Contains () gebruikt in de ShoppingCart AddItem () -methode * / public bool Equals (CartItem-item) return item.ProductId == this.ProductId; 

De klasse Product:

 / ** * De productklasse * * Dit is slechts om een ​​manier te simuleren om toegang te krijgen tot gegevens over onze producten * / public class Product public int Id get; vast te stellen;  public decimal Prijs get; vast te stellen;  public string Description get; vast te stellen;  public Product (int id) this.Id = id; schakelen (id) case 1: this.Price = 19.95m; this.Description = "Schoenen"; breken; geval 2: this.Price = 9.95m; this.Description = "Shirt"; breken; case 3: this.Price = 14.95m; this.Description = "Broek"; breken; 

Definitie: Een "eigenschap" in ASP.NET is een variabele in een klasse met een setter, een getter of beide. Dit is vergelijkbaar met andere talen, maar in ASP.NET verwijst het woord eigenschap hier specifiek naar. Een voorbeeld hiervan is de eigenschap ProductId in de klasse CartItem. Het is niet alleen een variabele in een klas met een methode om het te krijgen of in te stellen. Het wordt op een speciale manier verklaard met get en set blokken.

Laten we items toevoegen aan de winkelwagen

Nadat we zo lang ons hoofd in de code hebben gehouden, is het tijd om iets visueels te doen. Deze pagina is gewoon een manier om items aan het winkelwagentje toe te voegen. Alles wat we nodig hebben, is een paar items met links naar 'Toevoegen aan winkelwagentje'. Laten we deze code op de Default.aspx-pagina plaatsen.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>        
 
 
Mijn winkel
 
 
Schoenen - Voeg toe aan winkelmandje
 
overhemd - Voeg toe aan winkelmandje
 
Broek - Voeg toe aan winkelmandje
 
 Bekijk winkelwagen 
 
  

Zoals u ziet, gebeurt hier alleen dat we een paar LinkButtons hebben waaraan OnClick-gebeurtenishandlers zijn gekoppeld.

Op de achterliggende code hebben we 4 gebeurtenishandlers. We hebben er één voor elke LinkButton die net een item aan het winkelwagentje toevoegt en de gebruiker doorverwijst om zijn winkelwagentje te bekijken. We hebben ook een gebeurtenishandler Page_Load die standaard is gemaakt door de IDE en die we niet hoefden te gebruiken.

 systeem gebruiken; openbare gedeeltelijke klasse _Default: System.Web.UI.Page protected void Page_Load (object afzender, EventArgs e)  beschermde ongeldig btnAddShoes_Click (object afzender, EventArgs e) // Voeg product 1 toe aan het winkelwagentje ShoppingCart.Instance.AddItem (1); // Leid de gebruiker om zijn winkelmandje Response.Redirect ("ViewCart.aspx") te bekijken;  protected void btnAddShirt_Click (object afzender, EventArgs e) ShoppingCart.Instance.AddItem (2); Response.Redirect ( "ViewCart.aspx");  protected void btnAddPants_Click (object afzender, EventArgs e) ShoppingCart.Instance.AddItem (3); Response.Redirect ( "ViewCart.aspx"); 

Bouw de winkelwagenpagina

Eindelijk, wat we ons de hele tijd hebben voorbereid - het winkelwagentje! Laten we eerst eerst naar ViewCart.aspx kijken en ik zal het daarna uitleggen.

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

         ">
 ">       
  
 
  

De GridView-besturing is een krachtige besturing die in eerste instantie ingewikkeld lijkt. Ik zal de stijlelementen niet bespreken omdat ze voor zich spreken. (Er zijn enkele principes hier die ik niet in de diepte ga uitleggen, ik ga gewoon proberen het hoofdidee over te brengen). Laten we het afbreken.

• Door de GridView een ID te geven, hebben we toegang tot de GridView van de code achter die ID.

  ID = "gvShoppingCart"

• De GridView genereert automatisch kolommen en kolomnamen op basis van de gegevens die we leveren, tenzij we dit specifiek aangeven om dat niet te doen.

  AutoGenerateColumns = "false"

• We kunnen de GridView weergeven wat moet worden weergegeven als we deze gegevens leveren zonder gegevens.

  EmptyDataText = "Er staat niets in uw winkelwagen."

• We willen het voettekst laten zien zodat we de totale prijs kunnen weergeven.

  ShowFooter = "true"

• Het zal voor ons een goed idee zijn om een ​​reeks producti's geïndexeerd door de rijindex te hebben wanneer we de hoeveelheid van een winkelwagentjeitem in de achterliggende code bijwerken. Dit zal ons dat aandoen:

  DataKeyNames = "ProductId"

• We hebben evenementen nodig om te reageren op twee evenementen: RowDataBound en RowCommand. In principe wordt RowDataBound geactiveerd wanneer de GridView een rij van onze gegevens neemt en deze aan de tabel toevoegt. We gebruiken deze gebeurtenis alleen om te reageren op het voetgedeelte dat wordt gebonden, zodat we kunnen aanpassen wat we daar willen weergeven. RowCommand wordt afgevuurd wanneer vanuit de GridView op een koppeling of een knop wordt geklikt. In dit geval is dit de link "Verwijderen".

  OnRowDataBound = "gvShoppingCart_RowDataBound" OnRowCommand = "gvShoppingCart_RowCommand"

Laten we het nu hebben over de kolommen. We definiëren hier de kolommen en de GridView neemt elke rij in de gegevens die we leveren en plaatst de gegevens in die rij in de kolom waarin deze moet worden weergegeven. De eenvoudigste kolom is het BoundField. In ons geval gaat het zoeken naar een eigenschap "Description" in ons object CartItem en geeft dit weer in de eerste kolom. In de header voor die kolom wordt ook 'Beschrijving' weergegeven.

We hadden de hoeveelheid nodig om in een tekstvak weer te geven in plaats van alleen als tekst weer te geven, dus we gebruikten een sjabloonveld. Met Templatefield kunt u alles in die kolom plaatsen wat u maar wilt. Als je gegevens uit de rij nodig hebt, voeg je deze gewoon in <%# Eval("PropertyName") %>. De LinkButton die we in onze TemplateField plaatsen heeft een CommandName en een CommandArgument, die beide zullen worden doorgegeven aan onze RowCommand event handler van GridView.

Het laatste wat het vermelden waard is, is dat op de laatste twee BoundFields een DataFormatString is opgegeven. Dit is slechts een van de vele indelingsstrings die ASP.NET biedt. Deze formatteert het nummer als een valuta. Raadpleeg de Microsoft-documentatie voor andere indelingsreeksen.

Nu kunnen we de achterliggende code bekijken. Ik heb hier veel opmerkingen gegeven om te beschrijven wat er aan de hand is.

Het eindresultaat:

Nu hebben we een mooie werkende winkelwagen!

You Also Might Like ...

Hoe een website te zoeken met behulp van ASP.NET 3.5 - screencast

1 oktober in Screencasts door Jeffrey Way

56

Ik ben blij om te zeggen dat we vandaag ons allereerste artikel op ASP.NET plaatsen. In deze screencast laat ik u zien hoe u een eenvoudige zoekfunctionaliteit in uw persoonlijke website kunt implementeren. We zullen veel van de nieuwe functies in ASP.NET 3.5 bespreken, zoals LINQ en veel van de AJAX-besturingselementen die worden meegeleverd met Visual Studio / Web Developer.

Lees verder

• Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.