I carrelli della spesa sono molto importanti e possono essere molte volte la parte più intimidatoria della costruzione di un sito di e-commerce. Questo tutorial mostrerà quanto sia facile implementare un carrello acquisti utilizzando ASP.NET. Inoltre, verranno fornite diverse spiegazioni di base per aiutare l'avvio dei programmatori ASP.NET a comprendere questo meraviglioso framework.

Panoramica rapida di ASP.NET

Poiché ASP.NET non è stato trattato troppo su NETTUTS, ho pensato che sarebbe opportuno includere una breve panoramica di alcune delle cose che lo distinguono dalle altre lingue.

1. Il codice è compilato La prima volta che viene richiesta una pagina ASP.NET sul Web, il codice viene compilato in uno o più file DLL sul server. Questo ti dà la possibilità di copiare semplicemente il codice sul server e ti dà il vantaggio di velocità del codice compilato.
2. ASP.NET è un framework orientato agli oggetti. Ogni funzione, proprietà e pagina fa parte di una classe. Ad esempio, ogni pagina Web è la sua classe che estende la classe Page. La classe Page ha un evento che viene attivato quando la pagina web viene caricata chiamata "Evento caricamento pagina". È possibile scrivere una funzione che si iscrive a quell'evento e viene richiamata. Lo stesso principio si applica ad altri eventi come gli eventi "click index" e "drop-down" "index selected changed".
3. La logica è separata dal design e dal contenuto. Interagiscono tra loro, ma sono in luoghi separati. In generale, ciò consente a un designer di progettare senza preoccuparsi della funzione e consente al programmatore di concentrarsi sulla funzione senza guardare al design. Hai la possibilità di metterli entrambi nello stesso file o in file diversi. Questo è simile al modello model-view-controller.

Se sei nuovo in ASP.NET (e hai Windows), puoi provarlo gratuitamente Puoi scaricare Visual Studio Express visitando il sito Web ASP.NET. Inoltre, quando si crea un sito Web localmente sul proprio computer, è possibile eseguire il sito Web in qualsiasi momento e Visual Studio avvierà rapidamente un server sul computer e visualizzerà il sito Web nel browser predefinito.

Passaggio 1: crea la classe ShoppingCart

Abbiamo bisogno di un posto dove riporre gli oggetti nel carrello e funzioni per manipolare gli oggetti. Creeremo una classe ShoppingCart per questo. Questa classe gestirà anche la memorizzazione della sessione.

Innanzitutto, dobbiamo creare la cartella App_Code. Per fare ciò, vai al menu "Sito web", quindi "Aggiungi cartella ASP.NET" e scegli "Codice_app". Qui è dove metteremo tutte le nostre classi personalizzate. Queste classi saranno automaticamente accessibili dal codice in qualsiasi delle nostre pagine (non abbiamo bisogno di fare riferimento a qualcosa di simile a "include" o altro). Quindi possiamo aggiungere una classe a quella cartella facendo clic destro sulla cartella e scegliendo "Aggiungi nuovo elemento".

Consiglio rapido: Le regioni in ASP.NET sono davvero belle da organizzare e raggruppare il codice. La cosa più bella di loro è che puoi aprire e chiudere le regioni per ridurre al minimo la quantità di codice che stai guardando o trovare rapidamente la strada per un file.

 using System.Collections.Generic; usando System.Web; / ** * La classe ShoppingCart * * Contiene gli elementi presenti nel carrello e fornisce i metodi per la loro manipolazione * / publicCart Shopping class #region Properties public List Articoli get; set privato;  #endregion #region Implementazione di Singleton // Le proprietà di sola lettura possono essere impostate solo in fase di inizializzazione o in un'istanza pubblica statica ShoppingCart di public static di costruzione pubblica; // Il costruttore statico viene chiamato non appena la classe viene caricata nella memoria statica ShoppingCart () // Se il carrello non è nella sessione, creane uno e mettilo lì // Altrimenti, prendilo dalla sessione if (HttpContext .Current.Session ["ASPNETShoppingCart"] == null) Instance = new ShoppingCart (); Instance.Items = nuova lista(); HttpContext.Current.Session ["ASPNETShoppingCart"] = Istanza;  else Instance = (ShoppingCart) HttpContext.Current.Session ["ASPNETShoppingCart"];  // Un costruttore protetto garantisce che un oggetto non possa essere creato da fuori ShoppingCart () protetto  #endione #region #region Method Modification Methods / ** * AddItem () - Aggiunge un elemento allo shopping * / public void AddItem (int productId) // Crea un nuovo elemento da aggiungere al carrello CartItem newItem = new CartItem (productId); // Se questo elemento esiste già nel nostro elenco di elementi, aumentare la quantità // Altrimenti, aggiungere il nuovo elemento all'elenco se (Items.Contains (newItem)) foreach (elemento CartItem negli articoli) if (item.Equals (nuovoItem)) item.Quantity ++; ritorno;  else newItem.Quantity = 1; Items.Add (newItem);  / ** * SetItemQuantity () - Cambia la quantità di un articolo nel carrello * / public void SetItemQuantity (int productId, int quantity) // Se impostiamo la quantità su 0, rimuoviamo interamente l'oggetto if (quantità == 0) RemoveItem (productId); ritorno;  // Trova l'oggetto e aggiorna la quantità CartItem updatedItem = new CartItem (productId); foreach (Item CartItem in Items) if (item.Equals (updatedItem)) item.Quantity = quantity; ritorno;  / ** * RemoveItem () - Rimuove un elemento dal carrello della spesa * / public void RemoveItem (int productId) CartItem removedItem = new CartItem (productId); Items.Remove (removedItem);  #endregion #region Reporting Methods / ** * GetSubTotal () - restituisce il prezzo totale di tutti gli articoli * prima di tasse, spedizione, ecc. * / decimale pubblico GetSubTotal () decimal subTotal = 0; foreach (elemento CartItem negli articoli) subTotal + = item.TotalPrice; return subTotal;  #endregion

