0% encontró este documento útil (0 votos)
678 vistas32 páginas

Guía de Personalización GridView ADO.Net

Este documento proporciona información sobre cómo personalizar controles enlazados a datos en ASP.NET, incluidos los campos de columna y el control GridView. Explica los diferentes tipos de campos de columna como BoundField, ButtonField, CheckBoxField y TemplateField, y cómo definir explícitamente una colección de campos de columna. También cubre cómo personalizar campos BoundField y cómo acceder a eventos en el GridView.
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
678 vistas32 páginas

Guía de Personalización GridView ADO.Net

Este documento proporciona información sobre cómo personalizar controles enlazados a datos en ASP.NET, incluidos los campos de columna y el control GridView. Explica los diferentes tipos de campos de columna como BoundField, ButtonField, CheckBoxField y TemplateField, y cómo definir explícitamente una colección de campos de columna. También cubre cómo personalizar campos BoundField y cómo acceder a eventos en el GridView.
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Escuela de Informtica y Telecomunicaciones

Programacin de Consultas SQL [Link] LDP3501-2010 / DUOC-AV

En esta gua:
Personalizacin de Controles Enlazados a Datos ............................................................ 1 El control GridView .................................................................................................... 1
Campos de columna .................................................................................................................... 1 BoundField .................................................................................................................................. 2 ButtonField .................................................................................................................................. 3 CheckBoxField ............................................................................................................................. 4 CommandField ............................................................................................................................ 4 HyperLinkField ............................................................................................................................. 6 ImageField ................................................................................................................................... 6 TemplateField.............................................................................................................................. 7 Eventos del GridView .................................................................................................................. 8

Acceso a Datos con [Link] Entity Framework ........................................................... 18 Arquitectura de [Link] Entity Framework ............................................................. 18
Fuente de Datos (Data Source) ................................................................................................. 19 Proveedores de Datos (Data Providers) .................................................................................... 19 Modelo de Entidades de Datos (Entity Data Model - EDM)...................................................... 20 Entidad Cliente (EntityClient) .................................................................................................... 20 Servicios de Objetos (Object Services) ...................................................................................... 20 Entity SQL (ESQL) ....................................................................................................................... 20 LINQ to Entities ......................................................................................................................... 20

Definiendo el Modelo de Entidades de Datos EDM ................................................... 20 Consultando Entidades ............................................................................................ 22 Operaciones de actualizacin, insercin y eliminacin de entidades ......................... 23

Actividades:
Personalizacin de controles enlazados a datos. .......................................................... 10 Controles enlazados a datos mediante entidades. ........................................................ 26

Escuela de Informtica y Telecomunicaciones

Personalizacin de Controles Enlazados a Datos


En las guas anteriores hemos trabajado con los mecanismos de enlace a datos que nos provee [Link] mediante controles que actan como orgenes de datos y otros que nos permiten presentar la informacin provista por los primeros. Principalmente hemos trabajado con el control GridView y las facilidades para la mantencin de los datos all presentados, permitindonos realizar la actualizacin y eliminacin de los registros de informacin obtenidos desde la base de datos. Los mecanismos automticos no siempre pueden cubrir todas las expectativas que son requeridas para los fines indicados, a pesar de ser funcionales, ya que la interfaz debe quedar acorde a los requerimientos de la solucin. Un caso ejemplo de estos requerimientos es la necesidad de confirmar la eliminacin de los registros, para evitar eliminaciones accidentales. En la primera parte de esta gua veremos como personalizar la interfaz de mantencin de datos.

El control GridView
Funcionalmente el control GridView nos ha permitido mostrar los valores de un origen de datos en una tabla donde cada columna representa un campo y cada fila representa un registro. El control GridView nos ha permitido seleccionar, ordenar y editar estos elementos.

Campos de columna
Un objeto DataControlField representa cada columna del control GridView. De manera predeterminada, la propiedad AutoGenerateColumns se establece en false, pero al enlzara una fuente de datos se crearn de manera automtica objetos BoundField para cada campo del origen de datos. A continuacin, cada campo se representa como una columna del control GridView en el orden de aparicin de cada campo en el origen de datos. Tambin puede controlar manualmente qu campos de columna aparecen en el control GridView; para ello, se debe establecer la propiedad AutoGenerateColumns en false y definir luego su propia coleccin de campos de columna. Los distintos tipos de campo de columna determinan el comportamiento de las columnas del control. La siguiente tabla contiene los diferentes tipos de campos de columna que se pueden utilizar. Tipo de campo de columna BoundField Descripcin Muestra el valor de un campo en un origen de datos. ste es el tipo de columna predeterminado del control GridView. Muestra un botn de comando para cada elemento del control GridView. Esto permite crear una columna de controles de botn personalizados, como el botn Agregar o Quitar. Muestra una casilla de verificacin para cada elemento del control GridView. Normalmente, este tipo de campo de columna se utiliza para mostrar los campos con un valor booleano.

ButtonField

CheckBoxField

Pgina 1

Escuela de Informtica y Telecomunicaciones

Tipo de campo de columna

Descripcin

CommandField HyperLinkField

Muestra los botones de comando predefinidos para realizar operaciones de seleccin, edicin o eliminacin. Muestra el valor de un campo en un origen de datos como un hipervnculo. Este tipo de campo de columna permite enlazar un segundo campo a la direccin URL del hipervnculo. Muestra una imagen para cada elemento del control GridView. Muestra el contenido definido por el usuario para cada elemento del control GridView segn una plantilla especificada. Este tipo de campo de columna permite crear un campo de columna personalizado.

ImageField TemplateField

Para definir una coleccin de campos de columna mediante declaracin, primero se deben agregar la etiqueta <Columns> de apertura y cierre entre las etiquetas de apertura y cierre del control GridView. Luego, muestre los campos de columna que desea incluir entre las etiquetas <Columns> de apertura y cierre. Las columnas especificadas se agregan a la coleccin Columns en el orden en que aparecen en la lista. La coleccin Columns almacena todos los campos de columna del control y permite administrar los campos de columna del control GridView mediante programacin. El siguiente cdigo de marcado ejemplifica el uso de las etiquetas de manera simplificada, como se ha desarrollado en las actividades de las guas anteriores:

<asp:GridView ID="gvEmpleados" runat="server" DataKeyNames="Rut" DataSourceID="EmpleadoDS"> <Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> <asp:BoundField DataField="Rut" HeaderText="Rut" ReadOnly="True" /> <asp:BoundField DataField="Dv" HeaderText="Dv" SortExpression="Dv" /> <asp:BoundField DataField="Nombres" HeaderText="Nombres" /> <asp:BoundField DataField="Apellidos" HeaderText="Apellidos" /> <asp:BoundField DataField="Empresa" HeaderText="Empresa" /> </Columns> </asp:GridView>

Los campos de columna declarados explcitamente se pueden mostrar junto con los campos de columna generados automticamente. Cuando se utilizan ambos, primero se representan los campos de columna declarados explcitamente, seguidos de los campos de columna generados automticamente.

BoundField
Para especificar que el campo se muestre en un objeto BoundField, se debe establecer la propiedad DataField en el nombre del campo. El valor del campo puede codificarse en HTML antes de mostrarlo, estableciendo la propiedad HtmlEncode en true. Se puede aplicar una cadena de formato personalizada al valor del campo, estableciendo la propiedad DataFormatString. Cuando la propiedad HtmlEncode es true, el valor de cadena codificado del campo se utiliza en la cadena de formato personalizada. De manera predeterminada, la cadena de formato slo se aplica a los valores del campo cuando el control enlazado a

Pgina 2

Escuela de Informtica y Telecomunicaciones

datos est en modo de slo lectura. Para aplicar la cadena de formato a los valores mostrados mientras el control enlazado a datos est en modo de edicin, establezca la propiedad ApplyFormatInEditMode en true. Si el valor de un campo es nulo, puede mostrar un ttulo personalizado, estableciendo la propiedad NullDisplayText. El objeto BoundField tambin puede convertir automticamente los valores de campo de cadena vaca ("") en valores nulos, si se establece la propiedad ConvertEmptyStringToNull en true. Se puede personalizar las secciones de encabezado y de pie de pgina de un objeto BoundField. Para mostrar un ttulo en la seccin de encabezado o de pie de pgina, establezca la propiedad HeaderText o FooterText, respectivamente. En lugar de que se muestre texto en la seccin de encabezado, se puede mostrar una imagen estableciendo la propiedad HeaderImageUrl. La seccin de encabezado puede ocultarse en el objeto BoundField estableciendo la propiedad ShowHeader en false.

ButtonField
Los controles enlazados a datos (como GridView y DetailsView) utilizan la clase ButtonField para mostrar un botn para cada registro mostrado. El objeto ButtonField que se muestra de forma diferente segn el control enlazado a datos en el que se utilice. Por ejemplo, el control GridView muestra un objeto ButtonField como una columna, mientras que el control DetailsView lo muestra como una fila. Utilice la propiedad ButtonType para especificar el tipo de botn que se muestra. Para mostrar un botn de vnculo o de comando, utilice la propiedad Text para especificar el ttulo mostrado en los botones. Al hacer clic en un botn de un campo de botn, se provoca el evento de comando del control enlazado a datos primario. Para proporcionar una rutina personalizada que se ejecute al hacer clic en un botn de comando, proporcione un controlador de eventos para el evento de comando. Para conocer el ndice del registro que provoca el evento de comando, utilice la propiedad CommandArgument del argumento del evento que se pasa al evento del comando para el control enlazado a datos. La clase ButtonField rellena automticamente la propiedad CommandArgument con el valor de ndice adecuado. Utilice la propiedad CommandName para asociar un nombre de comando, como "Add" o "Remove", a los botones del objeto ButtonField. La propiedad CommandName puede establecerse en cualquier cadena que identifique la accin que se va a realizar cuando se hace clic en el botn de comando. A continuacin, se puede determinar mediante programacin el nombre de comando de un controlador de eventos y realizar las acciones oportunas. Los controles enlazados a datos reconocen ciertos nombres de comando y automticamente generan y controlan los eventos adecuados para el control. Se reconocen los nombres de comando siguientes: CommanName Cancel Delete Edit Insert Accin Cancela la accin de edicin. Desencadena la eliminacin del registro. Deja el registro en modo de edicin. Ejecuta la insercin del nuevo registro

Pgina 3

Escuela de Informtica y Telecomunicaciones

CommanName New Page Select Sort Update

Accin Solicita la creacin de un nuevo registro Desencadena la paginacin de los datos. Selecciona el registro actual. Desencadena el ordenamiento de los registros Actualiza el registro actual en edicin.

CheckBoxField
Dado que una casilla de verificacin slo puede mostrar un estado seleccionado o no seleccionado, un objeto CheckBoxField slo puede estar enlazado a un tipo de datos booleano o a una cadena que se pueda analizar con Parse. Para mostrar un ttulo al lado de cada casilla de verificacin, establezca la propiedad Text. Un objeto CheckBoxField se oculta en un control enlazado a datos cuando la propiedad Visible se establece en false. Para evitar que se modifique el valor de un campo en modo de edicin, establezca la propiedad ReadOnly en true. En los controles enlazados a datos que admiten la insercin de registros (como el control DetailsView), para ocultar un objeto CheckBoxField, establezca la propiedad InsertVisible en false.

CommandField
La clase CommandField es un campo especial que utilizan los controles enlazados a datos (por ejemplo, GridView y DetailsView) para mostrar botones de comando que realizan operaciones de eliminacin, edicin, insercin o seleccin. Los botones de comandos para realizar estas operaciones se pueden mostrar u ocultar utilizando las funciones que se mencionan en la siguiente tabla: Propiedad ShowDeleteButton Descripcin Muestra u oculta un botn de eliminacin en un campo CommandField para cada uno de los registros del control enlazado a datos. El botn de eliminacin permite al usuario eliminar un registro del origen de datos. Muestra u oculta un botn de edicin en un campo CommandField para cada uno de los registros del control enlazado a datos. El botn de edicin permite al usuario editar un registro del origen de datos. Cuando el usuario hace clic en el botn de edicin para un registro concreto, dicho botn se reemplaza con los botones de actualizacin y cancelacin. Todos los dems botones de comando tambin se ocultan. Muestra u oculta el botn de nuevo en un campo CommandField. El botn de nuevo permite al usuario insertar un nuevo registro del origen de datos. Cuando el usuario hace clic en el botn de nuevo, dicho botn se reemplaza con los botones de insercin y cancelacin. Todos los dems botones de comando tambin se ocultan.

