You are on page 1of 48

Manejo de base de datos desde aplicaciones Web usando ASP.NET 2.

0 y Visual Studio 2005

Aprenda Practicando. Cargando tecnologa en tu memoria. www.AprendaPracticando.com info@aprendapracticando.com 8317-5758 / 01-800-APRENDA Monterrey, N.L., Mxico

Pg. 1

Qu son los Free Labs?


Un Free Lab de Aprenda Practicando es una sesin corta e instructiva, totalmente gratuita, en la cual se aborda de manera terica y prctica un tema especfico de inters para los desarrolladores profesionales. En un Free Lab se dedican 40 minutos a la explicacin terica de los temas, para despus dedicarle 60 minutos a la realizacin prctica de ejercicios que demuestran la funcionalidad de la teora. El entorno de aprendizaje est muy cuidado, a fin de que se logre el mximo de aprendizaje en el mnimo de tiempo. Cada participante en el Free Lab cuenta con un equipo de cmputo para la realizacin de las prcticas. Adems, durante toda la sesin se cuenta con la asistencia de un instructor certificado por Aprenda Practicando, que te guiar en el aprendizaje de los temas y resolver dudas tcnicas. En el Free Lab se te proporciona la memoria tcnica de la sesin, que te podrs llevar a tu casa para repasos posteriores. Nuestro inters es que conozcas un poco lo que puedes obtener de los cursos CAPDEV (Certificacin Aprenda Practicando - .NET Developer), que compiten en calidad con los MOC de Microsoft, a un menor costo, y que adems estn totalmente en idioma espaol.

Disfrtalo. Recomindalo.

Aprenda Practicando. Cargando tecnologa en tu memoria. www.AprendaPracticando.com info@aprendapracticando.com 8317-5758 / 01-800-APRENDA Monterrey, N.L., Mxico

Pg. 2

Contenido de este Free Lab


Nombre: Manejo de bases de datos desde aplicaciones Web usando ASP.NET 2.0 y Visual Studio 2005. Curso al que pertenece: 2016 Acceso a datos usando Visual Basic 2005 y Visual Studio 2005. Objetivo: Que al finalizar la sesin el participante sea capaz de establecer conexiones a bases de datos SQL Server desde aplicaciones ASP.NET 2.0, y que sea capaz de generar aplicaciones que permitan la insercin, modificacin, eliminacin y consulta de registros, utilizando para ello los asistentes de Visual Studio 2005. Audiencia: Desarrolladores profesionales en tecnologa Microsoft .NET, que estn considerando migrar a la versin 2.0 del Framework, o a la versin 2005 de Visual Studio. Son deseables los conocimientos generales de: 1. Microsoft .NET 2. Visual Basic .NET 3. Visual Studio .NET 2002/2003 o Visual Studio 2005 4. Transact SQL (SQL Server)

Temas que se cubren en el Free Lab


1. Data Source Controls y DataBound Controls 2. Creacin de SqlDataSource desde Visual Studio 2005 3. Configuracin de SqlDataSource desde Visual Studio 2005 4. Manejo de Auto-Format para DataGridView usando Visual Studio 2005 5. Manejo de DetailsView desde Visual Studio 2005 6. Manejo de Templates para DetailsView 7. Especificacin de comandos Transact SQL desde DetailsView 8. Manejo de Command and Parameter Editor

Aprenda Practicando. Cargando tecnologa en tu memoria. www.AprendaPracticando.com info@aprendapracticando.com 8317-5758 / 01-800-APRENDA Monterrey, N.L., Mxico

Pg. 3

Requerimientos
1. Equipo con Windows XP Professional, Service Pack 2 2. IIS 5.0 o posterior. 3. Visual Studio 2005. 4. SQL Server 2000 o posterior. 5. Internet Explorer 5.5 o posterior.

Al finalizar el Free Lab se aplica un examen de reaccin.

Aprenda Practicando. Cargando tecnologa en tu memoria. www.AprendaPracticando.com info@aprendapracticando.com 8317-5758 / 01-800-APRENDA Monterrey, N.L., Mxico

Pg. 4

Manejo de bases de datos desde Aplicaciones Web

Objetivos: Aprender

