Videos Curso ASP.NET MVC & JavaScript HTE (Parte 2)

Videos del Curso ASP.NET MVC & JavaScript HTE (Parte 2)

Comparto la segunda parte del curso de ASP.NET MVC & JavaScript realizado en la Empresa HTE donde todo se trabaja en forma desconectada usando en el Servidor mi Serializador de Cadenas y JavaScript en el Cliente, sobre todo Matrices.

1. Curso MVC & JavaScript HTE - Demo 09

En este video se muestra como ordenar columnas en forma desconectada, tanto ascendente como descendente usando matrices en JavaScript.

Para el ejemplo se crean enlaces en la cabecera de la tabla, los cuales permiten ordenar sobre cada campo de la tabla productos, el primer clic ordena en forma ascendente y el segundo ordena en forma descendente mostrándose el símbolo respectivo.

2. Curso MVC & JavaScript HTE - Demo 10

En este video se muestra como paginar registros usando matrices en el cliente usando JavaScript. La paginación consta de enlaces (links) solo con los números de páginas, es decir, una paginación simple.

En este ejemplo se usan botones para los números de paginas, los cuales se ven en forma de círculo, con fondo y color debido al estilo, el cual cambia de apariencia al pasar el mouse (hover).

3. Curso MVC & JavaScript HTE - Demo 11

En este video se muestra como paginar registros usando matrices en el cliente usando JavaScript. La paginación consta de enlaces (links) con los números de páginas y también con 4 botones a los extremos (2 en cada lado) que permiten trabajar por bloques.

Este tipo de paginación es necesaria cuando se tiene muchas páginas y debemos agruparlas por bloques, para poder ver mejor y navegar rápidamente al inicio o al final.

4. Curso MVC & JavaScript HTE - Demo 12

En este video se muestra como hacer todas las operaciones en forma conjunta, es decir, paginar registros, ordenar columnas, filtrar registros y exportar registros a texto y excel todo en el cliente (desconectado) usando matrices en JavaScript.

El ejemplo es con la lista de productos y los datos están paginados y por bloques, también las columnas se pueden ordenar en forma ascendente y descendente, también se puede filtrar por cada campo escribiendo sobre los textos de las cabeceras en cada columna de la tabla y finalmente los datos filtrados se pueden exportar en un archivo de texto o en un archivo de excel.

5. Curso MVC & JavaScript HTE - Demo 13 (Parte 1)

En este video se muestra la primera parte de como realizar un mantenimiento de una tabla, es decir, las operaciones de adicionar, actualizar y eliminar registros.

En el ejemplo se muestra una lista de productos paginada por bloques, la cual se puede ordenar, filtrar, exportar a texto y excel. Si queremos crear un nuevo producto o editar uno existente se mostrará un popup (div dentro de la misma pagina).

Después de adicionar o actualizar un registro se actualiza la lista de productos y se cierra el popup. Finalmente, se puede eliminar desde la lista un registro previa confirmación.

6. Curso MVC & JavaScript HTE - Demo 13 (Parte 2)

En este video se muestra la segunda parte de como realizar un mantenimiento de una tabla, es decir, las operaciones de adicionar, actualizar y eliminar registros.

En el ejemplo se muestra una lista de productos paginada por bloques, la cual se puede ordenar, filtrar, exportar a texto y excel. Si queremos crear un nuevo producto o editar uno existente se mostrará un popup (div dentro de la misma pagina).

Después de adicionar o actualizar un registro se actualiza la lista de productos y se cierra el popup. Finalmente, se puede eliminar desde la lista un registro previa confirmación.

7. Curso MVC & JavaScript HTE - Demo 14 (Parte 1)

En este video se muestra la primera parte de cómo crear una cabecera detalle para una orden usando una sola página, ya que se usa solo 2 divs: uno para la parte principal y otro para las búsquedas.

Los datos de los clientes, empleados y productos para las búsquedas se cargan desde un inicio y se presentan en el mismo popup (div) usando la misma funcionalidad para los 3: filtro, ordenación y paginación, permitiendo seleccionar dando un clic.

También se realiza la validación de la cabecera y los detalles usando JavaScript y mostrando los resultados en un span como viñetas y filas de colores si no están completos los datos del detalle.

Finalmente, se graba la orden usando una cadena que viaja hasta el Procedimiento Almacenado de SQL Server usando un solo comando y una sola conexión. Además se puede imprimir la orden creada usando JavaScript para crear el HTML respectivo.

8. Curso MVC & JavaScript HTE - Demo 14 (Parte 2)

En este video se muestra la segunda parte de cómo crear una cabecera detalle para una orden usando una sola página, ya que se usa solo 2 divs: uno para la parte principal y otro para las búsquedas.

Los datos de los clientes, empleados y productos para las búsquedas se cargan desde un inicio y se presentan en el mismo popup (div) usando la misma funcionalidad para los 3: filtro, ordenación y paginación, permitiendo seleccionar dando un clic.

También se realiza la validación de la cabecera y los detalles usando JavaScript y mostrando los resultados en un span como viñetas y filas de colores si no están completos los datos del detalle.

Finalmente, se graba la orden usando una cadena que viaja hasta el Procedimiento Almacenado de SQL Server usando un solo comando y una sola conexión. Además se puede imprimir la orden creada usando JavaScript para crear el HTML respectivo.

9. Curso MVC & JavaScript HTE - Demo 14 (Parte 3)

En este video se muestra la tercera parte de cómo crear una cabecera detalle para una orden usando una sola página, ya que se usa solo 2 divs: uno para la parte principal y otro para las búsquedas.

Los datos de los clientes, empleados y productos para las búsquedas se cargan desde un inicio y se presentan en el mismo popup (div) usando la misma funcionalidad para los 3: filtro, ordenación y paginación, permitiendo seleccionar dando un clic.

También se realiza la validación de la cabecera y los detalles usando JavaScript y mostrando los resultados en un span como viñetas y filas de colores si no están completos los datos del detalle.

Finalmente, se graba la orden usando una cadena que viaja hasta el Procedimiento Almacenado de SQL Server usando un solo comando y una sola conexión. Además se puede imprimir la orden creada usando JavaScript para crear el HTML respectivo.

Entrenamiento - Vacantes Taller ASP.NET MVC & JavaScript Domingos

Vacantes Taller ASP.NET MVC & JavaScript Domingos

A los interesados en participar en el Taller de ASP.NET MVC & JavaScript, les comunico que pueden incorporarse para el inicio del tercer mes (Domingo 7 de Febrero de 8:00 am a 2:00 pm)

Los temas que ya se trataron fueron:
- Primer mes: Programando en el servidor web con C# (Creación de Librerías Genéricas y Serializadores)
- Segundo mes: Programando con JavaScript en el Cliente (Listar, Filtrar, Ordenar, Paginar, Exportar)