ShowEditButton

ShowInsertButton

Pgina 4

Escuela de Informtica y Telecomunicaciones

Propiedad

Descripcin

Nota: Esta propiedad slo se aplica a controles enlazados a datos que admiten operaciones de insercin, por ejemplo el control DetailsView. ShowSelectButton Muestra u oculta un botn de seleccin en un campo CommandField para cada uno de los registros del control enlazado a datos. El botn de seleccin permite al usuario seleccionar un registro en el control enlazado a datos.

Adems, el botn de cancelacin que se muestra cuando un registro se encuentra en modo de insercin o edicin se puede mostrar u ocultar estableciendo la propiedad ShowCancelButton. Cuando la propiedad ButtonType se establece en [Link] o en [Link], se puede especificar el texto que se debe mostrar para los botones, mediante el establecimiento de las propiedades que se muestran en la siguiente tabla: Propiedad CancelText DeleteText EditText InsertText Descripcin Ttulo del botn de cancelacin. Ttulo del botn de eliminacin. Ttulo del botn de edicin. Ttulo del botn de insercin. Nota: Esta propiedad slo se aplica a controles enlazados a datos que admiten operaciones de insercin, por ejemplo el control DetailsView. NewText Ttulo del botn de nuevo. Nota: Esta propiedad slo se aplica a controles enlazados a datos que admiten operaciones de insercin, por ejemplo el control DetailsView. Ttulo del botn de seleccin. Ttulo del botn de actualizacin.

SelectText UpdateText

En lugar de mostrar un botn de comando o un botn de vnculo, se puede mostrar un botn de imagen mediante el establecimiento de la propiedad ButtonType en [Link] y estableciendo despus las propiedades que se muestran en la siguiente tabla:

Pgina 5

Escuela de Informtica y Telecomunicaciones

Propiedad CancelImageUrl DeleteImageUrl EditImageUrl InsertText

Descripcin Imagen que se va a mostrar en el botn de cancelacin. Imagen que se va a mostrar en el botn de eliminacin. Imagen que se va a mostrar en el botn de edicin. Imagen que se va a mostrar en el botn de insercin. Nota: Esta propiedad slo se aplica a controles enlazados a datos que admiten operaciones de insercin, por ejemplo el control DetailsView. Imagen que se va a mostrar en el botn de nuevo. Nota: Esta propiedad slo se aplica a controles enlazados a datos que admiten operaciones de insercin, por ejemplo el control DetailsView. Imagen que se va a mostrar en el botn de seleccin. Imagen que se va a mostrar en el botn de actualizacin.

NewImageUrl

SelectImageUrl UpdateImageUrl

De manera predeterminada, cuando el usuario hace clic en un botn de un campo CommandField, se realiza la validacin de todos los controles de validacin de la pgina. Para evitar que la validacin tenga lugar al hacer clic en un botn, establezca la propiedad CausesValidation en false.

HyperLinkField
Representa un campo que se muestra como hipervnculo en un control con enlace a datos. Para especificar el ttulo que se va a mostrar para los hipervnculos, utilice la propiedad Text. Use la propiedad NavigateUrl para especificar la direccin URL a la que desplazarse al hacer clic en el hipervnculo. Si desea mostrar el contenido vinculado en una ventana o marco concretos, establezca la propiedad Target. De manera alternativa, puede enlazar el objeto HyperLinkField a campos de un origen de datos. Esto permite mostrar un ttulo diferente para cada hipervnculo del objeto HyperLinkField y para que cada hipervnculo se desplace a una ubicacin distinta. Para enlazar un campo a un ttulo, establezca la propiedad DataTextField. Para crear una direccin URL para desplazarse, establezca la propiedad DataNavigateUrlFields en una lista separada por comas de campos para utilizar de cara a crear la direccin URL.

ImageField
Para mostrar imgenes, debe enlazar un objeto ImageField a un campo de un origen de datos que contenga la direccin URL de una imagen. Esto se consigue estableciendo la propiedad DataImageUrlField. Se puede dar formato al valor URL utilizando la propiedad DataImageUrlFormatString. Cada imagen tambin puede tener texto alternativo asociado. Este texto se muestra cuando no se puede cargar una imagen, o si no est disponible. Los exploradores que admiten la funcin ToolTips tambin muestran este texto como

Pgina 6

Escuela de Informtica y Telecomunicaciones

informacin sobre herramientas. Puede especificar un texto alternativo para la imagen mostrada mediante uno de los mtodos siguientes: La propiedad AlternateText para especificar un texto alternativo que se aplique a todas las imgenes. La propiedad DataAlternateTextField para enlazar un campo de un origen de datos a la propiedad AlternateText de cada imagen. Esto permite tener un texto alternativo diferente para cada imagen mostrada. Al enlazar a datos, puede dar formato opcionalmente al texto alternativo utilizando la propiedad DataAlternateTextFormatString.

Cuando el valor URL para una imagen es referencia null, la imagen no se puede mostrar. Puede mostrar una imagen alternativa para los valores de campo referencia null estableciendo la propiedad NullImageUrl. En lugar de una imagen alternativa, puede mostrar un texto alternativo estableciendo la propiedad NullDisplayText.

TemplateField
Puede definir una plantilla personalizada para las diferentes partes del objeto TemplateField, utilizando las plantillas mostradas en la tabla siguiente: Plantilla AlternatingItemTemplate Descripcin Especifica el contenido que se muestra para los elementos alternos en un objeto TemplateField. Especifica el contenido que se muestra para un elemento en modo de edicin en un objeto TemplateField. Especifica el contenido que se muestra para la seccin de pie de pgina de un objeto TemplateField. Especifica el contenido que se muestra para la seccin de encabezado de un objeto TemplateField. Especifica el contenido que se muestra para un elemento en modo de insercin en un objeto TemplateField. Solamente el control DetailsView admite esta plantilla. Especifica el contenido que se muestra para los elementos en un objeto TemplateField.

