Desarrollo de un catálogo virtual con Visual C#, SQL y Dreamweaver

Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
LABORATORIO N 3
Presentacin del Caso a Estudiar
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. 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. Captulo III Desarrollo de un Catalogo Virtual
Prof.: Cueva Valverde Diego Alberto - Instructor en T I
diegoalberto_1987@hotmail.com
Creando un Catalogo Virtual

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.
Captulo III Desarrollo de un Catalogo Virtual
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 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).
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 web.config.
14. El archivo de web.config, se muestra tal como visualiza en la imagen.
15. Nos ubicamos en la propiedad ConnectionStrings. 16. Dentro de esta propiedad establecer la cadena de conexin.
<connectionStrings> <add name="cn" connectionString="Data Source=.;Initial Catalog=poseidon;integrated security=True" providerName="System.Data.SqlClient" /> </connectionStrings>
Describir cada una de las propiedades que interviene en la cadena de conexin? Data Source= Database= User ID= Password= Integrated Security=
Llamando la variable de Conexin a una Clase

17. Agregar una carpeta asp.Net de nombre App_Code.
18. agregando una Clase a la carpeta App_Code.
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 19. Pulsar el botn derecho del mouse sobre la carpeta App_code. 20. Aparecer un cuadro de dialogo llamado agregar Nuevo Elemento. 21. seleccionar como plantilla Clase y asignar como nombre CapaDatos.Cs
22. Dentro de la Clase llamada CapaDatos.Cs. 23. Digitar el siguiente Script que nos permite llamar a la variable de conexin que se estableci en el web.config.
Explicar el Script
24. Crear los siguientes procedimientos dentro de la clase CapaDatos.Cs
Creando Procedimientos Almacenados

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.
Llamando a los Procedimientos Almacenados en la Aplicacin

26. agregando una Clase a la carpeta App_Code.
27. Pulsar el botn derecho del mouse sobre la carpeta App_code. 28. Aparecer un cuadro de dialogo llamado agregar Nuevo Elemento. 29. seleccionar como plantilla Clase y asignar como nombre CapaNegocio.Cs
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 30. Dentro de la Clase llamada CapaNegocio.Cs. 31. Declarar una variable de nombre con, esta variable representa a la clase llamada CapaDatos.
32. Creando una funcin llamada ListarCategoria, esta funcin nos permite llamar al procedimiento ups_categoria.
33. Creando una funcin llamada ListarProductos, esta funcin nos permite llamar al procedimiento ups_productos.
Mostrar el Contenido de las Funciones

34. Abrir la pgina ListaProductos.aspx. 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).
Agregando elementos Existentes

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.
10
Creando el Catalogo de Productos en Oferta

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 Editar DataBinding Eval("nombreproducto")
ID Text Label Lblnombre 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.
NavigateUrl
11
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 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 SelectedIndexChanged del control lstCategorias agregar el siguiente Script.
Dar Formato al Control GridView

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.
12
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.
13
59. Para los siguientes BoundFiled, asignar el siguiuente formato: Control BoundField BoundField BoundField BoundField HeaderText Nombre Descripcion Precio U. Stock Propiedades DataFiled nombreproducto cantidadporunidad preciounidad unidadesenexistencia
DataFormatString
{0:N1}
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).
14
Agregando Cantidades al Pedido

63. 64. 65. 66. 67. Hacer clic sobre el control Gridview. Hacer clic en la etiqueta inteligente y seelccionar la opcion Editar Columnas. Agregar el Campo llamado TemplateField. En la propiedad HeaderText asignar el nombre de Cantidad. Llevar el campo Cantidad encima del Campo Seleccionar.
15
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 68. 69. 70. 71. Hacer clic en aceptar. Seleccionar el Campo que se cuentra con el nombre de Cantidad. Como usted podra observar toda esa columna con el nombre de Cantidad se encuentra vacia. 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.
16
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 75. 76. 77. 78. Hacer clic en la etiqueta inteligente y seleccionar la opcion Terminar Edicion de plantilla. Ejecutar la Pagina (Pulsar la Tecla F5). Seleccione cualquiera de las categorias. Como usted podra obaservar ahora dentro del GridView se encuentra un TextBox.
Enviando Parametros de una Pagina a Otra

