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

Desarrollar un carrito de compras en ASP.NET

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Los carritos de compras son muy importantes y muchas veces pueden ser la parte más intimidante del desarrollo de un sitio de comercio electrónico. Este tutorial te mostrará qué tan fácil puede ser implementar un carrito de compras utilizando ASP.NET. Además, se proporcionarán varias explicaciones básicas para ayudar a los programadores principiantes de ASP.NET a comprender este maravilloso framework.


Descripción rápida de ASP.NET

Dado que ASP.NET no se ha cubierto demasiado en NETTUTS, pensé que sería bueno incluir una breve descripción de algunas de las cosas que lo distinguen de otros idiomas.

  1. El código está compilado. La primera vez que se solicita una página ASP.NET a través de la web, el código se compila en uno o más archivos DLL en el servidor. Esto te brinda la capacidad de simplemente copiar el código al servidor y te brinda el beneficio de la velocidad del código compilado.
  2. ASP.NET es un framework orientado a objetos. Cada función, propiedad y página es parte de una clase. Por ejemplo, cada página web es su propia clase que extiende la clase Page. La clase Page tiene un evento que se activa cuando se carga la página web llamada "Evento de carga de página". Puedes escribir una función que se suscriba a ese evento y se active. El mismo principio se aplica a otros eventos como el clic del botón y los eventos "desplegables" del "índice seleccionado".
  3. La lógica está separada del diseño y del contenido. Ellos interactúan entre sí, pero están en lugares separados. Generalmente, esto permite que un diseñador haga lo suyo sin preocuparse por la función y le permite al programador enfocarse en la función sin mirar el diseño. Tiene la opción de ponerlos en el mismo archivo o en archivos diferentes. Esto es similar al modelo MVC (Modelo Vista y Controlador)

Si eres nuevo en ASP.NET (y tienes Windows), puedes probarlo gratis. Puedes descargar Visual Studio Express visitando el sitio web de ASP.NET. Además, cuando creas un sitio web localmente en tu máquina, puedes ejecutar el sitio web en cualquier momento y Visual Studio iniciará rápidamente un servidor en tu computadora y lo abrirá en tu navegador predeterminado.

Paso 1: Crea la clase ShoppingCart

Necesitamos un lugar para almacenar los artículos en el carrito de compras, así como funciones para manipularlos. Vamos a crear una clase ShoppingCart para esto. Esta clase también gestionará el almacenamiento de sesión.

Primero, tenemos que crear la carpeta App_Code. Para hacer esto, ve al menú "Sitio web", luego "Agregar carpeta ASP.NET", y elige "Código de aplicación". Aquí es donde pondremos todas nuestras clases personalizadas. Se podrá acceder a estas clases automáticamente desde el código en cualquiera de nuestras páginas (no es necesario que hagamos referencia usando algo similar a "include" ni nada). Luego podemos agregar una clase a esa carpeta haciendo clic derecho en la carpeta y seleccionando "Agregar nuevo elemento".

Sugerencia rápida: Las regiones en ASP.NET son realmente agradables de organizar y agrupar código. Lo mejor de ellos es que puedes abrir y cerrar regiones para minimizar la cantidad de código que estás buscando o buscar rápidamente un camino alrededor de un archivo.

Paso 2: El Cartitem y las clases de productos

Con un lugar para almacenar los artículos de nuestro carrito de compras, necesitamos poder almacenar información sobre cada artículo. Crearemos una clase de CartItem que hará esto. También crearemos una clase simple llamada Product que simulará una forma de obtener datos de los productos que estamos vendiendo.

La clase Cartitem:

La clase Product: 

Definición: Una "propiedad" (property) en ASP.NET es una variable en una clase que tiene un setter, un getter, o ambos. Esto es similar a otros idiomas, pero en ASP.NET, la palabra "property" se refiere específicamente a esto. Un ejemplo de esto es la propiedad ProductId en la clase CartItem. No es simplemente una variable en una clase con un método para obtenerla o establecerla. Se declara de una manera especial con los bloques get {} y set {}.

Vamos a añadir artículos al carrito