EditItemTemplate

FooterTemplate

HeaderTemplate

InsertItemTemplate

ItemTemplate

Pgina 7

Escuela de Informtica y Telecomunicaciones

Eventos del GridView


El control GridView proporciona varios eventos que puede utilizar para programar. De esta manera, se puede ejecutar una rutina personalizada siempre que se produzca un evento. En la siguiente tabla se enumeran los eventos admitidos por el control GridView. Evento PageIndexChanged Descripcin Se produce cuando se hace clic en uno de los botones de paginacin, pero despus de que el control GridView se ocupe de la operacin de paginacin. Normalmente se utiliza este evento cuando es necesario realizar una tarea despus de que el usuario se desplaza a una pgina diferente en el control. Se produce cuando se hace clic en uno de los botones de paginacin, pero antes de que el control GridView se ocupe de la operacin de paginacin. Este evento suele utilizarse para cancelar la operacin de paginacin. Se produce cuando se hace clic en el botn Cancelar de una fila, pero antes de que el control GridView salga del modo de edicin. Este evento suele utilizarse para detener la operacin de cancelacin. Se produce cuando se hace clic en un botn del control GridView. Este evento se utiliza a menudo para realizar una tarea cuando se hace clic en un botn del control. Se produce cuando se crea una nueva fila en el control GridView. Este evento se utiliza a menudo para modificar el contenido de una fila en el momento de su creacin. Se produce cuando una fila de datos se enlaza a los datos del control GridView. Este evento se utiliza a menudo para modificar el contenido de una fila cuando sta se enlaza a datos. Se produce cuando se hace clic en el botn Eliminar de una fila, pero despus de que el control GridView elimine el registro del origen de datos. Este evento suele utilizarse para comprobar el resultado de la operacin de eliminacin. Se produce cuando se hace clic en el botn Eliminar de una fila, pero antes de que el control GridView elimine el registro del origen de datos. Este evento suele utilizarse para cancelar la operacin de eliminacin. Se produce cuando se hace clic en el botn Editar de una fila, pero antes de que el control GridView entre en el modo de edicin. Este evento suele utilizarse para cancelar la operacin de edicin. Se produce cuando se hace clic en el botn Actualizar de una fila, pero despus de que el control GridView actualice la fila. Este evento suele utilizarse para comprobar los resultados de la operacin de actualizacin.

PageIndexChanging

RowCancelingEdit

RowCommand

RowCreated

RowDataBound

RowDeleted

RowDeleting

RowEditing

RowUpdated

Pgina 8

Escuela de Informtica y Telecomunicaciones

Evento RowUpdating

Descripcin Se produce cuando se hace clic en el botn Actualizar de una fila, pero antes de que el control GridView actualice la fila. Este evento suele utilizarse para cancelar la operacin de actualizacin. Se produce cuando se hace clic en el botn Seleccionar de una fila, pero despus de que el control GridView se ocupe de la operacin de seleccin. Este evento se utiliza a menudo para realizar una tarea despus de que se selecciona una fila en el control. Se produce cuando se hace clic en el botn Seleccionar de una fila, pero antes de que el control GridView se ocupe de la operacin de seleccin. Este evento suele utilizarse para cancelar la operacin de seleccin. Se produce cuando se hace clic en el hipervnculo para ordenar una columna, pero despus de que el control GridView se ocupe de la operacin de ordenacin. Este evento normalmente se utiliza para realizar una tarea despus de que el usuario hace clic en un hipervnculo para ordenar una columna. Se produce cuando se hace clic en el hipervnculo para ordenar una columna, pero antes de que el control GridView se ocupe de la operacin de ordenacin. Este evento se utiliza a menudo para cancelar la operacin de ordenacin o realizar una rutina de ordenacin personalizada.

SelectedIndexChanged

SelectedIndexChanging

Sorted

Sorting

Pgina 9

Escuela de Informtica y Telecomunicaciones

Personalizacin de controles enlazados a datos.


Esta actividad expondr la manipulacin de las columnas de datos enlazadas en el control GridView y DetailsView, para mejorar la interfaz de mantencin de datos. Base de Datos: Se requerir de la base de datos Empresas y los Procedimientos Almacenados, creados en las guas anteriores. Elementos iniciales: a) Abra la solucin Solucion Acceso a Datos y el sitio web Web Site Datos. b) Agregue una nueva pgina [Link]. c) Agregue un nuevo directorio en el Web Site de nombre images y cargue all las imgenes adjuntas en esta gua.

Conectarse a la Base de Datos: a) En la pgina creada agregue un control SqlDataSource desde la barra de herramientas en el grupo Datos (Data), al cual daremos el nombre EmpleadoDS. b) Ahora configuraremos el acceso a datos mediante el control. Como ya hemos creado la conexin a la Base de Datos, debemos seleccionarla desde la lista. c) Configuramos los procedimientos almacenados que hemos utilizado anteriormente para la recuperacin y mantencin de los datos (no se filtrarn los registros), seleccionamos el SP respectivo para cada una de las acciones (SELECT, UPDATE, INSERT y DELETE).

d) De retorno en el diseo, seleccionamos el GridView, seleccionamos la fuente de datos creada y marcamos la opcin Enable Pagging de las tareas y la opcin Enable Sorting, para activar la paginacin y ordenamiento. e) Ejecute la aplicacin y valide el correcto funcionamiento de las opciones de configuracin realizadas.

Personalizar la edicin de registros: No hemos provisto la accin de edicin automtica (Enable Editing / Permitir Editar), ya que la generaremos con la ayuda de un CommandButton personalizado: a) Seleccionamos el GridView de Empleados y en las tareas del GridView damos click a la opcin para editar las columnas (Edit Columns).

Pgina 10

Escuela de Informtica y Telecomunicaciones

b) Se presentar la configuracin actual de los campos enlazados (BoundField) que se generaron automticamente:

c)

Para agregar el comando de edicin seleccionados desde la lista de campos de comando (CommandField), el comando predeterminado Editar, Actualizar, Cancelar y lo incluimos con el botn Agregar.

Pgina 11

Escuela de Informtica y Telecomunicaciones

d) Dentro de las propiedades que se presentan para el campo de comando realizaremos los siguientes ajustes:
Propiedad ButtonType CancelImageUrl EditImageUrl UpdateImageUrl CauseValidation Configuracin Cambiarlo por la opcin Image. Seleccionar la imagen [Link] Seleccionar la imagen [Link] Seleccionar la imagen [Link] Cambiar por false

e)

Aceptamos los cambios realizados y ejecutamos la aplicacin para validar el funcionamiento y los ajustes realizados.

Retocando la edicin personaliza: Ya hemos tomado control sobre algunos de los aspectos de la edicin que nos permiten mejorar la interfaz, pero an podemos hacer algunos retoques estticos: Agregar un ToolTip a la imagen y cambiar el color de fondo de la edicin. a) En las tareas del GridView damos click a la opcin para editar las columnas.

b) Desde la lista inferior de campos seleccionados (Selected Fields), marcamos el campo agregado anteriormente y damos click en el vnculo Convertir este campo en TemplateField. Con ello se generar un campo de plantilla en base a la configuracin realizada antes. c) Damos aceptar para generar los cambios y luego desde las tareas del GridView seleccionamos la opcin Editar Plantillas y veremos la plantilla con el ImageButton de edicin.

d) Seleccionamos el botn e ingresamos el valor Editar Registro en la propiedad ToolTip. Esto se hace ya que el CommandField no maneja el valor de ToolTip, para los botones por defecto. e) Luego seleccionamos desde las tareas de la plantilla la plantilla de Edicin de Items EditItemTemplate:

Pgina 12

Escuela de Informtica y Telecomunicaciones

f)

Aqu tenemos los otros dos botones de imagen, que se muestran en el modo de edicin, agregue un ToolTip a cada uno. Note que en las propiedades de cada botn de imagen, se encuentran los valores de configuracin en la propiedad CommandName de cada botn (Edit, Update, Cancel) y su respectiva ImageUrl.

g)

h) Para terminar debemos hacer click en Terminar edicin de plantilla. i) Para cambiar el color de fondo al momento de la edicin, seleccionamos el GridView y en la propiedad EditRowStyle > BackColor, seleccionamos o ingresamos el color White. Ejecutamos la aplicacin para validar los cambios realizados.

j)

Personalizar la eliminacin de registros: Al proveer la eliminacin de registros por defecto (Enable Delete / Permitir Eliminar), vimos que en efecto se realiza la eliminacin, pero por lo general esta accin debe ser confirmada. Para ello realizaremos la siguiente configuracin del GridView: a) Seleccionamos el GridView de Empleados y en las tareas del GridView damos click a la opcin para editar las columnas (Edit Columns).

b) Desde la lista de campos disponible seleccionamos TemplateField y lo agregamos.

Pgina 13

Escuela de Informtica y Telecomunicaciones

c)

Damos aceptar para que se cree la nueva plantilla.

d) Seleccionamos el GridView y con el men contextual (no por Tareas), accedemos para editar la plantilla de la nueva columna. e) f) En la plantilla de tem (ItemTemplate), agregamos un botn de imagen ImageButton. Dentro de las propiedades que se presentan para el botn de imagen realizaremos los siguientes ajustes:
Propiedad ID CauseValidation CommandName ImageUrl ToolTip CauseValidation OnClickClient Configuracin btnColumnaEliminar Cambiar por false Delete Seleccionar la imagen [Link] Eliminar Registro Cambiar por false javascript:ConfirmaEliminar();

f)

La propiedad OnClickClient, gatillar la ejecucin del la funcin ConfirmarEliminar(), all realizaremos la consulta de confirmacin. Para ello guardaremos el resultado en un campo oculto, para luego evaluar su

Pgina 14

Escuela de Informtica y Telecomunicaciones

resultado antes de que se realice la eliminacin. La eliminacin se gatilla por el valor de la propiedad CommandName. g) Se debe agregar el siguiente Script en la pgina:

function ConfirmaEliminar() { var respuesta = [Link]("Esta seguro empleado?"); var hdn = [Link]("hdnRespuesta"); [Link] = respuesta; }

de

eliminar

este

h)

La respuesta de confirmacin se guarda en el control hdnRespuesta, por lo tanto agregue un control HTML Input (Hidden), con ese ID al final de la pgina.

i)

En el modo Cdigo de la pgina, agregue el atributo runat=server a l control hidden.

<input id="hdnRespuesta" type="hidden" runat="server" />

j)

En el evento RowDeleting del GridView recupere el valor y parseelo como tipo bool. Cargue el valor adecuado a la propiedad Cancel del argumento:

bool eliminar = [Link]([Link]); [Link] = !eliminar;

k)

Ejecute la aplicacin y valide que se ejcuta la confirmacin y que la opcin es tratada de manera correcta:

Mostrar una lista de seleccin en la columna Empresa:

Pgina 15

Escuela de Informtica y Telecomunicaciones

El ltimo ajuste de personalizacin que realizaremos al GridView, tiene relacin con el campo Empresa, ya que este muestra el Nmero de Rut de la Empresa y no su Nombre, para ello realizaremos los siguientes ajustes: a) Al igual que en la actividad original, agregaremos un nuevo SQLDataSource, para obtener la informacin de la tabla Empresa, cuyo nombre ser EmpresaDS. Este control utilizar la misma conexin creada anteriormente.

b) Para obtener la informacin desde la base de datos utilizaremos el procedimiento de seleccin de todas las empresas SEL_ALL_EMPRESA y terminamos la configuracin. c) Seleccionamos el GridView de Empleados y en las tareas del GridView damos click a la opcin para editar las columnas (Edit Columns).

d) Se presentar la configuracin actual de los campos enlazados (BoundField) que se generaron automticamente. e) Desde la lista seleccionamos el campo Empresa y damos click en Convertir este campo en TemplateField y damos Aceptar para guardar los cambios.