el manejo de bases de datos en modo parcialmente conectado utilizando ASP.NET. 1. Aprender cules son los Data Source Controls y para qu sirven. 2. Aprender cules son los Data Bound Controls. 3. Aprender la forma en que conviven los Data Source Controls y Data Bound Controls. 4. Aprender a desarrollar aplicaciones de actualizacin de bases de datos, con el mximo uso de las herramientas de Visual Studio.

Free - Lab

Contenido
Data Source Controls y Data Bound Controls .......................................................... 4 Data Source Controls .................................................................................. 5 Data Bound Controls ................................................................................... 7 Estableciendo un enlazado de datos hacia un GridView ........................................ 12
X Agregando y configurando un SqlDataSource .................................................... 12 X Agregando y configurando un GridView ............................................................ 17

Actualizador de bases de datos desconectadas usando ASP.NET .......................... 21


X Agregando y configurando un objeto DetailsView ............................................. 22 X Personalizacin de campos en DetailsView ........................................................ 24 X Analizando los Templates de los campos en DetailsView .................................. 27 X Estableciendo comandos para la afectacin de datos va SqlDataSource............ 31 X Especificando la funcionalidad disponible en DetailsView ................................ 37

Examen rpido del captulo.....................................................................................43

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

Uno de los conceptos que mayores cambios experiment de la versin 1.1 de .NET Framework es el desarrollo en ASP.NET. Son tantos los cambios introducidos por la versin 2.0 de .NET Framework que se ha dado la diferencia en nombre: ASP.NET 2.0. ASP.NET redujo la cantidad de programacin al mximo, permitiendo la mayor cantidad de funcionalidad con un mnimo de lneas de cdigo escritas por el desarrollador. En el caso de soporte a las aplicaciones de base de datos, el cambio es exponencial. Si adems de eso estamos desarrollando en Visual Studio, prcticamente el cdigo es una cosa del pasado (al menos en la capa de presentacin de las aplicaciones y el enlazado de datos). En este Free Lab podrs comprobar cmo el desarrollo de aplicaciones Web con manejo de bases de datos se ha simplificado enormemente desde la programacin spagetti de ASP Clsico. Ahora no es necesario ni codificar.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Free - Lab

Data Source Controls y Data Bound Controls

En ASP.NET se soportan todos los objetos de acceso a datos ADO.NET para el trabajo en modo conectado; sin embargo, podemos tomar ventaja de la simplicidad que ofrece ASP.NET para el manejo complejo de datos. Esto significa que de forma declarativa, es decir con base mayormente en etiquetas de hipertexto en una pgina, se pueden especificar tareas que con anterioridad requeran de programacin. En ASP.NET no se requiere codificar nada para realizar las siguientes actividades relacionadas con los datos. 1. Seleccionar y desplegar datos. 2. Ordenar, paginar y guardar datos en cach. 3. Actualizar, insertar y eliminar datos. 4. Aplicacin de filtros de datos en tiempo de ejecucin. 5. Crear escenarios de registro maestro detalle. D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

Data Source Controls

Se conoce como Data Source Controls a los controles Web que permiten la conexin con un almacn de datos, as como las operaciones de lectura y escritura sobre la misma. Los principales Data Source Controls son los siguientes. Data Source Control ObjectDataSource Descripcin Representa un origen de datos basado en objetos de negocio. Es cuando los datos no se reciben de un proveedor de datos .NET, sino de un objeto o clase. Representa un acceso a bases de datos va los proveedores de datos ADO.NET (managed data providers, como lo son OleDbClient, SQLClient, OracleClient, etc.)

SqlDataSource

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Free - Lab AccessDataSource XMLDataSource Representa un acceso a una base de datos en Microsoft Access. Representa el consumo de datos desde un archivo XML, especialmente diseado para su utilizacin desde controles Web jerrquicos, tales como TreeView o Menu. Representa un conjunto de datos utilizable en el mecanismo de navegacin entre pginas de ASP.NET

SiteMapDataSource

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

Data Bound Controls

Se conoce como Data Bound Controls a los controles que sirven como un canal de acceso directo a un origen de datos desde el navegador; este tipo de controles se enlazan a una determinada fuente de datos y mantienen los contenidos actualizados de forma dinmica, conforme el usuario hace variaciones en los apuntadores de datos y registros. Los Data Bound Controls guardan una estrecha relacin con los Data Source Controls, ya que de stos obtienen los datos a enlazar. Es necesario especificar el Data Source Control que alimenta de datos al Data Bound Control a travs de la propiedad DataSourceID. Algunos de los Data Bound Controls principales son los siguientes.

