uhkkjñk khk k ades

Escuela de Informtica y Telecomunicaciones

Programacin de Consultas SQL ADO.Net

LDP3501-2011 / DUOC-AV

Actividades:

Personalizacin de controles enlazados a datos. ............................................................ 1

Conectarse a la Base de Datos. ........................................................................................... 1

Personalizar la edicin de registros .................................................................................... 1

Retocando la edicin personaliza ....................................................................................... 3

Personalizar la eliminacin de registros ............................................................................. 4

Mostrar una lista de seleccin en la columna Empresa ..................................................... 7

Controles enlazados a datos mediante entidades (EDM). ............................................... 9

Generando el Modelo de Entidades ................................................................................... 9

Conectando los controles al Modelo de Entidades .......................................................... 13


Pgina 1

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 Personalizacion.aspx.

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).

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

automticamente:


Pgina 2

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 3

d) Dentro de las propiedades que se presentan para el campo de comando realizaremos los siguientes

ajustes:

Propiedad

Configuracin

ButtonType

Cambiarlo por la opcin Image.

CancelImageUrl

Seleccionar la imagen cancelar.bmp

EditImageUrl

Seleccionar la imagen editar.bmp

UpdateImageUrl

Seleccionar la imagen aceptar.bmp

CauseValidation

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 4

f) Aqu tenemos los otros dos botones de imagen, que se muestran en el modo de edicin, agregue un

ToolTip a cada uno.

g) 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.

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.

j) Ejecutamos la aplicacin para validar los cambios realizados.

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


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


Pgina 5

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) En la plantilla de tem (ItemTemplate), agregamos un botn de imagen ImageButton.

f) Dentro de las propiedades que se presentan para el botn de imagen realizaremos los siguientes

ajustes:

Propiedad

Configuracin

ID

btnColumnaEliminar

CauseValidation

Cambiar por false

CommandName Delete

ImageUrl

Seleccionar la imagen eliminar.bmp

ToolTip

Eliminar Registro

CauseValidation

Cambiar por false

OnClickClient 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 6

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 = window.confirm("Esta seguro de eliminar este empleado?"); var hdn = document.getElementById("hdnRespuesta"); hdn.value = respuesta; }

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 al control hidden.

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 = bool.Parse(hdnRespuesta.Value); e.Cancel = !eliminar;

k) Ejecute la aplicacin y valide que se ejcuta la confirmacin y que la opcin es tratada de manera

correcta:


Pgina 7

Mostrar una lista de seleccin en la columna Empresa 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


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.

g) 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).


Pgina 8

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.

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) Terminamos la edicin de la plantilla.

k) Ejecutamos la aplicacin y editamos un registro para ver los cambios efectuados.


Pgina 9

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 Empresas.DALC.

c) Elimine la clase creada por defecto.

Generando el Modelo de Entidades a) En el nuevo proyecto agregue un nuevo tem del tipo ADO.Net Entity Data Model de nombre

EmpresasEDM, como lo indica la imagen:

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:


Pgina 10

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 11

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 12

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 13

Conectando los controles al Modelo de Entidades a) En el sitio Web de la solucin, agregue una nueva pgina de nombre Entidades.aspx.

b) Para poder acceder a las entidades definidas en el modelo, se debe agregar la respectiva referencia al

proyecto de librera Empresas.DALC.

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 App.config al

archivo Web.Config del sitio Web.

d) Desde el grupo de controles de Datos agregamos un control EntityDataSource de nombre

edsEmpleados a la pgina.

e) Desde las tareas del control EntityDataSource, accedemos para Configurar la Fuente de Datos

f) 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 14

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).

j) Tambin habilitaremos las opciones de: Paginacin, Ordenamiento, Edicin y Eliminacin.

k) Configuramos esta pgina como pgina de partida de la aplicacin y la ejecutamos para validar su

funcionamiento.

uhkkjñk khk k ades

Documents

Transcript of uhkkjñk khk k ades