Carrito de Compras Con C# y Dreamweaver

PPrrooff..:: CCuueevvaa VVaallvveerrddee DDiieeggoo AAllbbeerrttoo -- IInnssttrruuccttoorr eenn TT II ddiieeggooaallbbeerrttoo__11998877@@hhoottmmaaiill..ccoomm

CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

1

DDeessaarrrroolllloo ddee uunn CCaarrrriittoo ddee CCoommpprraass ccoonn VViissuuaall CC##,, SSQQLL SSeerrvveerr yy AAddoobbee DDrreeaammWWeeaavveerr

Objetivos:

Creacin de un Catalogo Virtual.

Utilizacion de la propiedade AutoPostBack

Utilizacion de la propiedade IsPostBack

Agregar Elementos Existentes al Proyecto.

Configuracin de un GridView.

Utilizacion de Plantillas.

Envio de parametros de una pagina a otra.

Utilizacion del Control HyperLink.

PPrreesseennttaacciinn ddeell CCaassoo aa EEssttuuddiiaarr

Mucho de nosotros no sabemos cmo

desarrollar un catalogo virtual, es decir un

catalogo donde ofreceremos nuestros

productos.

Para desarrollar este tipo de trabajo no es solo

necesario saber disear si no tambin es

necesario saber programar.

Este laboratorio nos ensea como combinar

estas dos Tcnicas al momento de realizar este

tipo de trabajo.

LLAABBOORRAATTOORRIIOO NN 33


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

2


CCrreeaannddoo uunn CCaattaallooggoo VViirrttuuaall

1. Seleccionar la carpeta Compras

2. Hacer clic en el men Sitio Web > Agregar Nuevo Elemento.

3. Aparecer el cuadro de dialogo llamado Agregar Nuevo elemento.

4. Seleccionar Web Forms asignar el nombre de listaProductos.aspx.

5. Activar las siguientes fichas.

Seleccionar Pagina principal.

Colocar el cdigo en un archivo independiente.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

3


6. Aparecer un cuadro d dialogo llamado Seleccionar una pgina principal.

7. Hacer clic en la carpeta Compras y al lado derecho selecciona la pgina master llamada

compras.master.

8. Como usted podr observar se ah generado la pagina llamada listaproductos.aspx.

9. Ejecutar la Pagina (pulsar la Tecla F5).


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

4


Utilizacion de las propiedades AutoPostBack y IsPostBack

IsPostBack.- Obtiene un valor que indica si la pgina se est cargando como respuesta a un valor devuelto

por el cliente, o si es la primera vez que se carga y se obtiene acceso a la misma.

AutoPostBack.- Es true si se produce una devolucin automtica al servidor cuando el usuario cambia el

texto en el cuadro de texto y sale del control con el tabulador; de lo contrario, es false. El valor

predeterminado es false.

10. Arrastra el control ListBox de la Ficha Estndar a la pgina web.

11. Seleccionar el control ListBox y en la propiedad ID asignar el nombre de lstCategorias.

12. Hacer clic en la etiqueta inteligente y Activar la Opcin AutoPostBack.

Estableciendo la Cadena de Conexin

13. Dentro del Explorador de Soluciones, hacer doble en el archivo con el nombre de wweebb..ccoonnffiigg.

14. El archivo de wweebb..ccoonnffiigg, se muestra tal como visualiza en la imagen.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

5


15. Nos ubicamos en la propiedad CCoonnnneeccttiioonnSSttrriinnggss.

16. Dentro de esta propiedad establecer la cadena de conexin.

Describir cada una de las propiedades que interviene en la cadena de conexin?

Data Source=

Database=

User ID=

Password=

Integrated Security=

LLllaammaannddoo llaa vvaarriiaabbllee ddee CCoonneexxiinn aa uunnaa CCllaassee

17. Agregar una carpeta asp.Net de nombre AApppp__CCooddee.

18. agregando una Clase a la carpeta AApppp__CCooddee..


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

6


19. Pulsar el botn derecho del mouse sobre la carpeta AApppp__ccooddee.