Data Bound Control BulletedList

Descripcin Muestra los datos en forma de una lista de vietas.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Free - Lab CheckBoxList Muestra los datos en forma de lista de seleccin, en donde cada elemento es una casilla de verificacin. Muestra los datos en forma de lista desplegable de seleccin (combo). Muestra los datos en forma de una lista de seleccin de tamao fijo. Muestra los datos en forma conjunto de botones de radio. Muestra anuncios publicitarios. Muestra los datos en forma de tabla. Cada elemento es mostrado de acuerdo a una plantilla (template) que es definida por el usuario. Muestra un registro de datos en forma tabular y permite la edicin, eliminacin e insercin de registros. Muestra un registro de datos en forma personalizada y permite la edicin, eliminacin e insercin de registros. Despliega datos en una tabla y soporta edicin, actualizacin, ordenacin, y paginado. Muestra un men dinmico. Muestra datos en forma de lista, cuyo formato puede personalizarse usando plantillas. Muestra datos en forma de un rbol jerrquico de nodos. de

DropDownList ListBox RadioButtonList AdRotator DataList

DetailsView

FormView

GridView

Menu Repeater

TreeView

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

Dependiendo del objeto que se trate, sern las propiedades que se deban establecer para el manejo de datos desde la Web. En el caso de objetos de lista de seleccin (BulletedList, CheckBoxList, DropDownList, ListBox y RadioButtonList) cada registro de la fuente de datos (Row) representar un elemento (Item) del objeto. Los elementos se almacenarn en una coleccin llamada Items. Cada registro de la fuente de datos contendr campos (Fields), y los campos pueden jugar un papel importante en el manejo enlazado; por ejemplo, generalmente la informacin textual que se ve en la interfaz no es lo que deseamos que internamente se maneje para los procesos y el almacenamiento. Para especificar el campo que queremos que se muestre en la interfaz utilizamos la propiedad ListControl.DataTextField; para especificar el campo que internamente el programa utilice para efectos de procesamiento y almacenamiento, utilizamos la propiedad ListControl.DataValueField. Cuando se selecciona un elemento, el ndice del elemento seleccionado se almacena en la propiedad ListControl.SelectedIndex, el elemento seleccionado se almacena en ListControl.SelectedItem, y el valor del elemento seleccionado se almacena en la propiedad ListControl.SelectedValue. El evento por omisin de este tipo de objetos es ListControl.SelectedIndexChanged, que sucede cuando el elemento seleccionado cambia. El mtodo WebControl.DataBind es el que realiza el enlazado entre el Data Source Control y el Data Bound Control.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

10

Free - Lab

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

11

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

12

Free - Lab

Ejercicio 01
Estableciendo un enlazado de datos hacia un GridView

En este ejercicio se realiza un enlazado a un objeto GridView, para mostrar el contenido de un origen de datos de forma tabular, con paginacin y con posibilidad de ordenamiento. El enlazado que se realiza es de una va, ya que slo se realizan actividades de lectura. 1. Abra la solucin Ejercicios, que debe encontrarse C:\APVBNETVS\Ejercicios (archivo de extensin sln). en

2. En Solution Explorer seleccione el proyecto http://localhost/apnetspvs, invoque el men de contexto, seleccione la opcin Add New Item, y agregue una Web Form de nombre Enlazado01.aspx.

X Agregando y configurando un SqlDataSource


3. Agregue a la interfaz un objeto SqlDataSource. El objeto se agregar a la interfaz. Utilice el smart tag del control y seleccione la opcin Configure Data Source.

4. Aparecer el asistente de configuracin de Data Source. Haga clic en New Connection, a fin de definir una nueva conexin para nuestros proyectos Web.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

13

5. Aparecer el asistente de conexin. Coloque el nombre de su servidor en Server Name. En nuestro caso es APRENDAWS, aunque usted deber especificar el que le aplica. Se elige Use SQL Server Authentication y se proporciona el usuario y el password de acceso. Eliga Select or enter a database name, y especifique pubs como base de datos de trabajo. Presione Test connection para comprobar que la conexin es posible. Si la conexin es satisfactoria, presione Ok, con lo que aparecer nuevamente el asistente de configuracin de conexin.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