Los temas a tratar en este mes serán:
- Tercer mes: Mantenimiento, Cabecera Detalle, Reportes, Gráficos, Canvas, SVG, WebWorkers

La inversión del curso es de 200 soles y se paga en efectivo el primer día de clases y para participar hay que enviar un mail de confirmación a Luis.duenash@gmail.com indicando su nombre completo y se le enviará la dirección donde se realiza el curso que es en el cono norte.

Hay muchos que están en duda y quieren participar pero se les complica el horario o dicen que esta muy lejos, por lo cual esperan otra oportunidad. Solo les recuerdo que ya no habrá mas oportunidades porque ya no pienso seguir dictando talleres y las librerías de código y los ejemplos solo se las comparto a los alumnos de los talleres.

Los que han sido mis ex-alumnos y no se han enterado, ya no existe ISILTECH y la única forma de llevar un curso conmigo es participando en los Talleres de los Domingos. Finalmente, los temas que se ven son diferentes a los que dictaba hace mas de un año, todo es de lado del cliente (super veloz), es decir, mas del 80% de código es JavaScript y solo un 20% es .NET (C#).

Videos Curso ASP.NET MVC & JavaScript Desysweb (Parte 1)

Videos del Curso ASP.NET MVC & JavaScript Desysweb (Parte 1)

Comparto la primera parte de otro curso de ASP.NET MVC & JavaScript realizado en la Empresa Desysweb donde todo se trabaja en forma desconectada usando en el Servidor mi Serializador de Cadenas y JavaScript en el Cliente, sobre todo Matrices.

1. Curso MVC & JavaScript Desysweb - Demo 01

En este video se muestra como trabajar con Listas de 2 formas:
- Consulta Síncrona usando el control MVC WebGrid que envia HTML
- Consulta Asíncrona usando XHR y enviando String que son usados para crear una Tabla por JavaScript en el Cliente.

Esta segunda forma es mas eficiente ya que solo se envía los datos (cadenas separadas por un caracter) y  en el cliente se construye el HTML usando JavaScript.

2. Curso MVC & JavaScript Desysweb - Demo 02

En este video se muestra como crear una Consulta Asíncrona usando XmlHttpRequest (XHR) enviando Cadenas (String) mediante un serializador personalizado y creando una tabla HTML en JavaScript.

Para el ejemplo se trabaja con una lista de Productos: Código, Nombre, Id del Proveedor, Nombre del Proveedor, Id de la Categoría, Nombre de la Categoría, Precio Unitario y Stock.

3. Curso MVC & JavaScript Desysweb - Demo 03

En este video se muestra como crear un filtro desconectado mediante un ComboBox y usando solo Cadenas en JavaScript.

Para el ejemplo se muestra en un ComboBox las Categorías y al seleccionar una se muestran los Productos por Categoría, pero todo es en el lado del cliente usando JavaScript.

4. Curso MVC & JavaScript Desysweb - Demo 04

En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de texto para filtrar cada campo, el filtro se hace solo usando Cadenas.

El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.

5. Curso MVC & JavaScript Desysweb - Demo 05

En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de textos y combos para filtrar cada campo.

El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.

6. Curso MVC & JavaScript Desysweb - Demo 06

En este video se muestra como trabajar con matrices y ocultar columnas en la presentación, para lo cual se listan los datos de los productos sin incluir el código del proveedor ni el código de la categoría.

Al seleccionar un producto se muestra un popup con su detalle donde si se muestran todos los datos, incluyendo los ocultos, el cual se realiza usando una búsqueda en la matriz.

Cabe resaltar que en este ejemplo no se usan dos páginas sino dos divs, uno para la lista y el otro para el detalle, lo que hace más rápido la visualización de los datos.

7. Curso MVC & JavaScript Desysweb - Demo 07

En este video se muestra como ordenar columnas en forma ascendente y descendente usando matrices en JavaScript.

Para el ejemplo se crean enlaces en la cabecera de la tabla, los cuales permiten ordenar sobre cada campo de la tabla productos, el primer clic ordena en forma ascendente y el segundo ordena en forma descendente mostrándose el símbolo respectivo.

8. Curso MVC & JavaScript Desysweb - Demo 08

En este video se muestra como paginar registros usando matrices en el cliente usando JavaScript. La paginación consta de enlaces (links) con los números de páginas y a los extremos los botones de avance por bloques, en el caso de que sean demasiadas páginas.

En este ejemplo se usan enlaces (a hrefs) para la paginación los cuales se encuentran sobre una lista de viñetas que se visualizan como botones gracias a la hija de estilos.

9. Curso MVC & JavaScript Desysweb - Demo 09

En este video se muestra como hacer las 3 operaciones en forma conjunta, es decir, paginar registros, ordenar columnas y filtrar registros en el cliente (desconectado) usando matrices en JavaScript.

El ejemplo es con la lista de productos y los datos están paginados y por bloques, también las columnas se pueden ordenar en forma ascendente y descendente y finalmente se puede filtrar por cada campo escribiendo sobre los textos de las cabeceras en cada columna de la tabla.

Videos - Curso ASP.NET MVC Editora Perú (Parte 2)

Videos del Curso de ASP.NET MVC en Editora Perú (Parte 2)

Segunda parte del curso de ASP.NET MVC con Demos muy buenos, por ejemplo varias formas de paginación: conectada, desconectada parcial y desconectada total, además de una aplicación que incluye un Login cifrado y una consulta y actualización de empleados, incluyendo su foto.

Demo 16 - Paginación Conectada Asincrona con XmlHttpRequest y String

En este video se muestra como paginar en forma conectada y asíncrona, es decir, se obtiene cada pagina desde la base de datos (con un procedimiento almacenado) y luego este es enviado como una cadena al cliente.

La llamada de este método se hace en JavaScript en forma asíncrona con XmlHttpRequest y se forma el HTML dinamicamente con los datos (string) devuelto por el servidor.

Esta técnica debe usarse cuando los datos a consultar deben hacerse en línea, ya que varian constantemente, por ejemplo, el stock de los productos.

Demo 17 - Paginación Desconectada Parcial Asincrona

En este video se muestra como paginar en forma desconectada parcial y asíncrona, es decir, una sola vez se hace el envio de datos desde el Servidor de Datos al Servidor Web y se guarda en un objeto TempData.

Se crea un método (acción) en el Controlador que permite Paginar, recuperando del TempData los datos y devolviendo los datos de una sola pagina en forma de cadena.

La llamada de este método se hace en JavaScript en forma asíncrona con XmlHttpRequest y se forma el HTML dinamicamente con los datos (string) devuelto por el servidor.

Esta técnica debe usarse cuando los datos a consultar no se necesitan en línea (desconectado) y son muchos registros (mas de 1000 por ejemplo).

Demo 18 - Paginación Desconectada Total Asincrona

En este video se muestra como paginar en forma desconectada total y asíncrona, es decir, una sola vez se hace el envio de datos desde el Servidor de Datos al Servidor Web y de éste al Cliente.

Se envian como cadenas los datos de los productos y en el cliente usando JavaScript se forma el HTML de la tabla y los índices de paginas y se asocia a una función de JavaScript que permite paginar.

Esta técnica debe usarse cuando los datos a consultar no se necesitan en línea (desconectado) y son pocos registros (menos de 1000 por ejemplo).

La gran ventaja de esta técinca es que si se cae el Servidor Web o el Servidor de Datos no afectaría a la pagina ya que funciona todo localmente.

Demo 19 - Login, Consulta y Actualización con Foto (Parte 1)

En esta primera parte, se muestra un video de como crear un Login usando un Filtro de Autenticación validando  mediante un objeto de Sesión.

El login corresponde al usuario asignado a un cliente y esta cifrado usando JavaScript mediante el algoritmo hash MD5 implementado en la librería creada por Google CryptoJS.

Demo 19 - Login, Consulta y Actualización con Foto (Parte 2)

En esta segunda parte se muestra como crear una Consulta de Empleados por código, la cual incluye los datos del Apellido, Nombre, Fecha de Nacimiento y la Foto del Empleado.

Demo 19 - Login, Consulta y Actualización con Foto (Parte 3)

En esta tercera parte del video se muestra como actualizar los datos del empleado (incluyendo la foto) en forma asíncrona usando XmlHttpRequest mediante el método "post" y un FormData.

Para grabar la foto se envía como cadena (base 64) pero sin cabecera, pero en el servidor se convierte a array de bytes y luego se pasa a la entidad de negocio y se envia a la regla de negocio que permite actualizar los datos del empleado, incluyendo la foto.

Lo destacado de todos los demos es que son asíncronos y consumen el menor ancho de banda, ya que uso mi propio serializador de cadenas y uso XHR (asíncrono nativo).

El Demo del Día: Paginación y Ordenación Asíncrona en ASP.NET MVC con Ajax ActionLink y Vista Parcial

Paginación y Ordenación Asíncrona en ASP.NET MVC con Ajax ActionLink y Vista Parcial

Luego de casi un mes de no publicar un Demo, esta semana vamos a publicar uno diario para nivelarnos. En esta ocasión veremos como paginar y ordenar en forma asíncrona en ASP.NET MVC usando el control Helper Ajax.ActionLink y una Vista Parcial.

Requerimiento

Se desea crear una aplicación web en ASP.NET MVC que permita consultar la lista de empleados, dando la posibilidad de mostrar por páginas y ordenar los registros en forma ascendente y descendente por cada columna mostrada.
El requerimiento debe acompañarse de una buena experiencia de usuario que permita actualizar los datos al paginar u ordenar sin refrescar toda la pantalla.

Solución

Usaremos los controles Ajax.ActionLink tanto para la ordenación como la paginación, los cuales realizarán una llamada asíncrona (internamente usan jQuery Ajax) y actualizarán la vista mediante una vista parcial con los empleados.

Crear el Procedimiento Almacenado en la Base de Datos Northwind de SQL Server

Para listar los datos de los empleados crear el procedimiento "uspEmployeesListar":

Create procedure [dbo].[uspEmployeesListar]
As
Select EmployeeId,LastName,FirstName,IsNull(BirthDate,'1/1/1900') as Birthdate
From Employees

Crear una Librería de Entidades de Negocio para Northwind

Crear una librería de clases "Northwind.Librerias.EntidadesNegocio" con una clase llamada "beEmpleado" que tenga el siguiente código:

using System;
namespace Northwind.Librerias.EntidadesNegocio
{
    public class beEmpleado
    {
        public int IdEmpleado { get; set; }
        public string Apellido { get; set; }
        public string Nombre { get; set; }
        public DateTime FechaNacimiento { get; set; }
        public byte[] Foto { get; set; }
    }
}

Crear una Librería de Acceso a Datos para Northwind

Crear una librería de clases "Northwind.Librerias.AccesoDatos" con una clase llamada "daEmpleado" que tenga el siguiente código:

namespace Northwind.Librerias.AccesoDatos
{
    public class daEmpleado
    {
        public List<beEmpleado> Listar(SqlConnection con)
        {
            List<beEmpleado> lbeEmpleado = null;
            SqlCommand cmd = new SqlCommand("uspEmployeesListar", con);
            cmd.CommandType = CommandType.StoredProcedure;

            SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
           
            if (drd != null)
            {
                lbeEmpleado = new List<beEmpleado>();
                beEmpleado obeEmpleado;
                int posIdEmpleado = drd.GetOrdinal("EmployeeID");
                int posApellido = drd.GetOrdinal("LastName");
                int posNombre = drd.GetOrdinal("FirstName");
                int posFechaNacimiento = drd.GetOrdinal("BirthDate");
                while (drd.Read())
                {
                    obeEmpleado = new beEmpleado();
                    obeEmpleado.IdEmpleado = drd.GetInt32(posIdEmpleado);
                    obeEmpleado.Apellido = drd.GetString(posApellido);
                    obeEmpleado.Nombre = drd.GetString(posNombre);
                    obeEmpleado.FechaNacimiento = drd.GetDateTime(posFechaNacimiento);
                    lbeEmpleado.Add(obeEmpleado);
                }
                drd.Close();
            }
            return (lbeEmpleado);
        }
    }
}

Nota: Hay que referenciar a la librería de entidades de negocio anteriormente creada.

Crear una Librería de Reglas de Negocio para Northwind

Crear una librería de clases "Northwind.Librerias.AccesoDatos" con una clase llamada "daEmpleado" que tenga el siguiente código:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Configuration;
using Northwind.Librerias.EntidadesNegocio;
using Northwind.Librerias.AccesoDatos;

namespace Northwind.Librerias.ReglasNegocio
{
    public class brEmpleado
    {
        public List<beEmpleado> Listar()
        {
            List<beEmpleado> lbeEmpleado = null;
            string CadenaConexion = ConfigurationManager.
            ConnectionStrings["conNW"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CadenaConexion))
            {
                try
                {
                    con.Open();
                    daEmpleado odaEmpleado = new daEmpleado();
                    lbeEmpleado = odaEmpleado.Listar(con);
                }
                catch (SqlException ex)
                {
                    foreach (SqlError err in ex.Errors)
                    {
                        //GrabarLog
                    }
                }
                catch (Exception ex)
                {
                    //GrabarLog
                }
            } //con.close(); con.Dispose();
            return (lbeEmpleado);
        }
    }
}