20. Aparecer un cuadro de dialogo llamado aaggrreeggaarr NNuueevvoo EElleemmeennttoo.

21. seleccionar como plantilla Clase y asignar como nombre CCaappaaDDaattooss..CCss

22. Dentro de la Clase llamada CCaappaaDDaattooss..CCss.

23. Digitar el siguiente Script que nos permite llamar a la variable de conexin que se estableci en el

wweebb..ccoonnffiigg.

EExxpplliiccaarr eell SSccrriipptt

24. Crear los siguientes procedimientos dentro de la clase CCaappaaDDaattooss..CCss


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

7


CCrreeaannddoo PPrroocceeddiimmiieennttooss AAllmmaacceennaaddooss

25. Ingresar a SQL Server y dentro de la base de datos Poseidn crear los siguientes procedimientos.

1. El siguiente procedimiento nos muestra los registros de la tabla categoras.

2. El siguiente procedimiento nos muestra los registros de la tabla Productos.

LLllaammaannddoo aa llooss PPrroocceeddiimmiieennttooss AAllmmaacceennaaddooss eenn llaa AApplliiccaacciinn

26. agregando una Clase a la carpeta AApppp__CCooddee..

27. Pulsar el botn derecho del mouse sobre la carpeta AApppp__ccooddee.

28. Aparecer un cuadro de dialogo llamado aaggrreeggaarr NNuueevvoo EElleemmeennttoo.

29. seleccionar como plantilla Clase y asignar como nombre CCaappaaNNeeggoocciioo..CCss


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

8


30. Dentro de la Clase llamada CCaappaaNNeeggoocciioo..CCss.

31. Declarar una variable de nombre ccoonn, esta variable representa a la clase llamada CCaappaaDDaattooss.

32. Creando una funcin llamada LLiissttaarrCCaatteeggoorriiaa, esta funcin nos permite llamar al procedimiento

uuppss__ccaatteeggoorriiaa.

33. Creando una funcin llamada LLiissttaarrPPrroodduuccttooss, esta funcin nos permite llamar al procedimiento

uuppss__pprroodduuccttooss.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

9


MMoossttrraarr eell CCoonntteenniiddoo ddee llaass FFuunncciioonneess

34. Abrir la pgina LLiissttaaPPrroodduuccttooss..aassppxx.

35. Hacer doble clic sobre el formulario.

36. Declarar las siguientes variables para todo el formulario.

37. Digitar dentro del Evento load del Formulario el siguiente codigo.

38. Ejecutar la pagina (pulsar la tecla F5).


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

10


AAggrreeggaannddoo eelleemmeennttooss EExxiisstteenntteess

39. Seleccionar la carpeta Compras, crear una carpeta llamada imagenesproductos.

40. Seleccionar la carpeta, hacer clic derecho sobre dicha carpeta y seleccionar la opcion Agregar

Elemento Existente.

41. Seleccionar todos los elementos que se encuentran dentro de la carpeta imgenesproductos

(Solicitar la Carpeta al Instructor).

42. Como usted puede apreciar ahora la carpeta imagenesproductos contiene 77 imgenes.

43. Cada una de estas imgenes hace referencia a cada uno de los productos.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

11


CCrreeaannddoo eell CCaattaallooggoo ddee PPrroodduuccttooss eenn OOffeerrttaa

44. Arrastrar el control DataList, debajo del GridView.

45. Habilitar la opcin Edicin de Plantilla.

46. Dentro de la plantilla crear una tabla de 6 filas y 1 Columna.

47. Agregar a las filas de la tabla los siguientes controles.

Control Propiedades

ID Text Editar DataBinding NavigateUrl

Label Lblnombre Eval("nombreproducto")

Label Label2 Codigo

Label Lblcodigo Eval("idproducto")

Image Image1 Eval("imagen")

Label Label1 Precio

Label Label3 Eval("preciounidad")

HyperLink HyperLink2 Pedir

HyperLink HyperLink1 Detalles

48. Tiene que quedar tal como se muestra en la figura.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

12