14

Free - Lab

6. El nombre que se le asign a su conexin es aprendaws.pubs.dbo. clic en Next.

Haga

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

15

7.

Se recomienda que la conexin se almacene como variable en el archivo de configuracin, que en el caso de Web se trata de Web.config. El asistente solicitar el nombre que deseamos darle a la conexin en el archivo de configuracin. Asegrese que la casilla de verificacin Yes, save this connection as est seleccionada, y escriba en el cuadro de texto el nombre ConexionDBWeb.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

16

Free - Lab 8. La conexin nos servir para trabajar con datos de alguna tabla de la base de datos pubs. Seleccione la opcin Specify columns from a table or view y en el combo de nombres de tabla seleccione sales (ventas). Al hacer esto aparecern las columnas de la tabla en el espacio Columns; marque la casilla de verificacin que muestra un asterisco, con el fin de que se incluyan todas las columnas de la tabla. Haga clic en Next.

9. Aparecer en el asistente una ventana de prueba. Haga clic en Test query, y vea si los datos se extraen satisfactoriamente. En caso de que as sea, haga clic en Finish.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

17

10. Con esto ya ha quedado configurada una conexin que puede ser utilizada por nuestra aplicacin a travs del objeto SqlDataSource1, y que mostrar las ventas de libros que se encuentran almacenadas en la base de datos pubs.

X Agregando y configurando un GridView


11. Agregue a la interfaz un objeto GridView. Organice los objetos en la pgina de tal manera que luzca como sigue.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

18

Free - Lab 12. Utilice el smart tag de GridView y modifique Choose Data Source, eligiendo SqlDataSource1, que es el nombre de nuestro objeto de origen de datos.

13. Al seleccionar el origen de datos, automticamente cambiar el contenido del DataView, mostrando un contenido ajustado a la informacin contenida en el Data Source.

14. En el smart tag de GridView seleccione Auto Format. En la lista Select a scheme, seleccione la opcin Rainy Day, y haga clic en Ok. De esa forma le habremos proporcionado un formato a nuestros datos.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

19

15. En el smart tag de GridView marque las casillas de verificacin Enable paging y Enable sorting, para que sea posible paginar el contenido y ordenar los datos cuando hagamos clic en el encabezado de la rejilla de datos.

Ejecucin guiada de http://localhost/apvbnetvs/ Enlazado01.aspx


16. Utilizando Solution Explorer establezca el proyecto http://localhost/apvbnetvs/ como proyecto de inicio de la solucin (StartUp Project); seleccione la pgina Enlazado01.aspx como pgina de inicio (Set as Start Page). Guarde todos los cambios que ha realizado en la solucin (CTRL-MAYS-S). Inicie la depuracin para comprobar el comportamiento de su programa (F5).

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

20

Free - Lab

17. En la barra inferior del GridView aparecen vnculos que refieren a las pginas de datos. Haga clic en dichos vnculos para que aprecie cmo el contenido de la tabla sales se ha distribuido en varias pginas; seguramente la ltima pgina posee menos elementos que las dems. 18. En la parte superior de GridView aparecen los encabezados en forma de vnculos. Al hacer clic en ellos los datos se ordenarn por dicha columna. 19. Cierre la aplicacin. 20. En este ejercicio vimos cmo se gener un Data Source Object (SqlDataSource) y cmo se utiliz a travs de un Data Bound Control (GridView). FIN DEL EJERCICIO

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

21

Ejercicio 02
Actualizador de bases de datos desconectadas usando ASP.NET

Este ejercicio realiza un actualizador de registros (altas, bajas, cambios y consultas), utilizando las facilidades que Visual Studio provee a ASP.NET. En este ejercicio se realiza un enlazado de datos de dos vas, dado que se realizan operaciones de lectura y escritura. 1. Abra la solucin Ejercicios, que debe encontrarse C:\APVBNETVS\Ejercicios (archivo de extensin sln). en

2. En Solution Explorer seleccione el proyecto http://localhost/apnetspvs, invoque el men de contexto, seleccione la opcin Add New Item, y agregue una Web Form de nombre Enlazado02.aspx. 3. Agregue a la interfaz un objeto SqlDataSource. El objeto se agregar a la interfaz. Utilice el smart tag del control y seleccione la opcin Configure Data Source. 4. En el asistente, seleccione ConexionDBWeb en la pregunta Wich data connection should your application use to connect to the database? , y haga clic en Next.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