Nota: Hay que referenciar a las librería "System.Configuration", la librería de entidades de negocio y de acceso a datos.

Crear una Aplicación Web de ASP.NET MVC4 en C#

Abrir el Visual Studio 2012 y seleccionar un nuevo proyecto de tipo: "Aplicación web de ASP.NET MVC4".

Escribir como nombre "Demo09" y "Aceptar", en el siguiente diálogo seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".

Antes de empezar a programar debemos referenciar las librerías anteriormente creadas, es decir, la librería de entidades del negocio, de acceso a datos y de reglas del negocio de Northwind.

Crear un Controlador para el Empleado

Clic derecho a la carpeta "Controllers" y seleccionar "Agregar" y luego "Controlador", llamarle al archivo "EmpleadoController.cs" y en opciones de plantillas dejarlo en plantilla vacia (Vaciar Controlador MVC). Luego escribir el siguiente código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Northwind.Librerias.EntidadesNegocio;

using Northwind.Librerias.ReglasNegocio;

namespace Demo09.Controllers

{

    public class EmpleadoController : Controller

    {

        List<beEmpleado> lbePagina;

        List<beEmpleado> lbeEmpleado;

        int indicePaginaActual;

        int indiceUltimaPagina;

        int registrosPorPagina = 10;

        private void mostrarPagina()

        {            

            lbePagina = new List<beEmpleado>();

            int inicio = indicePaginaActual * registrosPorPagina;

            int fin = inicio + registrosPorPagina;

            for (int i = inicio; i < fin; i++)

            {

                if (i==lbeEmpleado.Count) break;

                lbePagina.Add(lbeEmpleado[i]);

            }

        }

        public ActionResult Lista()

        {

            brEmpleado obrEmpleado = new brEmpleado();

            lbeEmpleado = obrEmpleado.listar();

            Session["Empleados"] = lbeEmpleado;

            indiceUltimaPagina = (lbeEmpleado.Count / registrosPorPagina);

            if (lbeEmpleado.Count % registrosPorPagina == 0) indiceUltimaPagina--;

            ViewBag.IndiceUltimaPagina = indiceUltimaPagina;

            mostrarPagina();

            return View(lbePagina);

        }

        public PartialViewResult Ordenar(string campo)

        {

            ViewBag.Campo = campo;

            lbeEmpleado = (List<beEmpleado>)Session["Empleados"];

            int n = 0;

            string simbolo = "▲";

            if (TempData[campo] != null)

            {

                if (TempData[campo].Equals(0))

                {

                    n = 1;

                    simbolo = "▼";

                }

                else simbolo = "▲";

            }

            TempData[campo] = n;

            ViewBag.Simbolo = simbolo;

            if (n == 0) lbeEmpleado = lbeEmpleado.OrderBy

            (x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList();

            else lbeEmpleado = lbeEmpleado.OrderByDescending

            (x => x.GetType().GetProperty(campo).GetValue(x, null)).ToList();

            Session["Empleados"] = lbeEmpleado;

            if (TempData["indicePaginaActual"] != null)

            {

                indicePaginaActual = (int)TempData["indicePaginaActual"];

                TempData["indicePaginaActual"] = indicePaginaActual;

            }

            mostrarPagina();

            return PartialView("Tabla", lbePagina);

        }

        public PartialViewResult Paginar(int pagina)

        {

            lbeEmpleado = (List<beEmpleado>)Session["Empleados"];

            indicePaginaActual = pagina;

            TempData["indicePaginaActual"] = indicePaginaActual;

            mostrarPagina();

            return PartialView("Tabla", lbePagina);

        }

    }

}

Nota: Inicialmente se llamará al método de acción "Lista" y luego los Ajax.ActionLink de ordenar llamarán a la acción "Ordenar" que devolverá una vista parcial llamada "Tabla" con los datos ordenados ascendente o descendente de acuerdo al valor del TempData de cada campo.

Si se da clic a los Ajax.ActionLink de paginación se llamará a la acción "Paginar" que configura el "indicePaginaActual" y muestra la vista parcial "Tabla" paginada.

Crear una Hoja de Estilos para la Vista Principal y la Vista Parcial

Primero crear una carpeta llamada "Content", luego clic derecho "Agregar" y luego "Hoja de estilos" y como nombre llamarle "ACME.css" y escribir el siguiente código:

body {

    background-color:gray;

}

.Titulo {

    background-color:black;

    color:white;

    font-size:larger;

}

.Subtitulo {

    background-color:white;

    color:black;

    font-size:large;

}

.AnchoTotal {

    width:100%;

}

.Centrado {

    text-align:center;

}

.FilaCabecera {

    background-color:lightgray;

    color:black;

}

.FilaDatos {

    background-color:white;

    color:black;

}

Crear el archivo JavaScript con el código cliente para la Vista Principal

Antes que nada crear una carpeta llamada "Scripts" y arrastrar del explorador de Windows los archivos de jQuery: "jquery-1.8.2.min.js" y "jquery.unobtrusive-ajax.min.js", luego agregar un archivo de JavaScript llamado "Rutinas.js" y escribir el siguiente código:

function mostrarSimbolo() {

    var campo = document.getElementById("hdfCampo").value;

    var simbolo = document.getElementById("hdfSimbolo").value;

    var span = document.getElementById("spn" + campo);

    span.innerHTML = simbolo;

}

Nota: Los dos campos ocultos serán creados en la vista parcial y se usan para actualizar el símbolo de ordenación en la vista principal.

Crear la Vista Principal

Ir al controlador "Empleado" y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", desmarcar todas las casillas (checkboxs) y agregar la vista llamada "Lista", luego escribir el siguiente código:

@using Northwind.Librerias.EntidadesNegocio

@model List<beEmpleado>

@{

    Layout = null;

    AjaxOptions configura = new AjaxOptions{ HttpMethod="get", InsertionMode=InsertionMode.Replace, UpdateTargetId="tbEmpleado", OnComplete="mostrarSimbolo"};

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Lista</title>

    <link href="~/Content/ACME.css" rel="stylesheet" />

</head>

<body>

    <div>

        <table class="AnchoTotal">

            <tr class="Titulo">

                <td>Demo 09: Grilla Paginada y Ordenada Asíncrona con 

                       Ajax ActionLink y Vista Parcial</td>

            </tr>

            <tr class="Subtitulo">

                <td>Consulta de Empleados</td>

            </tr>

            <tr>

                <td>

                    <table class="AnchoTotal">

                        <thead>

                            <tr class="FilaCabecera">

                                <td style="width:70px">

                                    @Ajax.ActionLink("Código","Ordenar",

                                     new {campo="IdEmpleado"},configura)

                                    @Html.Raw(" ")<span id="spnIdEmpleado"></span>

                                </td>

                                <td style="width:200px">

                                    @Ajax.ActionLink("Apellido","Ordenar",

                                     new {campo="Apellido"},configura)

                                    @Html.Raw(" ")<span id="spnApellido"></span>

                                </td>

                                <td style="width:200px">

                                    @Ajax.ActionLink("Nombre","Ordenar",

                                     new {campo="Nombre"},configura)

                                    @Html.Raw(" ")<span id="spnNombre"></span>

                                </td>

                                <td style="width:100px">

                                    @Ajax.ActionLink("Fecha Nac","Ordenar",

                                     new {campo="FechaNacimiento"},configura)

                                    @Html.Raw(" ")<span id="spnFechaNacimiento"></span>

                                </td>

                            </tr>

                        </thead>

                        <tbody id="tbEmpleado">

                            @Html.Partial("Tabla",Model)

                        </tbody>

                        <tfoot>

                            <tr class="FilaCabecera">

                                <td colspan="4" class="Centrado">

                                    @for (int i = 0; i <= ViewBag.IndiceUltimaPagina; i++)

                                    {

                                        @Ajax.ActionLink((i + 1).ToString(), "Paginar", 

                                         new { pagina=i}, configura)                                        

                                        @Html.Raw("  ")

                                    }

                                </td>

                            </tr>

                        </tfoot>

                    </table>

                </td>

            </tr>

        </table>

    </div>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script src="~/Scripts/Rutinas.js"></script>

</body>

</html>

Crear la Vista Parcial

Ir al controlador "Empleado" y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", seleccionar la casilla (check) "Crear como vista parcial" y agregar la vista llamada "Tabla", luego escribir el siguiente código:

@using Northwind.Librerias.EntidadesNegocio

@model List<beEmpleado>

@foreach (beEmpleado obeEmpleado in Model)

{

    <tr class="FilaDatos">

        <td>@obeEmpleado.IdEmpleado</td>

        <td>@obeEmpleado.Apellido</td>

        <td>@obeEmpleado.Nombre</td>

        <td>@obeEmpleado.FechaNacimiento.ToShortDateString()</td>

    </tr>

}

<input id="hdfCampo" type="hidden" value="@ViewBag.Campo" />

<input id="hdfSimbolo" type="hidden" value="@ViewBag.Simbolo" />

Nota: Es necesario que los dos campos ocultos se encuentren dentro de la vista parcial para que se actualicen con el nombre del campo y el símbolo que se va a mostrar al hacer la ordenación asíncrona.

Modificar el archivo Web.Config para incluir la cadena de conexión

Ir al archivo Web.config ubicado en la raíz del proyecto e incluir lo siguiente:

<connectionStrings>

    <add name="conNW" providerName="SQLServer" connectionString=

"uid=UsuarioNW;pwd=123456;server=DSOFT\Sqlexpress;database=Northwind"/>

</connectionStrings>

Nota: Cambiar el nombre del servidor, el usuario y la clave de acuerdo a su configuración.

Configurar la Acción de Inicio

Para probar la aplicación web debemos configurar el inicio para lo cual nos vamos a la carpeta "App_Start" y abrimos el archivo "RouteConfig.cs" cambiando el nombre del controlador y la acción tal como se muestra en el siguiente código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Routing;

namespace Demo09

{

    public class RouteConfig

    {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Empleado", action = "Lista", id = UrlParameter.Optional }

            );

        }

    }

}