Después de tener nuestras cabezas en el código durante tanto tiempo, es hora de que hagamos algo visual. Esta página simplemente será una forma de agregar artículos al carrito. Todo lo que necesitamos es algunos artículos con enlaces "Agregar al carrito". Pongamos este código en la página Default.aspx.

Como puedes ver, lo único que sucede aquí es que tenemos algunos LinkButtons que tienen asociados los controladores de eventos OnClick.

En la página de código subyacente, tenemos 4 manejadores de eventos. Tenemos uno para cada LinkButton que solo agrega un artículo al carrito de compras y redirige al usuario para que vea su carrito. También tenemos un controlador de eventos Page_Load que es creado por el IDE de forma predeterminada y que no necesitamos usar.

Desarrollar la página del carrito de compras

Finalmente, lo que hemos estado preparando todo el tiempo: ¡el carrito de compras! Veamos primero ViewCart.aspx y lo explicaré después de eso.

El control GridView es un control poderoso que puede parecer complicado al principio. No discutiré los elementos de estilo porque se explican por sí mismos. (Hay algunos principios aquí que no voy a explicar en profundidad. Sólo voy a tratar de transmitir la idea principal). Vamos a descomponerlo.

  • Si le damos a GridView un ID, podremos acceder a GridView desde el código subyacente con ese ID.
  • GridView generará automáticamente columnas y nombres de columnas a partir de los datos que suministramos, a menos que específicamente lo indiquemos.
  • Podemos decirle a GridView qué mostrar en caso de que no lo suministremos.
  • Queremos mostrar el pie de página para que podamos mostrar el precio total.
  • Será bueno para nosotros tener una matriz de ProductIds indexados por el índice de la fila cuando estemos actualizando la cantidad de un artículo del carrito en el código subyacente. Esto hará eso por nosotros:
  • Necesitamos eventos para responder a dos eventos: RowDataBound y RowCommand. Básicamente, RowDataBound se activa cuando el GridView toma una fila de nuestros datos y los agrega a la tabla. Solo estamos usando este evento para responder al pie de página que se está enlazando para que podamos personalizar lo que queremos que se muestre allí. RowCommand se activa cuando se hace clic en un enlace o botón desde dentro de GridView. En este caso, es el enlace "Eliminar".

Ahora hablemos de las columnas. Aquí definimos las columnas y el GridView tomará cada fila de los datos que suministramos y asignaremos los datos de esa fila a la columna en la que deberían aparecer. La columna más simple es el BoundField. En nuestro caso, buscará una propiedad "Description" en nuestro objeto CartItem y la mostrará en la primera columna. El encabezado de esa columna también mostrará la descripción: "Description".

Necesitábamos la cantidad para mostrar dentro de un cuadro de texto en lugar de solo mostrarlo como texto, así que usamos TemplateField. El TemplateField te permite poner lo que quieras en esa columna. Si necesitas algunos datos de la fila, simplemente inserta <%# Eval("PropertyName") %>. El LinkButton que colocamos en nuestro TemplateField tiene un CommandName y un CommandArgument, los cuales se pasarán a nuestro controlador de eventos RowCommand de GridView.

Lo último que vale la pena mencionar aquí es que los dos últimos BoundFields tienen un DataFormatString especificado. Esta es solo una de las muchas cadenas de formato que proporciona ASP.NET. Éste da formato al número como moneda. Consulta la documentación de Microsoft para otros formato de cadenas.

Ahora podemos mirar la página de código subyacente. He proporcionado muchos comentarios aquí para describir lo que está sucediendo.

El resultado final:

¡Ahora tenemos un buen carrito de compras!

También te puede gustar...

Screencast

Cómo buscar en un sitio web usando ASP.NET 3.5 - Screencast

1 de octubre en Screencasts por Jeffrey Way

56

Me complace decir que hoy, estamos publicando nuestro primer artículo en ASP.NET. En este Screencast, te mostraré cómo implementar una funcionalidad de búsqueda simple en tu sitio web personal. Revisaremos muchas de las nuevas características de ASP.NET 3.5, como LINQ y muchos de los controles AJAX que se suministran con Visual Studio/Web Developer.

Continúa leyendo

  • Suscríbete a la fuente RSS de NETTUTS para obtener más información y artículos de desarrollo web diariamente.


Advertisement
Advertisement
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.