f)

Seleccionamos el GridView y con el men contextual (no por Tareas), accedemos para editar la plantilla de Empresa. Nos situamos en la plantilla de edicin del tem (EditItemTemplate) y seleccionamos el control TextBox para eliminarlo. En el lugar del TextBox agregamos un DropDownList (ddlColumnaEmpresa).

g)

h) Desde las tareas del DroDownList, seleccionamos Elegir Origen de Datos y escogemos EmpresaDS. Los campos de despliegue y valor son RazonSocial y Rut respectivamente. Damos aceptar para guardar el origen seleccionado.

Pgina 16

Escuela de Informtica y Telecomunicaciones

i)

Desde las tareas del DropDownList seleccionamos Editar DataBinding. La propiedad SlectedValue deber estar enlazada al campo Empresa, como se muestra en la figura:

j) k)

Terminamos la edicin de la plantilla. Ejecutamos la aplicacin y editamos un registro para ver los cambios efectuados.

Pgina 17

Escuela de Informtica y Telecomunicaciones

Acceso a Datos con [Link] Entity Framework


Cuando se analiza la cantidad de cdigo que el desarrollador de aplicaciones medio debe escribir para atacar el desajuste o vaco entre las diferentes representaciones de datos (por ejemplo, objetos y almacenes relacionales), queda claro que hay posibilidades de mejorar. De hecho, hay muchos escenarios donde un framework adecuado puede potenciar a un desarrollador de aplicaciones para que se centre en las necesidades de de la aplicacin y no en las complejidades relacionadas con combinar diferentes representaciones de datos. Una de las metas principales de la nueva versin de [Link] es elevar el nivel de abstraccin de la programacin contra fuentes de datos a travs de la eliminacin del "vaco" existente entre los modelos de datos y los lenguajes de programacin. Y Cmo es posible esto? A travs de dos innovaciones claves de la plataforma: LINQ y [Link] Entity Framework. Precisamente ste ltimo (Entity Framework) es un nuevo componente que aparece en la familia de tecnologas [Link], que habilitar acceso a datos mediante LINQ utilizando: LINQ To SQL, LINQ To DataSet y/o LINQ To Entities. Para resumir las caractersticas de este Entity Framework, sin duda se deben destacar los siguientes puntos: Se trata de un Framework que permite manipular y acceder a los datos como clases .NET. Permite realizar un modelado de datos a nivel conceptual, es decir, habilita la separacin de las aplicaciones y los esquemas de BD. Permite una mejor interaccin de los datos con el entorno .NET: Se interacta con objetos, frente a hacerlo con filas y columnas. Proporciona una serie de servicios en tiempo de ejecucin y en tiempo de diseo que permite a los desarrolladores describir los datos de la aplicacin e interactuar con ellos a un nivel de abstraccin conceptual claramente alineado con el concepto de implementacin de aplicaciones de negocio, y que adems ayuda a aislar la aplicacin respecto a los esquemas de base de datos (BD) sobre los que se ha definido. Se apoya en LINQ para definir las consultas a objetos del esquema EDM (Entity Data Model). Supone una capa ms, pero independiza las aplicaciones de el esquema de BD subyacente, independientemente de la tecnologa de BD que se est utilizando

Arquitectura de [Link] Entity Framework


La mencionada independencia con el esquema y la tecnologa de Base de Datos, se logra bsicamente en una arquitectura dividida en dos partes diferenciadas, Modelo de Datos y Modelo Conceptual (EDM), en la que el paso de una parte a otra se realiza a travs del correspondiente mapeo. Para realizar este mapeo se utilizan proveedores .NET que permiten interactuar con los datos en cada uno de las partes.

Pgina 18

Escuela de Informtica y Telecomunicaciones

La idea es que el provider .NET de la capa de datos se encarga de traducir las operaciones de datos realizadas en la capa conceptual a un lenguaje entendible por la BD (lgicamente T-SQL). Por su parte, el proveedor .NET (EntitySQL) de la capa conceptual traduce las consultas LINQ realizadas en las aplicaciones a las correspondientes instrucciones que interacten con el modelo conceptual definido mediante el proceso de mapeo. Escencialmente el [Link] Entity Framework consiste en una serie de capas que abstraen el esquema relacional de una base de datos y presenta un modelo conceptual. El siguiente diagrama muestra y luego se describen los componentes involucrados en el [Link] Entity Framework:

Fuente de Datos (Data Source)


Corresponde al almacn de datos fsicos, que puede ser una ms bases de datos.

Proveedores de Datos (Data Providers)


Los datos se acceden mediante un proveedor de datos [Link]. En estos momentos se encuentran disponibles los proveedores para SQL Server (instalado por defecto) y Oracle (disponible para su descarga).

Pgina 19

Escuela de Informtica y Telecomunicaciones

Modelo de Entidades de Datos (Entity Data Model - EDM)


Corresponde al modelo de entidades de datos y se compone de 3 parte: Lenguaje de Definicin del Esquema Conceptual (CSDL): Declara y define las entidades, asociaciones y herencia. Las clases de entidad se generan a partir de este esquema. Lenguaje de Definicin del Esquema del Almacn (SSDL): Metadatos que describen el contenedor del almacenamiento (base de datos) que persiste los datos. Lenguaje de Especificacin de Mapeo (MSL): Mapa de las entidades en el CSDL a las tablas descritas en el SSDL.

Entidad Cliente (EntityClient)


Es un proveedor administrado por [Link] que permite el acceso a los datos descritos en el EDM. Es similar a un SQLClient u OracleClient. Provee de un conjunto de componentes como EntityCommand, EntityConnection y EntityTransaction.

Servicios de Objetos (Object Services)


Este componente permite consultar, insertar, actualizar y eliminar datos, expresados como objetos CLR fuertemente tipados que son instancias de los tipos de entidades. El servicio de objetos es compatible con consultas Entity SQL y LINQ to Entities.

Entity SQL (ESQL)


