GridView Editable en ASP.Net y C#

ASP.Net, Paginando un GridView con C#.

En esta ocasión, vamos a paginar un componente GridView en ASP.Net, ya que en algunas ocasiones los datos que nos muestra dicho componente son demasiados, haciendo que  la visibilidad sea algo tediosa, por ello será necesario paginar el componente y de esta manera recorrerlo de forma mas ordenada y agradable a la vista del usuario.

Para realizar dicha practica, será necesario crear nuestra página de contenido con la cual trabajaremos, para ello agregamos un componente gridview y un componente label,  en el cual mostraremos un mensaje de error si llegase a suceder.

Diseño de la Página de Contenido.

Una vez que hemos agregado nuestro componente gridview, le vamos a dar un poco de presentación, para ello hacemos clic sobre el gridview y posteriormente en la etiqueta inteligente o Smart Tag situada en la parte superior derecha de nuestro gridview, seguidamente seleccionar la opción Formato Automático y por ultimo seleccionar el formato deseado, tal como se muestra a continuación:

Aplicando algo de presentación rápida :)

Con algo de estilo :)

Una vez terminado el proceso de personalización, el siguiente paso es muy importante, ya que es aquí donde le indicaremos al componente la Configuración de Paginación, para ello seleccionamos nuestro gridview y nos dirigimos a sus propiedades, donde seleccionaremos la Opción Paginación, donde:

AllowPaging: Indica al componente gridview que tendrá activada la función de paginación.

PageIndex: Una Vez paginado el componente, indica la página actual, la que se nos mostrara.

PageSize: Indica el número de filas que mostrara el componente en cada página.

Propiedades de Paginación.

PagerSettings: Permite establecer propiedades personalizadas de paginación, por ejemplo, si deseamos visualizar imágenes en vez de números, para el número de páginas, si queremos cambiar el modo de paginación, etc.

En nuestro caso solo establecemos la propiedad AllowPaging a true lo que nos dará un resultado como el de la imagen siguiente.

GridView configurado para Paginación.

Ahora, como le hemos indicado al componente que tendrá activada la función de paginación, será necesario controlar el evento asociado a dicha función, pero antes, debemos codificar una función que nos permita llenar nuestro gridview con datos de una tabla de nuestra BD, para ello colocamos el siguiente código:

    public void LlenaGridView()

    {

        try

        {

            //Asignamos la cadena de conexion al objeto ODBCConexion

            Conexion.ConnectionString = "DSN=connac";

            //Se indica al comando la conexion que utilizara

            Comando.Connection = Conexion;

            //Abrimos la conexion

            Conexion.Open();

            //alamacenar temporalmente el resultado de la consulta SQL

            DataSet ds = new DataSet();

            OdbcDataAdapter Adaptador = new OdbcDataAdapter();

            //Se indica la instrucción SQL a ejecutar en el origen de datos

            Comando.CommandText = "SELECT Id, Nombre AS Pais FROM Pais";

            //Se indica al adaptador el comando a utilizar

            Adaptador.SelectCommand = Comando;

            //El adaptador ejecuta la instruccion SQL y deja el resultado en el componente dataset (ds)

            Adaptador.Fill(ds);

            //Se indica al componente visual el origen de datos

            gvDatos.DataSource = ds.Tables[0];

            //Se enlaza con el origen de datos indicado

            gvDatos.DataBind();

            //

            Conexion.Close();

        }

        catch (Exception Exd)

        {

            //Si existiera algún error se muestra en la etiqueta label

            lblMensaje.Text = Exd.Message;

        }

    }

Esta función lo que hace es obtener los registros de nuestra Base de Datos y mostrarlos en el componente gridview, ya realizado esto, el siguiente paso consiste en hacer el llamado al método o función codificado anteriormente, dentro del Evento Load del formulario o Página de Contenido, con el fin de que al cargar se la página se llene el componente gridview.

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            //Llamado al método o función que llena al componente gridview

            LlenaGridView();

        }

    }

Por último, debemos controlar el evento PageIndexChanging del componente gridview, en donde se llevará a cabo el proceso de paginación, tal como se muestra a continuación:

protected void gvDatos_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        //Indica al componente gridview la pagina seleccionada por el usuario que debe mostrar.

        gvDatos.PageIndex = e.NewPageIndex;

        //Llamado al método o función para que recargue los datos en el GridView.

        LlenaGridView();

    }

Notar que se debe establecer la propiedad PageIndex del componente gridview a través del argumento e del método PageIndexChanging ya que contiene el índice seleccionado por el usuario, tal como se muestra en el código anterior.

Saludos y espero les sea de utilidad!!! Gracias!!!