Passaggio 2: CartItem e classi prodotto

Con un posto dove riporre i nostri articoli del carrello, dobbiamo essere in grado di memorizzare informazioni su ciascun articolo. Creeremo una classe CartItem che lo farà. Creeremo anche una semplice classe di prodotti che simulerà un modo per acquisire dati sui prodotti che vendiamo.

La classe CartItem:

 usando il sistema; / ** * The CartItem Class * * Fondamentalmente una struttura per contenere i dati degli articoli * / public class CartItem: IEquatable #region Properties // Un luogo in cui memorizzare la quantità nel carrello // Questa proprietà ha un getter implicito e setter. public int Quantity get; impostato;  private int _productId; public int ProductId get return _productId;  set // Per garantire che l'oggetto Prod venga ricreato _product = null; _productId = value;  prodotto privato _product = null; prodotto pubblico Prod get // Inizializzazione pigra: l'oggetto non verrà creato finché non sarà necessario se (_prodotto == null) _product = new Product (ProductId);  return _product;  public stringa Descrizione get return Prod.Description;  publicPimal UnitPrice get return Prod.Price;  public decimal TotalPrice get return UnitPrice * Quantity;  #endregion // Il costruttore CartItem ha solo bisogno di un prodotto ID pubblico CartItem (int productId) this.ProductId = productId;  / ** * Equals () - Necessario implementare l'interfaccia IEquatable * Verifica se questo elemento è uguale al parametro * Questo metodo viene chiamato dal metodo Contains () nella classe List * Abbiamo usato questo metodo Contains () nel metodo AddComm () di ShoppingCart * / public bool Equals (elemento CartItem) return item.ProductId == this.ProductId; 

La classe del prodotto:

 / ** * The Product class * * Questo serve solo per simulare un modo di accedere ai dati sui nostri prodotti * / public class Product public int Id get; impostato;  decimale pubblico Prezzo get; impostato;  stringa pubblica Descrizione get; impostato;  public Product (int id) this.Id = id; switch (id) case 1: this.Price = 19.95m; this.Description = "Scarpe"; rompere; caso 2: questo.Prezzo = 9,95 m; this.Description = "Camicia"; rompere; caso 3: questo.Prezzo = 14.95m; this.Description = "Pantaloni"; rompere; 

Definizione: Una "proprietà" in ASP.NET è una variabile in una classe che ha un setter, un getter o entrambi. Questo è simile ad altre lingue, ma in ASP.NET, la proprietà word si riferisce specificamente a questo. Un esempio di ciò è la proprietà ProductId nella classe CartItem. Non è semplicemente una variabile in una classe con un metodo per ottenerla o impostarla. È dichiarato in modo speciale con i blocchi e set .

Aggiungiamo articoli al carrello

Dopo aver avuto la testa nel codice per così tanto tempo, è tempo di fare qualcosa di visivo. Questa pagina sarà semplicemente un modo per aggiungere elementi al carrello. Tutto ciò di cui abbiamo bisogno sono alcuni elementi con i collegamenti "Aggiungi al carrello". Mettiamo questo codice nella pagina Default.aspx.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>        
 
 
Il mio negozio
 
 
Scarpe - Aggiungi al carrello
 
Camicia - Aggiungi al carrello
 
Pantaloni - Aggiungi al carrello
 
 Visualizza il carrello 
 
  

Come puoi vedere, l'unica cosa che succede qui è che abbiamo alcuni LinkButtons che hanno gestori di eventi OnClick associati a loro.