49. Dentro del Evento Load del formulario agregar el siguiente script.

50. Recordar que este codigo se digita al finalizar la condicional que se establecio en el evento Load.

51. Dentro del evento SSeelleecctteeddIInnddeexxCChhaannggeedd del control llssttCCaatteeggoorriiaass agregar el siguiente Script.

DDaarr FFoorrmmaattoo aall CCoonnttrrooll GGrriiddVViieeww

52. Seleccionar el control GridView y hacer clic en la etiqueta intelgente.

53. Seleccionar la opcion Editar Columnas.

54. Desactivar la opcion Generar Campos Automaticamente.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

13


55. Agregar 5 campos BoundField.

56. Seleccionar el primer BoundField y dar el siguiente formato.

57. Eln la propiead HeaderText dar el nombre de Cod.

58. En la propiedad DataFiled asignar el campo idproducto.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

14


59. Para los siguientes BoundFiled, asignar el siguiuente formato:

CCoonnttrrooll PPrrooppiieeddaaddeess

HHeeaaddeerrTTeexxtt DDaattaaFFiilleedd DDaattaaFFoorrmmaattSSttrriinngg

BoundField Nombre nombreproducto

BoundField Descripcion cantidadporunidad

BoundField Precio U. preciounidad {0:N1}

BoundField Stock unidadesenexistencia

60. Agregar el Campo CommadField > Seleccionar.

61. Seleccionar el Campo Seleccionar y en la porpiedad ButtonType seleccionar la opcion Image.

62. Seleccionar el Campo Seleccionar y en la porpiedad SelectImageUrl seleccionar una imagen de la

carpeta imgenes con el nombre de pedir.jpg (pedir la imagen al Instructor).


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

15


AAggrreeggaannddoo CCaannttiiddaaddeess aall PPeeddiiddoo

63. Hacer clic sobre el control Gridview.

64. Hacer clic en la etiqueta inteligente y seelccionar la opcion Editar Columnas.

65. Agregar el Campo llamado TemplateField.

66. En la propiedad HeaderText asignar el nombre de Cantidad.

67. Llevar el campo Cantidad encima del Campo Seleccionar.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

16


68. Hacer clic en aceptar.

69. Seleccionar el Campo que se cuentra con el nombre de Cantidad.

70. Como usted podra observar toda esa columna con el nombre de Cantidad se encuentra vacia.

71. Hacer clic en la etiqueta inteligente y seleccionar Editar Plantillas.

72. Se tiene que mostrar una plantilla tal como se muestra en la figura.

73. Esta plantilla nos permite insertar cualquier control.

74. Agregar a la plantilla un TextBox, al TextBox en la propiedad ID asignar el nombre de txtcantidad.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

17


75. Hacer clic en la etiqueta inteligente y seleccionar la opcion Terminar Edicion de plantilla.

76. Ejecutar la Pagina (Pulsar la Tecla F5).

77. Seleccione cualquiera de las categorias.

78. Como usted podra obaservar ahora dentro del GridView se encuentra un TextBox.

EEnnvviiaannddoo PPaarraammeettrrooss ddee uunnaa PPaaggiinnaa aa OOttrraa

79. Anteriormente se habia agregado un control HyperLink,este control muestra el texto DDeettaalllleess..

80. Agregar en la NavigateUrl el parametro siguiente.

"detalleProducto.aspx?Codigo=" + Eval("IdProducto")

EExxpplliiccaacciioonn ddeell CCooddiiggoo

detalleProducto.aspx.- Es el nombre de la pagina a donde se va a enviar.

Codigo.- Es el nombre de la variable de tipo parametro que se le esta asignando.

Eval("IdProducto").- Es el valor que va a tomar la variable del parametro enviado a la pagina

detalleProducto.aspx


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

18


MMoossttrraannddoo eell ccoonntteenniiddoo ddee uunnaa CCoonnssuullttaa uuttiilliizzaannddoo PPaarraammeettrrooss

81. Crear una pagina llamada detalleProducto.aspx.

82. Arrastrar el control DataList.