22

Free - Lab 5. Seleccione la tabla jobs, y especifique que desea trabajar con todos los campos de la tabla (*). Haga clic en Next.

6. Haga clic en Finish para concluir con la definicin del SqlDataSource. El nombre del origen de datos ser SqlDataSource1.

X Agregando y configurando un objeto DetailsView


7. Agregue un objeto DetailsView a la interfaz. DetailsView1, por omisin. Se le asignar por nombre

8. La clase DetailsView permite definir un objeto que muestra un registro a la vez, proveniente de un origen de datos; es posible con este objeto proporcionar formato estndar basado en plantillas (templates), y adems se pueden instrumentar acciones de edicin, borrado e insercin de registros. 9. En conjunto con SqlDataSource, DetailsView se encarga de crear internamente un DataSet, construir objetos de recopilacin de datos, y lanzar comandos de actualizacin al almacn fsico de datos. 10. Utilizando el smart tag de DetailsView, en Choose Data Source elija SqlDataSource1, que es el origen de datos que ya definimos.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

23

11. Automticamente se habrn colocado los campos que contiene SqlDataSource, en forma de parea de valores. En trminos generales, cada lnea del objeto DetailsView es un campo (Field); se pueden agregar campos que no estn definidos en SqlDataSource, e incluso se pueden agregar campos que tienen que ver con el comportamiento de DetailsView con respecto a las actividades de edicin, eliminacin e insercin de registros nuevos. 12. Utilizando los delimitadores de tamao, aumente el ancho del objeto DetailsView1. 13. Utilizando el smart tag de DetailsView1 seleccione Auto Format..., y seleccione el formato Slate.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

24

Free - Lab 14. Nuestra interfaz debe lucir como sigue.

X Personalizacin de campos en DetailsView


15. Utilizando el smart tag de DetailsView1, seleccione la opcin Edit Fields.., para editar los campos involucrados en la interfaz. Aparecer la ventana Fields. Esta herramienta se compone de tres elementos principales: Lista de campos disponibles (Available fields), que permite seleccionar los objetos que han de verse en la interfaz que representa DetailsView1; lista de campos seleccionados (Selected fields), que permite seleccionar los campos que ya han sido integrados a la interfaz a travs de DetailsView1; y propiedades de campos enlazados (BoundField properties), que permite modificar las propiedades de los campos enlazados.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

25

16. El vnculo Convert this field into a TemplateField es un elemento fundamental de la ventana Fields, dado que permite manejar un campo de DetailsView como objeto TemplateField. Los objetos TemplateField son campos personalizados que permiten la visualizacin y uso de un control enlazado, habilitando comportamientos variados, de acuerdo a plantillas (templates). Esto quiere decir que un mismo control enlazado puede verse y comportarse de diferente manera, de acuerdo a la plantilla que le apliquemos en un momento dado. 17. Al seleccionar un campo en Selected fields las propiedades de este elemento se muestran y editan en BoundField properties. En nuestro caso aparecen en la lista Selected fields los campos retornados por SqlDataSource1. Estos fueron agregados automticamente. 18. Elija en Selected Fields el campo job_id. En BoundField properties busque la propiedad HeaderText y coloque el valor Id del puesto: presione INTRO para aceptar. Haga clic en el vnculo Convert this field into a TemplateField, para disponer de varias mscaras de comportamiento para job_id. Vea cmo la referencia del campo cambia en Selected Fields, tanto en la descripcin como en el icono.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

26

Free - Lab

19. Repita el procedimiento para los dems campos. Elija en Selected Fields el campo job_desc. Modifique en BoundField properties la propiedad HeaderText, colocando el valor Descripcin:, y haga clic en el vnculo Convert this field into a TemplateField. 20. Elija en Selected Fields el campo min_lvl. Modifique en BoundField properties la propiedad HeaderText, colocando el valor Nivel mnimo:, y haga clic en el vnculo Convert this field into a TemplateField. 21. Elija en Selected Fields el campo max_lvl. Modifique en BoundField properties la propiedad HeaderText, colocando el valor Nivel mximo:, y haga clic en el vnculo Convert this field into a TemplateField. 22. En Available fields seleccione el nodo CommandField. Haga clic en Add. CommandField permitir controlar las operaciones de su interfaz. 23. Elija en Selected Fields el campo CommandField, y en BoundField properties, cambie las siguientes propiedades. Propiedad ButtonType CancelText DeleteText EditText InsertText NewText SelectText UpdateText Valor a asignar Button Cancelar Borrar registro Modificar datos Insertar Nuevo registro Consulta Actualizar

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