Es un derivado de Transact-SQL, diseado para consultar y manipular entidades definidas en el Modelo de Datos de la entidad. Es compatible con las herencias y las asociaciones. Tanto los componentes de Object Services como los Entity Client, pueden ejecutar instrucciones ESQL.

LINQ to Entities
Se trata de un lenguaje de consulta fuertemente tipada, para consultas contra entidades definidas en el Modelo de Datos de la entidad.

Definiendo el Modelo de Entidades de Datos EDM


El primer paso para trabajar con [Link] Entity Framework (EF) pasa por crear un modelo de entidades a partir de un cierto esquema de BD. Esto se logra aadiendo un [Link] Entity Data Model a nuestro proyecto. Idealmente un EDM debe ser creado en una Biblioteca de Clases (aunque no es restrictivo), ya que este modelo de entidades pasar a conformar la Capa Lgica de Acceso a Datos - DALC, como hemos de inferir por la descripcin de cada uno de los componentes que formar el [Link] EF.

Pgina 20

Escuela de Informtica y Telecomunicaciones

Al momento de agregar el EDM se nos presentar un asistente de 3 pasos en el cual debemos definir algunos elementos y componentes importantes a tener en consideracin para el trabajo futuro con el EDM que se genere: 1. 2. 3. Especificar la opcin de generacin del EDM (a partir de una BD o bien un EDM vaco). Especificar la cadena de conexin a la BD (que como siempre, puede ser un archivo fsico o bien una instancia de SQL Server). Especificar que objetos de la BD queremos que formen de nuestro EDM (tablas, vistas y procedimientos almacenados).

Una vez concluido el asistente, tendremos creado el modelo de entidades que en esencia es un fichero .edmx que contiene toda la definicin del modelo. Si inspeccionamos el modelo veremos: Se han generado tantas entidades como tablas de la BD relacional. Al seleccionar cada entidad, podremos ver los detalles de la misma en cuanto a miembros y la correspondencia de los campos de la entidad con sus equivalentes en la tabla de la BD. El explorador del modelo nos permitir ir navegando por los componentes del mismo: entidades, asociaciones entre entidades, funciones, etc. Finalmente, para tener una idea del cdigo generado por el asistente, basta con que nos vayamos al Class Viewer o al Object Browser e inspeccionemos los distintos elementos generados.

Pgina 21

Escuela de Informtica y Telecomunicaciones

Consultando Entidades
Una de las formas que tenemos para definir consultas contra el EDM es a travs de LINQ To Entities que nos dota de toda la potencia y capacidades de LINQ sobre [Link] Entity Framework, as como funcionalidad de ORM (Object Relational Model), de manera que los desarrolladores pueden materializar sus entidades en tipos del CLR y programar de forma ms sencilla contra el EDM y la base de datos. Lo primero que tenemos que hacer es aadir a nuestra aplicacin las referencias necesarias: [Link]; [Link]; [Link];

Se asume que ya se ha referenciado la componente del modelo y se ha incorporado el namespace que lo encapsula:

/* Instancia del modelo de entidades creado */ EmpresasEntities modeloEmpresas = new EmpresasEntities(); /* Consulta de entidades */ var empleados = (from empleado in [Link] select empleado); [Link]("***********Consulta LINQ To Entities***********"); foreach (Empleado emp in empleados) { /* Carga la empresa referenciada [Link]();

*/

/* Muestra la informacin del Empleado */ [Link]("Rut: {0}, Nombre : {1} {2}, Empresa : {3} ", [Link], [Link], [Link], [Link]); } [Link]();

Como vemos, lo primero que se debe hacer es crear un objeto que es la instancia del ObjectContext del EDM, para el caso EmpresasEntities el cual es un objeto que se ha sido aadida al modelo en el momento de su creacin y que hereda de ObjectContext, clase que se encarga de mantener la conexin e informacin de los metadatos necesaria para leer, escribir, actualizar o eliminar entidades en la base de [Link] una consulta nos devuelve un objeto del modelo, este es persistido a travs de otras consultas mientras que exista el objeto de contexto correspondiente. Sin ms, la salida por pantalla que se obtiene de la consulta anterior es:

Pgina 22

Escuela de Informtica y Telecomunicaciones

Uno de los aspectos a destacar en el cdigo anterior tiene relacin con la carga de la Empresa relacionada al Empleado, desde la cual se obtiene su nombre. Esto es posible por la navegacin declarada al momento de la creacin del modelo y que se ha identificado por la relacin que se tiene en el modelo de datos subyacente, es decir, lo que el Esquema Conceptual a inferido del Esquema del Almacn.

Operaciones de actualizacin, insercin y eliminacin de entidades