83. Habilitar la opcin Edicin de Plantilla.

84. Dentro de la plantilla crear una tabla de 7 filas y 1 Columna.

85. Agregar a las filas de la tabla los siguientes controles.

CCoonnttrrooll PPrrooppiieeddaaddeess

IIDD TTeexxtt EEddiittaarr DDaattaaBBiinnddiinngg NNaavviiggaatteeUUrrll

Label Lblnombre Eval("nombreproducto")

Label Lbldescripcion Eval("cantidadporunidad")

Label Label2 Codigo

Label Lblcodigo Eval("idproducto")

Image Image1 Eval("imagen")

Label Label1 Precio

Label Label3 Eval("preciounidad")

Label Label4 Stock

Label Label6 Eval("unidadesenExistencia")

HyperLink HyperLink1 Pedir

86. Tiene que quedar tal como se muestra en la figura.

87. Declarar para toda la pagina detalleProducto.aspx las siguientes variables.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

19


88. Digitar el siguiente cdigo dentro del Evento Load de la pgina detalleProducto.aspx.

//se utiliza el Try/Chat, para el tratamiento de errores

try {

//se valida el envio del parametro de otra pagina

//la condicion dice si la variable contiene algun valor

if (Request.QueryString["Codigo"] != "")

//entonces se ejecuta el siguiente codigo

{

//se obtiene una replica de la Tabla

dv = new DataView(op.ListarProductos());

//se realiza un filtro a la Tabla

dv.RowFilter = "IdProducto =" + Request.QueryString["codigo"];

//se asigna el origen de datos al control

this.DataList1.DataSource = dv;

//se enlaza el control a la pagina

this.DataList1.DataBind();

}

else

{

//si el parametro no contiene ningun valor

//nos direcciona a la pagina ListaProductos.aspx

Response.Redirect("ListaProductos.aspx");

}

}

catch {

//en caso de que ocurra algun error la pagina nos direcciona

//a la pagina ListaProductos.aspx

Response.Redirect("ListaProductos.aspx");

}

EExxpplliiccaacciioonn ddeell CCooddiiggoo

Se utiliza una condicional, diciendo que si la variable de parametro es diferente a ser un valor nullo,

entonces sucede la consulta.Esta consulta devuelve un valor y ese valor lo toma el control DataList1.

En caso de la que la varible de parametro este vacia, esta la reenvia a la pagina ListaProductos.aspx.

Request.- Captura el parametro enviado por otra pagina.

QueryString.- Obtiene el nombre del parametro enviado por la otra pagina.

Response.- Este Objeto permite enviar Datos de respuesta Http a un cliente y contiene informacin

sobre esa respuesta.

Redirect.- Redirecciona un cliente a una nueva direccion URL y especifica la nueva URL.

89. Ejecutar la pagina (pulsar la Tecla F5).

90. Como uste podra observar al ejecutar la pagina detalleProducto.aspx, esta la reenvia a la pagina

ListaProductos.aspx, ya que la variable de parametro no contiene ningun valor.


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

20


91. Como usted puede observar, se muestra en forma automatica un listado de productos.

92. Sealar el Hipervinculo Detalles.

93. Como usted podra obasevar en la barra de estado se muestra un valor, este valor representa al

valor del parametro.

Dejar el puntero del mouse

sobre el Hipervnculo


CCaa

pp tt

uull oo

IIII II

DD

eess aa

rr rroo

ll lloo

ddee

uunn

CCaa

tt aall oo

ggoo

VVii rr

tt uuaa

ll

21


94. Quiere decir del que el parametro tiene el Valor de 13.

95. Hacer clic en el Hipervinculo Detalles.

96. Como uste dpodra observar fue enviado a la pagina detalleProducto.aspx.

97. El producto que nos muestra en esta pagina es el producto con el codigo 13.

98. Como usted recordara la consulta que se realizo en el Evento Load del formulario Web, iguala al

Campo IdProducto a la Variable de Parametro.

Carrito de Compras Con C# y Dreamweaver

Documents

Transcript of Carrito de Compras Con C# y Dreamweaver