Ejecutar y Probar la Aplicación Web

Finalmente, grabar y pulsar F5 para ejecutar la aplicación, mostrándose el resultado similar a la siguiente figura:

Probar la ordenación ascendente y descendente por cada columna y se mostrará similar a la siguiente figura:

Finalmente, navegar por cada página y se verá los datos similar a la siguiente figura:

Comentario Final

En este post, hemos aprendido como paginar y ordenar en forma asíncrona usando los controles Helpers Ajax.ActionLink de ASP.NET MVC para mostrar los datos de los empleados.

Como siempre en este Blog no hemos necesitado de ningún control de terceros para realizar estas operaciones, sino que lo hemos hecho con los controles y librerías que vienen con el Framework de ASP.NET MVC.

Descarga del código

DemoDia_Grilla_Paginada_Ordenada_Asincrona

Video del Demo

Mañana publicaré otro Demo interesante de como hacer lo mismo pero totalmente desconectado, es decir sin ir al servidor web ni al servidor de datos.

Si les gusto compartanlo y denle like o +.

Videos - Curso de ASP.NET MVC Domingos (Parte 3)

Videos del Curso de ASP.NET MVC Domingos (Parte 3)

Comparto la tercera parte del Curso de ASP.NET MVC realizado los Domingos.

Curso de MVC Domingos - Demo 11 - Consulta Asíncrona en el Servidor con jQuery Ajax y JSON

En este video se muestra como realizar una consulta asíncrona de productos por categoría usando jQuery Ajax y devolviendo una lista de objetos como JSON para escribir el HTML en el cliente por Javascript.

Curso de MVC Domingos - Demo 12 - Consulta Asíncrona en el Servidor con XmlHttpRequest y Strings

En este video aprenderemos como realizar una consulta asíncrona de productos por categoría usando XmlHttpRequest (lo que usa internamente jQuery y Ajax) y devolviendo una cadena (String) para reducir el ancho de banda ya que es la octava parte de una vista parcial y la tercera parte de un JSON.

Curso de MVC Domingos - Demo 13 - Consulta Desconectada en el Cliente con jQuery Ajax y JSON

Este video muestra como realizar una consulta de productos por categoría totalmente desconectada del servidor web y de base de datos, recibiendo la primera vez todos los datos como JSON usando jQuery Ajax y filtrándolos en el cliente por JavaScript.

Curso de MVC Domingos - Demo 14 - Ordenación Desconectada en el Cliente con jQuery Ajax y JSON

En este video se muestra como ordenar los productos en el lado del cliente, totalmente desconectado del servidor web y de datos, para lo cual inicialmente hacemos una llamada asíncrona con jQuery Ajax y devolvemos un JSON con los productos los cuales se ordenan usando una función genérica de JavaScript.

Videos - Curso de ASP.NET MVC CIPSA (Parte 2)

Videos del Curso de ASP.NET MVC CIPSA (Parte 2)

Segunda parte del curso dictado en CIPSA de Desarrollo de Aplicaciones Web con ASP.NET MVC.

Curso de MVC CIPSA - Demo 07 - Consulta Conectada de Empleado con Foto

En este video se aprenderá como hacer una consulta conectada o en línea para mostrar los datos del empleado incluyendo su foto desde base de datos.

Curso de MVC CIPSA - Demo 08 - Consulta Desconectada de Empleado con Foto

En este video se aprenderá como hacer una consulta desconectada almacenando en sesión los empleados y mostrando los datos de cada uno cuando se solicite.

Curso de MVC CIPSA - Demo 09 (Parte 1) - Grilla de Empleados con Filtros en la Cabecera

Este video es la primera parte de como crear una tabla con filtros en la cabecera que permita consultar los empleados en forma desconectada y mostrar los resultados con colores para las coincidencias de los datos buscados.

Curso de MVC CIPSA - Demo 09 (Parte 2) - Grilla de Empleados con Filtros en la Cabecera