[Link] EF a travs de LINQ To Entities nos permite realizar de manera sencilla operaciones de actualizacin, insercin o eliminacin a travs de la interaccin con las entidades del modelo. Para actualizar una entidad, basta con crear una instancia de la misma a partir de realizar una consulta a la base de datos de los resultados a actualizar (consulta con C # plano o mediante query expression):

[Link]("***********Actualizando las Entidades***********"); /* Instancia del modelo de entidades creado */ EmpresasEntities modeloEmpresas = new EmpresasEntities(); /* Consulta para obtener la entidad que se actualizar */ /* Empleado Bart Wall */ Empleado empleadoModificado = [Link] ( emp => [Link] == 1005811 ); [Link]("Nombre Empleado [Link]); = {0} {1}", [Link],

/* Cambia su Apellido y actualiza el modelo */ [Link] = "Simpson"; [Link](); [Link]("Nuevo Nombre [Link]); [Link](); = {0} {1}", [Link],

Como se observa, la clave para llevar los datos a la base de datos est en el mtodo SaveChanges(). Por otro lado, tal y como sucede con el caso de la primera consulta, gracias a que el objeto ObjectStateManager se encarga del tracking de los datos, los antiguos y nuevos valores se mantienen en el contexto de la aplicacin y los cambios se pueden guardar en la BD. La salida por pantalla de la operacin de actualizacin es:

Pgina 23

Escuela de Informtica y Telecomunicaciones

Para aadir una entidad nueva basta con crear una nueva instancia de la entidad deseada, especificar sus propiedades y aadirla al modelo:

[Link]("***********Aadiendo nuevas Entidades***********"); EmpresasEntities modeloEmpresa = new EmpresasEntities(); /* Crea la nueva instancia del empleado */ Empleado empleadoNuevo = new Empleado(); [Link] = 12345678; [Link] = "9"; [Link] = "Juan"; [Link] = "Perez"; /* Carga y asigna la empresa respectiva "Trukilanis International Corp." */ Empresa empresa = [Link](e => [Link] == 98691599); [Link] = empresa; //Accede por la Entidad /* Agrega el empleado al modelo y lo actualiza */ [Link](empleadoNuevo); [Link](); var agregados = (from empleado in [Link] where [Link] == 12345678 select empleado); foreach (Empleado empleado in agregados) { /* Muestra la informacin del Empleado */ [Link]("Rut: {0}, Nombre : {1} {2} ", [Link], [Link], [Link]); } [Link]();

En este caso la clave para preservar los datos en la BD est en el mtodo AddToEmpleado() que es generado automticamente en el modelo de creacin del EDM y que recibe un objeto del tipo de la entidad a aadir, as como en el mtodo SaveChanges(). Se deben poner atencin que para este caso particular al haber una navegacin definida para la propiedad Empresa de la entidad Empleado, se debe asignar la instancia de Empresa correspondiente. Si esta agregacin se hace con una nueva instancia (new Empresa();), se considera que dicha instancia tambin es agregada al modelo y por lo tanto ser creada.

Pgina 24

Escuela de Informtica y Telecomunicaciones

La correspondiente salida por pantalla es:

Para realizar el borrado de una entidad, se sigue la misma filosofa que para el caso de la actualizacin e insercin, slo que en este caso se utiliza el mtodo DeleteObject() y a continuacin SaveChanges() para poder llevar los datos a la base de datos:

[Link](); [Link]("*********** Eliminando Entidades***********"); /* Instancia del modelo de entidades creado */ EmpresasEntities modeloEmpresas = new EmpresasEntities(); /* Consulta para obtener la entidad que se eliminar */ /* Empleado Juan Perez */ Empleado empleadoEliminado = [Link] ( emp => [Link] == 12345678 ); [Link]("Nombre [Link]); Empleado = {0} {1}", de [Link], borrar {0}",

[Link]("Empleado [Link]());

antes

[Link](empleadoEliminado); [Link](); [Link]("Empleado [Link]()); [Link](); despus de borrar {0}",

La salida por pantalla es:

Pgina 25

Escuela de Informtica y Telecomunicaciones

Controles enlazados a datos mediante entidades (EDM).


Esta actividad es una variacin del manejo del control GridView para la presentacin de datos, en la cual el enlace se realizar mediante un Modelo de Entidades EDM y no por SqlDataSource. Base de Datos: Se requerir de la base de datos Empresas y los Procedimientos Almacenados, creados en las guas anteriores. Elementos iniciales: a) Abra la solucin Solucion Acceso a Datos. b) Agregue un nuevo proyecto de tipo Biblioteca de Clases de Nombre [Link]. c) Elimine la clase creada por defecto.

Generando el Modelo de Entidades: a) En el nuevo proyecto agregue un nuevo tem del tipo [Link] Entity Data Model de nombre EmpresasEDM, como lo indica la imagen:

Pgina 26

Escuela de Informtica y Telecomunicaciones

b) Se iniciar el asistente de creacin del modelo y en el primer paso debemos indicar que el modelo se generar a partir de una base de Datos:

c)

Luego debemos generar la conexin a la base de datos y darle un nombre para guardarla en el archivo de configuracin de la aplicacin:

Pgina 27

Escuela de Informtica y Telecomunicaciones

d)

Posteriormente se deben seleccionar los objetos de la base de datos que sern incorporados al modelo de entidades, para el caso de esta actividad se deben seleccionar las tablas y procedimientos almacenados e ingresamos el nombre EmpresasModel como espacio de nombres:

e)

Al finalizar el asistente se habr creado el modelo en nuestra librera, desde donde referenciaremos las respectivas entidades y acciones asociadas:

f)

Al seleccionar alguna de las entidades en el diagrama, podemos ver el mapeo de los tipos definidos para las propiedades respecto de la tabla asociada:

Pgina 28

Escuela de Informtica y Telecomunicaciones

g)

En el Model Browser o Explorador del Modelo, podemos ver los Esquemas de Entidades y Almacn que se han generado para este modelo:

Pgina 29

Escuela de Informtica y Telecomunicaciones

Conectando los controles al Modelo de Entidades: a) En el sitio Web de la solucin, agregue una nueva pgina de nombre [Link]. b) Para poder acceder a las entidades definidas en el modelo, se debe agregar la respectiva referencia al proyecto de librera [Link]. c) Como el modelo se conecta en base a la cadena de conexin generada en el archivo de configuracin de la componente, debemos copiar el ConnectionString EmpresaEntities, desde el archivo [Link] al archivo [Link] del sitio Web.

d) Desde el grupo de controles de Datos agregamos un control EntityDataSource de nombre edsEmpleados a la pgina. e) f) Desde las tareas del control EntityDataSource, accedemos para Configurar la Fuente de Datos En la configuracin del ObjectContext debemos seleccionar la conexin respectiva del modelo (EmpresasEntities) como lo indica la imagen:

g)

En la siguiente ventana debemos indicar la entidad que ser provista por esta fuente de datos desde el modelo de entidades. Para ello seleccionamos la entidad Empleado y marcamos las opciones para habilitar las operaciones de insercin, actualizacin y eliminacin:

Pgina 30

Escuela de Informtica y Telecomunicaciones

h) Una vez finaliza la configuracin del EntityDataSource, agregamos un control GridView (gvEmpleados) a la pgina. i) Desde las tareas del GridView le damos un formato ad-hoc y seleccionamos la fuente de datos creada anteriormente (edsEmpleados). Tambin habilitaremos las opciones de: Paginacin, Ordenamiento, Edicin y Eliminacin. Configuramos esta pgina como pgina de partida de la aplicacin y la ejecutamos para validar su funcionamiento.

j) k)

Pgina 31

También podría gustarte