27

24. Haga clic en Ok. Nuestra interfaz debe lucir como sigue.

X Analizando los Templates de los campos en DetailsView


25. Ya ha preparado su objeto DetailsView para el manejo de datos y el dilogo con el objeto SqlDataSource. Para que las operaciones que realicemos en DetailsView se trasladen al almacn de datos, es necesario que definamos las instrucciones SQL que han de aplicar al momento de presionar tal o cual D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

28

Free - Lab botn de la interfaz. Adems, seguramente las instrucciones SQL que proporcionemos requieren los valores que estamos manejando en la interfaz. 26. Lo primero que debemos saber es el nombre de los objetos a travs de los cuales DetailsView manejar los campos de SqlDataSource. Para ello, en el smart tag de DetailsView1 seleccione Edit Templates, con lo cual se mostrar un selector de Templates.

27. En el combo Display del smart tag seleccione Field[0] - Id del puesto:.

28.

Con ello se mostrarn todas las vistas y comportamientos disponibles para el campo Id del puesto. Vea cmo existen distintas formas en que el campo puede verse y comportarse. ItemTemplate aplicar como la vista general del campo, AlternatingItemTemplate es la forma en que lucir el campo en caso de alternado de colores, EditItemTemplate es la forma en que lucir en caso de que se proceda a la edicin del campo, InsertItemTemplate es la forma en que se manejar el campo en caso de

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

29

insercin de registros, y HeaderTemplate es la forma en que aparecer el encabezado del campo.

29. Visual Studio ha detectado que jobs_id (campo al que se enlaza el campo de DetailsView1) es de tipo identity en la base de datos, por lo que no puede hacer otra cosa que mostrar la informacin de dicho campo. 30. Utilizando el smart tag de DetailsView1, en Display, seleccione Field[1] Descripcin. Vea cmo este campo, admite labores de edicin en la base de datos e incluye cuadros de texto en los escenarios de edicin e insercin.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

30

Free - Lab

31. Haga clic sobre el cuadro de texto (TextBox) del escenario EditItemTemplate. Invoque Properties (F4) y vea cul es el valor de la propiedad ID del cuadro de texto donde se manejar el campo job_desc. El objeto se llama TextBox1. Si revisramos todos los objetos que manejan los campos, tendramos lo siguiente. Campo en la base de datos job_id job_desc min_lvl max_lvl Campo en DetailsView1 Id del Puesto Descripcin Nivel mnimo Nivel mximo Control en Templates Label1 TextBox1 TextBox2 TextBox3

32. Invoque el smart tag de DetailsView1, y seleccione el vnculo End Template Editing. D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

31

X Estableciendo comandos para la afectacin de datos va SqlDataSource


33. En tiempo de diseo seleccione el objeto SqlDataSource1. Properties (F4). 34. Abra

Modifique el valor de la propiedad DeleteQuery, haciendo clic en el botn que invoca el Command and Parameter Editor.

35. Haga clic en el botn Query Builder, para que Command and Parameter Editor le asista en la elaboracin de la instruccin de eliminado de datos. Aparecer la ventana Add Table, en la cual se especifican las tablas involucradas en la instruccin SQL a construir. Seleccione jobs y haga clic en Add. Se integrarn las tablas a Query Builder, por lo que puede cerrar Add Table haciendo clic en Close.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

32

Free - Lab

36. Query Builder se divide en 4 secciones (panes): Pane de diagrama, pane de seleccin y asignacin, pane de instruccin textual y pane de los resultados de la ejecucin del comando. En el pane de seleccin y asignacin seleccione en Column el campo job_id, en Table escriba jobs, y en Filter escriba =@job_id. Automticamente se actualizar la instruccin SQL, quedando como sigue. Haga clic en Ok para regresar a Command and Parameter Editor.
Figura 01
Estructura de Query Builder - Panes

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

33

37. La instruccin SQL que auxiliar a SqlDataSource en la eliminacin de datos ha quedado como sigue. DELETE FROM jobs WHERE (job_id = @job_id) 38. Como puede darse cuenta, se est haciendo uso de un parmetro que no ha sido declarado en ninguna parte (@job_id). 39. Haga clic en el botn Add Parameter de Command and Parameter Editor. Se agregar un parmetro en Parameters. Escriba en la columna Name el nombre de nuestro parmetro @job_id. En el combo Parameter source seleccione Form, lo que indica que se tomar el valor que se tenga en el formulario que dinmicamente crear DetailsView1. finalmente, escriba en FormField el nombre del campo que en los templates contiene la informacin de job_id, es decir Label1. Haga clic en Ok.

40. De esta forma, el comando interacta con DetailsView1 para construir la instruccin SQL que se ejecutar sobre el almacn de datos va SqlDataSource1. El comando, obviamente, eliminar el registro en que nos encontremos. D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

34

Free - Lab 41. Modifique el valor de la propiedad InsertQuery, haciendo clic en el botn que invoca el Command and Parameter Editor. Utilice Query Builder para la construccin de la instruccin INSERT. Seleccione la tabla jobs nuevamente, y seleccione slo los campos que no forman la llave primaria (job_desc, min_lvl, max_lvl), dado que la llave primaria es identity. Vea cmo al seleccionar los campos en el diagrama, stos se agregan en el pane de seleccin y asignacin; para cada una de las columnas se deber especificar un parmetro con el mismo nombre, anteponiendo la arroba. Los parmetros se colocarn en la columna New Value . Presione Ok.

42. La instruccin SQL que auxiliar a SqlDataSource en la insercin de datos ha quedado como sigue. INSERT INTO jobs(job_desc, min_lvl, max_lvl) VALUES (@job_desc, @min_lvl, @max_lvl) 43. Agregue los parmetros que acabamos de definir en la instruccin (@job_desc, @min_lvl, y @max_lvl). Al igual que el parmetro @job_id, estos parmetros recibirn los datos de la forma (Form), siendo los Form fields los siguientes: TextBox1, TextBox2, TextBox3, respectivamente.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

35

44.

Modifique el valor de la propiedad UpdateQuery, haciendo clic en el botn que invoca el Command and Parameter Editor. Utilice Query Builder para la construccin de la instruccin UPDATE. Seleccione la tabla jobs nuevamente, y seleccione slo los campos que no forman la llave primaria (job_desc, min_lvl, max_lvl), dado que la llave primaria es identity y no se puede modificar. Vea cmo al seleccionar los campos en el diagrama, stos se agregan en el pane de seleccin y asignacin; para cada una de las columnas se deber especificar un parmetro con el mismo nombre, anteponiendo la arroba. Los parmetros se colocarn en la columna New Value . Presione Ok.

45. En este caso es muy importante no olvidar el filtro de modificacin en el pane de seleccin y asignacin, para evitar la sustitucin de valores para todos los registros. Despus de los campos que se han agregado automticamente, agregue manualmente job_id en Columns, jobs en Table, no seleccione la casilla de verificacin Set, y en Filter escriba =@job_id.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

36

Free - Lab

46. La instruccin SQL que auxiliar a SqlDataSource en la modificacin de datos ha quedado como sigue. UPDATE jobs SET job_desc = @job_desc, min_lvl = @min_lvl, max_lvl = @max_lvl WHERE (job_id = @job_id) 47. Agregue los parmetros que acabamos de definir en la instruccin (@job_desc, @min_lvl, @max_lvl y @job_id). Estos parmetros recibirn los datos de la forma (Form), siendo los Form fields los siguientes: TextBox1, TextBox2, TextBox3, Label1, respectivamente.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

37

48. SqlDataSource ya es capaz de ejecutar instrucciones SQL sobre el almacn de datos, en coordinacin con los valores que recopilar DetailsView.

X Especificando la funcionalidad disponible en DetailsView


49. Ya que hemos realizado las definiciones que hacen posible que DetailsView y SqlDataSource manejen todas las opciones de un actualizador, es necesario decirle a nuestra pgina qu funciones queremos disponibles. 50. Desde el smart tag de DetailsView1, marque las casillas de verificacin Enable Paging, para que la muestra de registros admita paginacin; Enable Inserting, para que se permita insertar nuevos registros; Enable Editing, para que se permita la modificacin de datos; y finalmente Enable Deliting, para que se permita el eliminado de registros.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