Este video es la segunda parte de como crear una tabla con filtros en la cabecera que permita consultar los empleados en forma desconectada y mostrar los resultados con colores para las coincidencias de los datos buscados.

Curso de MVC CIPSA - Demo 10 (Parte 1) - Grilla de Productos con Combos en la Cabecera

Este video es la primera parte de como crear una tabla con filtros en la cabecera que contenga textos y combos para filtrar los productos y mostrar los resultados de color.

Curso de MVC CIPSA - Demo 10 (Parte 2) - Grilla de Productos con Combos en la Cabecera

Este video es la segunda parte de como crear una tabla con filtros en la cabecera que contenga textos y combos para filtrar los productos y mostrar los resultados de color.

No se olviden darle like y repostear.

Saludos.

Videos - Curso de ASP.NET MVC CIPSA (Parte 1)

Videos del Curso de ASP.NET MVC CIPSA (Parte 1)

Esta semana he inaugurado mi canal de YouTube, donde encontrarán videos de desarrollo en .NET, HTML5, Móviles, etc.

Están invitados a suscribirse y darle Like a los que les guste, les dejo los enlaces de los videos que ya subí sobre un curso de capacitación en ASP.NET MVC a la Empresa CIPSA.

Nota: Por ahora, los videos No tienen audio ya que no uso micrófono y están grabados con Cantasia.

Curso de MVC CIPSA - Demo 01 - Controlador y Acciones

Este video muestra como crear una simple aplicación ASP.NET MVC usando Razor y C# que contenga solo un controlador y métodos de acción que devuelvan simples valores.

Curso de MVC CIPSA - Demo 02 (Parte 1) - Formulario MVC y Controles HTML Helpers

Este video muestra la primera parte de como crear un Formulario MVC usando los Controles HTML Helpers para registrar los datos de un empleado. También se muestra como cargar un archivo de texto y un archivo XML en un par de Combos.

Curso de MVC CIPSA - Demo 02 (Parte 2) - Formulario MVC y Controles HTML Helpers

Este video muestra la segunda parte de como crear un Formulario MVC usando los Controles HTML Helpers para registrar los datos de un empleado. También se muestra como cargar un archivo de texto y un archivo XML en un par de Combos.

Curso de MVC CIPSA - Demo 03 - Aplicación en Capas con Vista Con Tipo

Este video muestra como distribuir la lógica de la aplicación en varias capas, creando librerías de entidades del negocio, acceso a datos y reglas del negocio. Además se crea una vista con tipo (Modelo) para listar los empleados usando el control WebGrid.

Curso de MVC CIPSA - Demo 04 - Grilla de Empleados Paginada

Este video enseña como realizar paginación en una tabla de empleados (grilla) trabajando en forma desconectada. También se muestra como se guarda un valor entre request usando el TempData.

Curso de MVC CIPSA - Demo 05 - Grilla de Empleados Ordenada

Este video enseña como realizar ordenación en una tabla de empleados (grilla) trabajando en forma desconectada. También se muestra como se guarda un valor entre request usando el TempData.

Curso de MVC CIPSA - Demo 06 - Grilla de Empleados Paginada y Ordenada

Este video enseña como realizar paginación y ordenación a la vez, en una tabla de empleados (grilla) trabajando en forma desconectada. También se muestra como se guarda un valor entre request usando el TempData.

No se olviden de suscribirse y darle Like, para seguir subiendo diariamente mas videos.

PD: Los que desean pueden repostear los videos en sus blogs o en YouTube.

Entrenamiento - Fotos del Ultimo Seminario

Fotos del Ultimo Seminario

Antes que nada agradecer a todos los asistentes al último seminario de .NET: "Creación de Librería de Controles con .NET" y también agradecer a la empresa HTE por organizar el evento. Comparto algunas fotos para que las publiquen en sus Redes Sociales.

Mas fotos ver en el siguiente enlace:
Fotos Facebook HTE

Los Demos del seminario se los estoy enviando en unos momentos.

Entrenamiento - Cuarto Seminario de .NET (Creación de Controles en ASP.NET)

Cuarto Seminario de .NET: Creación de Librerías de Controles en ASP.NET

Un saludo cordial a todos los visitantes del Blog y anunciar que este Miércoles 28 de Enero tendremos el cuarto y último seminario de .NET, que en esta ocasión tratará sobre como crear Librerías de Controles en ASP.NET, tanto en WebForms como en MVC.

Muchos desarrolladores de WebForms solo crean Controles de Usuario (User Controls) que solo son reusables dentro de una aplicación web, pero si lo quieren usar en otras aplicaciones tienen que copiar el código fuente y eso no es reusabilidad, lo correcto es crear su Librería de Controles Web que contengan clases WebControls o CompositeControls.

Lo mismo sucede en MVC, si queremos trabajar con grillas, gráficos, reportes, Microsoft solo ofrece los controles HTML Helpers que son limitados, por lo cual, muchos programadores recurren a librerías de terceros como jQueryUI, KendoUI, Infragistics, DevExpress, etc. También veremos como podemos aumentar controles a los HTML Helpers de MVC.

Les dejo la propaganda a los interesados:

También publico una foto de la tercera charla sobre Reflection y Creación de Controles WinForms.

No se olviden confirmar su asistencia mediante un mail a Luis.duenash@gmail.com e informes@hte.com.pe.

Los dejo con una frase para que reflexionen: "La grandeza de un país se ve por la cantidad de gente culta que en el habita". Si queremos ser un país desarrollado o del primer mundo, necesitamos invertir mas tiempo en nuestra profesión y cultura; no solo hay que ir a trabajar y cumplir con lo que uno puede, sino, hay que hacer el mejor trabajo (como nadie lo haría) y para eso hay que invertir en nuestro conocimiento.

Entrenamiento - Cuarto y Ultimo Seminario .NET (Creación de Controles en ASP.NET)

Cuarto y Ultimo Seminario .NET: Creación de Controles en ASP.NET (Web Forms y MVC)

Quiero invitar a los interesados al ultimo seminario que tratara sobre "Creación de Controles en ASP.NET", en donde se verá como crear librerías de Controles Web Forms y MVC, habra ejemplos sobre controles Grillas Paginadas, Ordenadas, con Filtros en cabeceras, Exportaciones de Datos, etc.
También crearemos controles de gráficos, de búsqueda y el control ubigeo que por falta de tiempo no se pudo hacer ayer.

Gracias a todos los que asistieron a los seminarios anteriores, sobre a todo los que me vienen acompañando hace muchos años y a los que hicieron el esfuerzo por estar en los 3 seminarios anteriores, con ellos seguiremos trabajando, como lo hacíamos antes.

La idea era compartir con mas personas temas avanzados y temas del futuro en desarrollo de software, tales como "El Internet de las Cosas", "Impresion 3D" y sus implementaciones en "HTML5" y "JavaScripts APIs".

