INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

PERSONALIZACION DE LISTADOS CONTROL WEB GRID

Esta gua consta de:

Uso del control WebGrid.

Personalizacin del WebGrid, Columnas, formatos y estilos.
Filtros y bsquedas

1. Inicie Visual Studio y crear un Nuevo Proyecto MVC con el nombre APP_WEBGRID.
2. En esta gua vamos a trabajar con el modelo EF que se crea a partir de una base de datos
existente (Negocios2016), para ello sobre la carpeta Model hacemos click derechoAgregar Nuevo elemento, y en el cuadro de dialogo, en la seccin Datos, elegimos
ADO.NET Entity Data Model y le damos como nombre Negocios, finalmente damos click
en Agregar, tal como se muestra.

Mapear todas las tablas:

Compilar la Aplicacin.

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

3. Crear un controlador vaco llamado ProductoController y codificar el Action Index

4. Ahora procederemos a agregar una Vista al Index

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

5. Modificar la vista creada de la siguiente manera:

Configurar el RouteConfig para iniciar con el controlador Producto y ejecutar la APP.

Personalizacin del WebGrid, Columnas, formatos y estilos.

Indicador de Columnas

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

Muestra:

Ttulo a las Columnas

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

Muestra:

Uso de Estilos y Formatos

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

Muestra:

Filtro y Bsqueda
Crear un nuevo ActionResult llamado IndexBusqueda:

IESTP CIBERTEC

INSTITUTO DE EDUCACIN SUPERIOR TECNOLGICO PRIVADO

DIRECCIN ACADMICA
CARRERAS PROFESIONALES

Crear su Vista:
El cdigo es el mismo de la vista anterior agregar solo lo marcado en el recuadro rojo:

Muestra:

IESTP CIBERTEC