38

Free - Lab

Ejecucin guiada de http://localhost/apvbnetvs/ Enlazado02.aspx


51. Utilizando Solution Explorer establezca el proyecto http://localhost/apvbnetvs/ como proyecto de inicio de la solucin (StartUp Project); seleccione la pgina Enlazado02.aspx como pgina de inicio (Set as Start Page). Guarde todos los cambios que ha realizado en la solucin (CTRL-MAYS-S). Inicie la depuracin para comprobar el comportamiento de su programa (F5). 52. De inicio se puede observar que DetailsView est haciendo el enlazado, y la informacin se muestra en el formato especificado.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

39

53. Haga clic en los vnculos numerados de la parte baja de DetailsView. Esos vnculos son los vnculos de paginacin; corresponde un vnculo a cada uno de los registros extrados del origen de datos. Lo que vemos est en memoria, en un objeto DataSet; en este momento estamos trabajando de forma desconectada. 54. Haga clic en el botn Nuevo registro. Cambiar la interfaz, mostrando los campos en el contexto de insercin de datos, que vendra siendo InsertItemTemplate. Escriba en Descripcin el dato Programador AP; en Nivel mnimo escriba 60; en Nivel mximo escriba 100. Haga clic en Insertar.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

40

Free - Lab 55. Al hacer clic en Insertar, DetailsView le proporciona los valores de parmetro al comando SQL asignado a la propiedad InsertQuery de SqlDataSource1, e intenta el mtodo Update sobre el DataSet de trabajo. Al hacerlo, el comando de insercin reproduce la instruccin SQL de agregado de datos sobre el almacn de datos fsicos. En resumen, hemos agregado un registro a una base de datos en modo desconectado. 56. Utilice la paginacin hasta que vea el registro que acaba de agregar. El id asignado puede variar, dependiendo de los registros que tenga en su base.

57. Haga clic en Modificar datos. En Descripcin cambie a Programador AP-DEV, en Nivel mnimo a 70 y en Nivel mximo a 120. Haga clic en Actualizar.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

41

58. Utilice la paginacin para colocarse en el registro que acaba de modificar y vea cmo los datos se han actualizado.

59. Haga clic en Borrar registros.

Su registro se habr borrado.

60. Lo importante de todo es que para toda esta funcionalidad no fue necesario que hiciramos una sola lnea de cdigo. FIN DEL EJERCICIO D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

42

Free - Lab

Notas:

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.

Manejo de bases de datos desde Aplicaciones Web

43

Examen rpido del captulo


Parte 1: Marque con una cruz el inciso que considere que responde a la pregunta.
1) Controles ASP.NET que de forma declarativa permiten la conexin con bases de datos, adems de realizar lectura y escritura de datos. (a) Data Source Controls (b) Data Bound Controls (c) Data Provider Objects Controles ASP.NET que permiten el canal de acceso directo a un origen de datos desde el navegador. (a) Data Source Controls (b) Data Bound Controls (c) Data Provider Objects Muestra un registro de una tabla en forma tabular, y permite la edicin, eliminacin e insercin de registros. (a) DetailsView (b) GridView (c) Repeater Representa el origen de datos requeridos por TreeView y Menu. (a) ObjectDataSource (b) XMLDataSource (c) HieracySource Mtodo que establece el enlazado de datos entre el Data Bound Control y el Data Source Control. (a) DataBinding (b) Bind (c) DataBind

2)

3)

4)

5)

Parte 2: Coloque en la lnea la letra F si la sentencia es falsa, y V si la sentencia es verdadera.


6) 7) 8) 9) ASP.NET 1.1 y ASP.NET 2.0 proporcionan mecanismos para establecer de forma declarativa actividades que antes requeran codificacin ADO.NET. SqlDataSource slo permite el manejo de datos almacenados en bases de datos de SQL Server. AccessDataSource slo permite el manejo de datos almacenados en bases de datos de Access. Los Data Source Controls utilizan los datos que proveen los Data Bound Controls .

10) En ASP.NET 2.0 es posible realizar un actualizador de base de datos sin necesidad de codificar nada manualmente.

D.R. www.AprendaPracticando.com Prohibida su reproduccin parcial o total. Mty. 8317-5758, LADA sin costo 01-800-APRENDA.