Sobre HTML5 se verían temas como:
- Formularios y Nuevos Controles
- Canvas
- SVG
- Audio y Video

Sobre JavaScripts APIs se verían temas como:
- Web Workers
- Geolocation
- FileStorage (SessionStorage, LocalStorage e IndexedDB)
- Web Audio API
- File System API
- WebGL
- WebSockets
- WebRTC
- Speech API, etc

Pero parece que muchos desean aprender temas actuales para su trabajo, es decir, como Crear Aplicaciones Web, Reportes, Impresiones, etc, temas que se ven en cualquier curso de capacitación. La idea era no repetir con los mismos temas sino prepararnos para el futuro. Pero estamos en un país donde la gente solo ve el día a día y no prevee el mañana.

Particularmente, seguiré trabajando en estos temas y este año lanzare varias librerías y generadores como les había comentado en las charlas. En realidad mi objetivo con el Blog y los Seminarios era no avanzar solo sino que muchas personas se sumaran a esto, pero cada uno establece en su vida prioridades y algunos no toman en serio la necesidad de mejorar cada día ni "entender como funcionan la cosas".

Saludos a todos y que la suerte los acompañe (la van a necesitar)

PD: Los que asistieron al seminario de ayer, hoy les enviare un mail con todos los Demos + Practicas que hice y también estaré publicando en el Blog un ejemplo de un Control Combo con Múltiples Columnas e Imágenes.

Entrenamiento - Talleres de .NET HTE para Enero

Talleres de .NET HTE para Enero

En este mes de Enero tenemos programado 2 Talleres de .NET sobre Creación de Controles.

A todos los programadores y desarrolladores de .NET que quieran crear Librerías de Controles para facilitar y agilizar el desarrollo mediante la reusabilidad se les recomienda asistir a ambas charlas donde usaremos intensivamente Reflection para crear Controles Enlazados a Datos.

Aquí les dejo la información del evento y ya se pueden ir inscribiendo de cualquiera de las 2 formas:
- Reservación por Correo
- Pago y Confirmación por Correo (envío del voucher)

El correo sigue siendo Luis.duenash@gmail.com e informes@hte.com.pe

La inversión por cada charla de 3 horas es de 40 soles y el que desea Certificado serán 20 soles adicionales.

Nota: El Certificado es opcional, solo para los que lo soliciten.

El horario es de 7:00 a 10:00 pm, pero el ingreso para el registro es a partir de las 6:30 pm.

Los esperamos.

El Demo del Día: Paginación en un GridView con Columna de CheckBoxs

Paginación en un GridView con Columna de CheckBoxs

Después de mas de 2 meses retomamos los posts de ASP .NET WebForms, en esta ocasión publicaré un caso práctico muy útil.

Requerimiento

Se desea listar registros en forma paginada usando el GridView pero mostrando una columna con Checks que permita seleccionar los registros para un uso posterior como grabar datos en el servidor.

Problema

Si creamos una grilla sin paginar con una columna de tipo CheckBox no hay problemas, pero si paginamos, al seleccionar los checks de una pagina y cambiar de pagina se perderán debido a que la grilla siempre se tiene que enlazar nuevamente para mostrar la pagina seleccionada.

Solución

Para solucionar el problema debemos enlazar la columna checkbox a una propiedad de la entidad del negocio de tipo boolean, luego debemos almacenar el valor seleccionado, lo cual se puede hacer de 2 formas:
1. Guardar el valor cada vez que se selecciona el check, ya sea para marcar o desmarcar.
2. Guardar los valores seleccionados al regresar al servidor ya sea al cambiar de página o al hacer PostBack mediante algún botón.

Definitivamente, la mejor opción es la segunda, es decir, cada vez que ocurra un Postback guardaremos los checks seleccionados de la pagina actual.

Crear el Procedimiento Almacenado en la Base de Datos de SQL Server

Create Procedure uspProductsListar
As
Select ProductID,ProductName,SupplierID,CategoryID,UnitPrice,UnitsInStock
From Products

Crear la Aplicación Web en ASP .NET Web Form

Crear un "Nuevo Sitio web vacío de ASP .NET" en C# llamado "GridView_Paginado_Checks".
Para simplificar el Demo no he creado librerías de clases y las clases las he incluido dentro de la aplicación Web.

Crear la Clase Entidad del Negocio

Crear la clase beProducto escribiendo el siguiente código:

using System;
namespace GridView_Paginado_Checks
{
    public class beProducto
    {
        public bool Seleccion { get; set; }
        public int IdProducto { get; set; }
        public string Nombre { get; set; }
        public int IdProveedor { get; set; }
        public int IdCategoria { get; set; }
        public decimal PrecioUnitario { get; set; }
        public short Stock { get; set; }
    }
}

Nota: La propiedad Seleccion es la que se va a enlazar al check para guardar el valor seleccionado.

Crear la Clase de Acceso a Datos

Crear la clase daProducto escribiendo el siguiente código:

using System;
using System.Data; //CommadType
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using System.Collections.Generic; //List
namespace GridView_Paginado_Checks
{
    public class daProducto
    {
        public List<beProducto> listar(SqlConnection con)
        {
            List<beProducto> lbeProducto = null;
            SqlCommand cmd = new SqlCommand("uspProductsListar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
            if (drd != null)
            {
                lbeProducto = new List<beProducto>();
                int posIdProducto = drd.GetOrdinal("ProductID");
                int posNombre = drd.GetOrdinal("ProductName");
                int posIdProveedor = drd.GetOrdinal("SupplierID");
                int posIdCategoria = drd.GetOrdinal("CategoryID");
                int posPrecioUnitario = drd.GetOrdinal("UnitPrice");
                int posStock = drd.GetOrdinal("UnitsInStock");
                beProducto obeProducto;
                while (drd.Read())
                {
                    obeProducto = new beProducto();
                    obeProducto.IdProducto = drd.GetInt32(posIdProducto);
                    obeProducto.Nombre = drd.GetString(posNombre);
                    obeProducto.IdProveedor = drd.GetInt32(posIdProveedor);
                    obeProducto.IdCategoria = drd.GetInt32(posIdCategoria);
                    obeProducto.PrecioUnitario = drd.GetDecimal(posPrecioUnitario);
                    obeProducto.Stock = drd.GetInt16(posStock);
                    lbeProducto.Add(obeProducto);
                }
                drd.Close();
            }
            return (lbeProducto);
        }
    }
}

Nota: Tiene que haberse creado el Procedimiento Almacenado "uspProductsListar" en la BD Northwind.

Crear la Clase de Reglas del Negocio

Crear la clase brProducto escribiendo el siguiente código:

using System;
using System.Collections.Generic; //List
using System.Data.SqlClient; //SqlConnection
using System.Configuration; //ConfigurationManager
namespace GridView_Paginado_Checks
{
    public class brProducto
    {
        public List<beProducto> listar()
        {
            List<beProducto> lbeProducto = null;
            string conexion = ConfigurationManager.ConnectionStrings["conNW"].ConnectionString;
            using (SqlConnection con = new SqlConnection(conexion))
            {
                try
                {
                    con.Open();
                    daProducto odaProducto = new daProducto();
                    lbeProducto = odaProducto.listar(con);
                }
                catch (SqlException ex)
                {                  
                    foreach (SqlError err in ex.Errors)
                    {
                        //Capturar cada error y grabar un Log
                    }
                }
            } //con.Close(); con.Dispose(); con = null;
            return (lbeProducto);
        }
    }
}

Nota: Hay que hacer referencia a la librería "System.Configuration.dll" para usar la clase ConfigurationManager para leer el archivo de configuración.

Crear el Archivo de Hoja de Estilo

Agregar un archivo de hoja de estilo llamado ACME.css y escribir lo siguiente:

body {
    background-color:aqua;
}
.Titulo {
    background-color:black;
    color:white;
    text-transform:uppercase;
    font-size:xx-large;
    font-weight:bold;
}
.AnchoTotal {
    width:100%;
}
.Centrado {
    text-align:center;
}
.Subtitulo {
    background-color:white;
    color:blue;
    text-transform:capitalize;
    font-size:x-large;
    font-weight:bold;
}
.FilaCabecera {
    background-color: lightgray;
    color:black;
}
.FilaDatos {
    background-color: white;
    color:blue;
}

Crear la Pagina ASP .NET como un Formulario Web Form

Agregar un Formulario Web Form al proyecto llamado: "ListaProductos.aspx" y escribir lo siguiente:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListaProductos.aspx.cs" Inherits="GridView_Paginado_Checks.ListaProductos" %>
<%@ Import Namespace="GridView_Paginado_Checks" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="ACME.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="AnchoTotal">
            <tr class="Titulo">
                <td>Paginacion en un GridView con Columna de Checks</td>
            </tr>
            <tr class="Subtitulo">
                <td>Selecciona de la Lista de Productos</td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="gvProducto" AllowPaging="true" AutoGenerateColumns="false"
                        Width="800px" runat="server" OnPageIndexChanging="paginarProductos">
                        <HeaderStyle CssClass="FilaCabecera" />
                        <RowStyle CssClass="FilaDatos" />
                        <PagerStyle CssClass="FilaCabecera" />
                        <Columns>
                            <asp:TemplateField ItemStyle-Width="20px">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chkSeleccion" runat="server"
                                      Checked="<%#((beProducto)Container.DataItem).Seleccion%>"  />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Código" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).IdProducto%>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Descripción del Producto"
                              ItemStyle-Width="200px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).Nombre%>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Id Prov" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).IdProveedor%>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Id Cat" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).IdCategoria%>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Pre Unit" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).PrecioUnitario.ToString("n2")%>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Stock" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <%#((beProducto)Container.DataItem).Stock%>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
            <tr>
                <td class="Centrado">
                    <asp:Button ID="btnGrabar" Text="Grabar" runat="server"
                      OnClick="grabarProductosSeleccionados" />
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="lblMensaje" Font-Bold="true" runat="server"/></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

El preview del diseño se mostrará similar a la siguiente figura:

Escribir el siguiente código C# en la página:

using System;
using System.Text; //StringBuilder
using System.Collections.Generic; //List
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace GridView_Paginado_Checks
{
    public partial class ListaProductos : System.Web.UI.Page
    {
        List<beProducto> lbeProducto;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                brProducto obrProducto = new brProducto();
                lbeProducto = obrProducto.listar();
                Session["Productos"] = lbeProducto;
                gvProducto.DataSource = lbeProducto;
                gvProducto.DataBind();
            }
            else
            {
                guardarChecksPagina();
            }
        }

        protected void paginarProductos(object sender, GridViewPageEventArgs e)
        {
            lbeProducto = (List<beProducto>)Session["Productos"];
            gvProducto.PageIndex = e.NewPageIndex;
            gvProducto.DataSource = lbeProducto;
            gvProducto.DataBind();
        }

        private void guardarChecksPagina()
        {
            lbeProducto = (List<beProducto>)Session["Productos"];
            int indice;
            for (int i = 0; i < gvProducto.Rows.Count; i++)
            {
                indice = (gvProducto.PageIndex * gvProducto.PageSize) + i;
                lbeProducto[indice].Seleccion =
                ((CheckBox)gvProducto.Rows[i].Cells[0].Controls[1]).Checked;
            }
            Session["Productos"] = lbeProducto;
        }

        protected void grabarProductosSeleccionados(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder("Ids Seleccionados: ");
            lbeProducto = (List<beProducto>)Session["Productos"];
            //List<beProducto> lbeSeleccion = lbeProducto.FindAll(x => x.Seleccion.Equals(true));
            for (int i = 0; i < lbeProducto.Count; i++)
            {
                if (lbeProducto[i].Seleccion)
                {
                    sb.Append(lbeProducto[i].IdProducto);
                    sb.Append(", ");
                }
            }
            sb = sb.Remove(sb.Length - 2, 2);
            lblMensaje.Text = sb.ToString();
        }
    }
}

Nota: La principal función es "guardarChecksPagina" que se llama en los PostBacks y permite guardar todos los checks de la pagina actual en la lista de objetos.
Además en la función controladora "grabarProductosSeleccionados" asociada al click del botón "btnGuardar" se usa un StringBuilder para concatenar los códigos de todos los checks seleccionados y mostrarlos en el Label "lblMensaje".
En esta función hay una linea comentada que permite crear una lista solo con los productos seleccionados, para nuestro caso solo se mostrará en pantalla, pero si se debe enviar al servidor solo los productos seleccionados usar esta linea y comentar el resto.

Modificar el Archivo Web.Config para especificar la cadena de conexión a Northwind

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <connectionStrings>
    <add name="conNW" providerName="System.Data.SqlClient"
      connectionString="uid=UsuarioNW;pwd=123456;data source=DSOFT\Sqlexpress;
      initial catalog=Northwind"/>
  </connectionStrings>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>
</configuration>

Probar la Pagina Web

Guardar el Sitio Web, clic derecho a la Pagina "ListaProductos.aspx" y seleccionar "Ver en el explorador". Se mostrará una ventana similar a la siguiente figura:

Seleccionar checks de diferentes paginas y verificar que se han quedado seleccionados al cambiar de pagina, luego click al botón "Guardar" para confirmar los códigos solo de los productos seleccionados, tal como se muestra en la siguiente figura:

Comentario Final

En este post hemos visto como mantener los registros seleccionados usando una columna tipo check en una grilla paginada, la cual usa plantillas de datos para las columnas y asocia la propiedad checked del checkbox a una propiedad Seleccion del modelo o entidad del negocio.

Descarga:
GridView_Paginado_Checks