Escolar Documentos
Profissional Documentos
Cultura Documentos
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
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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.
diegoalberto_1987@hotmail.com
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.
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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=
diegoalberto_1987@hotmail.com
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
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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
diegoalberto_1987@hotmail.com
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.
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
37. Digitar dentro del Evento load del Formulario el siguiente codigo.
diegoalberto_1987@hotmail.com
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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.
diegoalberto_1987@hotmail.com
10
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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
diegoalberto_1987@hotmail.com
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.
diegoalberto_1987@hotmail.com
12
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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.
diegoalberto_1987@hotmail.com
13
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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).
diegoalberto_1987@hotmail.com
14
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
diegoalberto_1987@hotmail.com
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.
diegoalberto_1987@hotmail.com
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.
"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
diegoalberto_1987@hotmail.com
17
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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
diegoalberto_1987@hotmail.com
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"); }
diegoalberto_1987@hotmail.com
19
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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.
diegoalberto_1987@hotmail.com
20
Desarrollo de un Carrito de Compras con Visual C#, SQL Server y Adobe DreamWeaver
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.
diegoalberto_1987@hotmail.com
21