Nella pagina code-behind, abbiamo 4 gestori di eventi. Ne abbiamo uno per ogni LinkButton che aggiunge un articolo al carrello e reindirizza l'utente a visualizzare il suo carrello. Abbiamo anche un gestore di eventi Page_Load che viene creato dall'IDE per impostazione predefinita che non è stato necessario utilizzare.

 usando il sistema; public partial class _Default: System.Web.UI.Page protected void Page_Load (object mittente, EventArgs e)  protected void btnAddShoes_Click (object mittente, EventArgs e) // Aggiungi il prodotto 1 al carrello ShoppingCart.Instance.AddItem (1); // Reindirizza l'utente per visualizzare il suo carrello della spesa Response.Redirect ("ViewCart.aspx");  protected void btnAddShirt_Click (mittente dell'oggetto, EventArgs e) ShoppingCart.Instance.AddItem (2); Response.Redirect ( "ViewCart.aspx");  protected void btnAddPants_Click (mittente dell'oggetto, EventArgs e) ShoppingCart.Instance.AddItem (3); Response.Redirect ( "ViewCart.aspx"); 

Costruisci la pagina del carrello

Infine, quello che abbiamo preparato per tutto il tempo: il carrello della spesa! Guardiamo prima ViewCart.aspx e poi lo spiegherò.

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

         ">
 ">       
  
 
  

Il controllo GridView è un controllo potente che può sembrare complicato all'inizio. Non discuterò gli elementi di stile perché sono auto-esplicativi. (Ci sono alcuni principi qui che non ho intenzione di spiegare in modo approfondito. Sto solo cercando di ottenere l'idea principale). Scopriamolo.

• Dare un ID a GridView ci consentirà di accedere a GridView dal code-behind usando quell'ID.

  ID = "gvShoppingCart"

• GridView genererà automaticamente colonne e nomi di colonne dai dati che forniamo a meno che non lo diciamo espressamente.

  AutoGenerateColumns = "false"

• Possiamo dire al GridView cosa visualizzare nel caso in cui lo forniamo senza dati.

  EmptyDataText = "Non c'è niente nel tuo carrello."

• Vogliamo mostrare il footer in modo che possiamo mostrare il prezzo totale.

  ShowFooter = "true"

• Sarà bello per noi avere una serie di ProductIds indicizzati dall'indice row quando aggiorniamo la quantità di un articolo del carrello nel code-behind. Questo lo farà per noi:

  DataKeyNames = "ProductId"

• Abbiamo bisogno di eventi per rispondere a due eventi: RowDataBound e RowCommand. Fondamentalmente, RowDataBound viene generato quando GridView prende una riga dei nostri dati e la aggiunge alla tabella. Stiamo usando questo evento solo per rispondere al fatto che il footer viene associato in modo tale da poter personalizzare ciò che vogliamo visualizzato lì. RowCommand viene attivato quando si fa clic su un collegamento o un pulsante all'interno di GridView. In questo caso, è il collegamento "Rimuovi".

  OnRowDataBound = "gvShoppingCart_RowDataBound" OnRowCommand = "gvShoppingCart_RowCommand"

Ora parliamo delle colonne. Qui definiamo le colonne e GridView prenderà ogni riga dei dati che forniamo e mapperemo i dati in quella riga alla colonna in cui dovrebbe essere visualizzato. La colonna più semplice è il BoundField. Nel nostro caso, cercherà una proprietà "Description" nel nostro oggetto CartItem e la visualizzerà nella prima colonna. L'intestazione per quella colonna mostrerà anche "Descrizione".

Avevamo bisogno che la quantità fosse visualizzata all'interno di una casella di testo piuttosto che semplicemente visualizzata come testo, quindi abbiamo utilizzato un TemplateField. Il TemplateField ti permette di mettere quello che vuoi in quella colonna. Se hai bisogno di alcuni dati dalla riga, basta inserire <%# Eval("PropertyName") %>. Il LinkButton che abbiamo inserito nel nostro TemplateField ha un CommandName e un CommandArgument, entrambi i quali verranno passati al gestore di eventi RowCommand di GridView.

L'ultima cosa che vale la pena menzionare qui è che gli ultimi due campi vincolati hanno specificato una stringa DataFormat. Questa è solo una delle molte stringhe di formato fornite da ASP.NET. Questo formatta il numero come valuta. Vedere la documentazione Microsoft per altre stringhe di formato.

Ora possiamo guardare la pagina del codice sottostante. Ho fornito molti commenti qui per descrivere cosa sta succedendo.

Il risultato finale:

Ora abbiamo un carrello della spesa funzionante!

Anche tu potresti piacere ...

Come cercare un sito Web utilizzando ASP.NET 3.5 - Screencast

1 ottobre in Screencast di Jeffrey Way

56

Sono felice di dire che oggi pubblichiamo il nostro primo articolo su ASP.NET. In questo screencast, ti mostrerò come implementare una semplice funzionalità di ricerca nel tuo sito web personale. Analizzeremo molte delle nuove funzionalità di ASP.NET 3.5, come LINQ e molti dei controlli AJAX forniti con Visual Studio / Web Developer.

Continua a leggere

• Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.