79. Anteriormente se habia agregado un control HyperLink,este control muestra el texto Detalles. 80. Agregar en la NavigateUrl el parametro siguiente. Captulo III Desarrollo de un Catalogo Virtual
"detalleProducto.aspx?Codigo=" + Eval("IdProducto")
Explicacion del Codigo
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
17
Mostrando el contenido de una Consulta utilizando Parametros

81. 82. 83. 84. 85. Crear una pagina llamada detalleProducto.aspx. Arrastrar el control DataList. Habilitar la opcin Edicin de Plantilla. Dentro de la plantilla crear una tabla de 7 filas y 1 Columna. Agregar a las filas de la tabla los siguientes controles. Propiedades Editar DataBinding Eval("nombreproducto") Eval("cantidadporunidad") Eval("idproducto") Eval("imagen") Precio Eval("preciounidad") Stock Eval("unidadesenExistencia") Pedir
Control Label Label Label Label Image Label Label Label Label HyperLink ID Lblnombre Lbldescripcion Label2 Lblcodigo Image1 Label1 Label3 Label4 Label6 HyperLink1 Text
NavigateUrl
Codigo
86. Tiene que quedar tal como se muestra en la figura.
87. Declarar para toda la pagina detalleProducto.aspx las siguientes variables.
18
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver 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"); }
Explicacion del Codigo

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.
19
91. Como usted puede observar, se muestra en forma automatica un listado de productos. 92. Sealar el Hipervinculo Detalles.
Dejar el puntero del mouse sobre el Hipervnculo
93. Como usted podra obasevar en la barra de estado se muestra un valor, este valor representa al valor del parametro.
20
94. 95. 96. 97. 98.
Quiere decir del que el parametro tiene el Valor de 13. Hacer clic en el Hipervinculo Detalles. Como uste dpodra observar fue enviado a la pagina detalleProducto.aspx. El producto que nos muestra en esta pagina es el producto con el codigo 13. Como usted recordara la consulta que se realizo en el Evento Load del formulario Web, iguala al Campo IdProducto a la Variable de Parametro.
21

Desarrollo de un catálogo virtual con Visual C#, SQL y Dreamweaver

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de un catálogo virtual con Visual C#, SQL y Dreamweaver

Cargado por

Copyright:

Formatos disponibles

Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Creando un Catalogo Virtual

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

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

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

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Utilizacion de las propiedades AutoPostBack y IsPostBack

Estableciendo la Cadena de Conexin

14. El archivo de web.config, se muestra tal como visualiza en la imagen.

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Llamando la variable de Conexin a una Clase

18. agregando una Clase a la carpeta App_Code.

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

24. Crear los siguientes procedimientos dentro de la clase CapaDatos.Cs

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Creando Procedimientos Almacenados

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

Llamando a los Procedimientos Almacenados en la Aplicacin

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Mostrar el Contenido de las Funciones

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

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Agregando elementos Existentes

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Creando el Catalogo de Productos en Oferta

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Dar Formato al Control GridView

54. Desactivar la opcion Generar Campos Automaticamente.

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

58. En la propiedad DataFiled asignar el campo idproducto.

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Agregando Cantidades al Pedido

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Enviando Parametros de una Pagina a Otra

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Mostrando el contenido de una Consulta utilizando Parametros

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

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

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Explicacion del Codigo

Prof.: Cueva Valverde Diego Alberto - Instructor en T I

Captulo III Desarrollo de un Catalogo Virtual

Dejar el puntero del mouse sobre el Hipervnculo