Sistemas UNI. Instructor: V. Carlos, Segura P.

LABORATORIO ASP.NET – 5.

Derechos Reservados, solo para ser usados dentro de la

institución.
Derechos de Autor

El contenido de este laboratorio tiene todos los derechos reservados, por lo tanto no
se puede reproducir, transcribir, almacenar a un sistema de recuperación o de
alteración, asimismo la traducción a otro idioma de ninguna forma o por ningún
medio mecánico, manual, electrónico, magnético, óptico o de otro modo.

La persecución de una reproducción no autorizada tiene como

consecuencia la cárcel y/o multas.

UNIVERSIDAD NACIONAL DE INGENIERIA 1

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

5 ASP.NET

1 Trabajar con GridView y Elementos de Control.

1.1 Elementos de un GridView en ASP.NET.
Se puede controlar el orden, comportamiento y procesamiento de columnas individuales manipulando
directamente la colección Columns de la cuadrícula. El tipo de columna estándar -- BoundColumn --
procesa los valores en etiquetas de texto. La cuadrícula también admite otros tipos de columna que se
procesan de forma diferente. Cualquier tipo de columna se puede utilizar en la colección Columns del
control DataGrid.

Enlazando con un Origen de Datos

Ahora enlacemos la información con el GridView, en el Page load del Web Forms colocamos lo
siguiente:

Cambiando el diseño de un GridView:

Dentro del código HTML podriamos modificar como se muestra a continuación:

UNIVERSIDAD NACIONAL DE INGENIERIA 2

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Lo cual produce lo siguiente:

Aplicación de Formato Automático:

ASP.NET tiene varias plantillas de Configuración de apariencia de un GridView, para la
modificación de estas tenemos las Propiedades agrupadas EditRowStyle, HeaderStyle,
RowStyle, SelectedRowStyle y AlternatingRowStyle.

Cuadro de aplicación de Formatos para un GridView.

Campos de columna
EL objeto DataControlField representa cada columna del control GridView. Luego de manera
predeterminada, la propiedad AutoGenerateColumns se establece en true, lo que crea un objeto
AutoGeneratedField para cada campo del origen de datos. A continuación, cada campo se
representa como una columna del control GridView en el orden de aparición de cada campo en el
origen de datos.

UNIVERSIDAD NACIONAL DE INGENIERIA 3

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

También se puede controlar manualmente qué campos de columna aparecen en el control

GridView; para ello, establezca la propiedad AutoGenerateColumns en false y defina después su
propia colección 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.

BoundField
Muestra el valor de un campo en un origen de datos. Éste es el tipo de columna predeterminado
del control GridView.

HyperLinkField
Muestra el valor de un campo en un origen de datos como un hipervínculo. Este tipo de campo de
columna permite enlazar un segundo campo a la dirección URL del hipervínculo.

ImageField
Muestra una imagen para cada elemento del control GridView.

CheckBoxField
Muestra controles de casilla de verificación para cada elemento del control GridView.

ButtonField
Muestra un botón de comando para cada elemento del control GridView. Realiza la creación de una
columna de controles de botón personalizados, como el botón Agregar o Quitar.

TemplateField
Esta etiqueta muestra el contenido definido por el usuario para cada elemento del control GridView
según una plantilla especificada sirve para un tipo de campo de columna personalizado.

CommandField

UNIVERSIDAD NACIONAL DE INGENIERIA 4

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Este muestra los botones de comando predefinidos para realizar operaciones de selección, edición
o eliminación para el mantenimiento de un listado.

ShowDeleteButton
Muestra u oculta un botón de eliminación en un campo CommandField para cada uno de los
registros del control enlazado a datos.

ShowEditButton
Muestra u oculta un botón de edición en un campo CommandField para cada uno de los
registros del control enlazado a datos. El botón de edición permite al usuario editar un registro
del origen de datos. Cuando el usuario hace clic en el botón de edición para un registro
concreto, dicho botón se reemplaza con los botones de actualización y cancelación.

ShowInsertButton
Muestra u oculta el botón de nuevo en un campo CommandField. El botón de nuevo permite al
usuario insertar un nuevo registro del origen de datos. Cuando el usuario hace clic en el botón
de nuevo, dicho botón se reemplaza con los botones de inserción y cancelación. Todos los
demás botones de comando también se ocultan.

Muestra de Información Maestro Detalle:

En la base de datos Northwind tenemos las siguientes tablas relacionadas que la utilizaremos en este
ejemplo:

Desde el explorador de servidores crearemos una nueva conexión, como se muestra a continuación:

UNIVERSIDAD NACIONAL DE INGENIERIA 5

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Desde el Explorador de Servidores seleccionar la tabla Orders y arrastrarla al Web Forms que crearemos
con el nombre Ordenes.aspx , el cual creara un GridView y un enlace a datos SqlDAtaSource:

Luego seleccionar el SqlDataSource y configurar el origen de datos, en el cual seleccionamos los

siguientes campos OrderID, CustomerID, OrderDate, Freight y ShipName:

Definiremos un Join del tipo QueryString que será enviado desde el Url, para esto seleccionamos el botón
WHERE y escribimos lo siguiente y en agregar:

UNIVERSIDAD NACIONAL DE INGENIERIA 6

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

El diseño quedara como sigue:

Luego de las propiedades del GridView seleccionamos AutoGenerateColumns = True Al ejecutar

podríamos probar lo siguiente:

Debajo de este GridView crearemos otro que mostrara los detalles de las ordenes, en el cual
seleccionaremos otro origen de datos como se indica en la figura:

En el cual seleccionaremos los campos OrderID, ProductName, UnitPrice, y Quantity

UNIVERSIDAD NACIONAL DE INGENIERIA 7

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

En las condiciones del WHERE indicaremos que le parámetro de este join sera enviado por el primer
GridView.

Seleccionamos el GridView inicial y luego la propiedad DataKeyNames para seleccionar el parámetro

enviado por este control:

En este GridView se debe de habilitar la selección de la forma siguiente:

UNIVERSIDAD NACIONAL DE INGENIERIA 8

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Al ejecutar esta ejemplo visualizaríamos lo siguiente:

Paginación, Ordenación y Edición de un GridView

Primero seleccionamos desde el servidor de exploradores la tabla Customers, y la colocamos en el Web

Forms con el nombre Clientes, luego seleccionamos el SqlDataSource y realizamos la selección de los
siguientes campos: CustomerID, CompanyName, ContactName y City.

Seleccionamos Avanzadas, para indicar que nuestro origen de datos admitirá la modificación:

UNIVERSIDAD NACIONAL DE INGENIERIA 9

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Luego en el GridView seleccionamos el asistente para agregar una nueva columna en la cual ingresamos
según el siguiente cuadro:

En este cuadro marcamos las opciones indicadas, Y luego establecemos a true la propiedad del GridView
EnableSortingAndPagingCallBacks, para que admita la llamada a estos métodos:

Falta indicarle al controlador de los cambios cual va hacer la llave primaria para realizar los cambios

UNIVERSIDAD NACIONAL DE INGENIERIA 10

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

Desde el cuadro de propiedades del GridView seleccionamos la propiedad DataKeyNames, en el cual

seleccionamos CustomerID

Luego se debe seleccionar el SqlDataSource y en su propiedad UpdateQuery modificamos como se

indica:

Al realizar la ejecución de esta pagina tendríamos lo siguiente:

UNIVERSIDAD NACIONAL DE INGENIERIA 11

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

1.2 Uso de Controles Wizard

El Control Wizard

El control Wizard de ASP.NET simplifica muchas de las tareas asociadas a la creación de varios formularios
y la recopilación de los datos proporcionados por el usuario. El control Wizard proporciona un sencillo
mecanismo que permite crear y agregar pasos o reordenar los pasos existentes con facilidad. Puede crear
exploraciones lineales y no lineales, así como personalizar la exploración del usuario del control sin
necesidad de escribir código.

Mediante el control Wizard, puede utilizar pasos diferenciados para recopilar datos. De esta forma, los
usuarios se pueden desplazar por los pasos según su criterio y se facilita su labor. Como desarrollador, no
tiene que preocuparse por conservar los datos en las páginas porque el control mantiene el estado
mientras el usuario finaliza los distintos pasos.

Diseño del control Wizard, se observa que dispone de un diseñador dinámico para su configuración:

Aplicando Formato Automático

Adicionando Pasos para el Asistente:

Para esto agregamos los siguientes elementos WizardStep, estos elementos deben tener las siguientes
propiedades definidas:

Title: Información StepType: Auto

Title: Comentarios StepType: Auto
Title: Resumen StepType: Finish
Title: Completado StepType: Complete

UNIVERSIDAD NACIONAL DE INGENIERIA 12

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

En el paso Información, agregamos los elementos según la grafica de identificación, además validamos el
correo con los controles de validación.

En el paso comentarios, agregamos los siguientes elementos según la grafica, incluso se tiene que agregar
las validaciones que se indica.

UNIVERSIDAD NACIONAL DE INGENIERIA 13

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS
Sistemas UNI. Instructor: V. Carlos, Segura P.

En el Item Completado, agregamos un label, y configuraremos el evento finalizar del Wizard, para esto
desde el cuadro de propiedades seleccionamos eventos y damos doble click sobre la propiedad
FinishButtonClick, como se muestra en la grafica:

En este evento escribimos lo siguiente:

UNIVERSIDAD NACIONAL DE INGENIERIA 14

FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS