1. SELECCIONAR FILAS DEL GRIDVIEW l control GridView de ASP .NET proporciona mucha funcionalidad por s mismo, por lo que nos permite desarrollar escenarios habituales con poco esfuerzo y poco cdigo. Uno de los escenarios que podemos requerir en una aplicacin como la que estamos desarrollando es la posibilidad de seleccionar filas o registros de un GridView. Podemos configurar el control GridView de distintas formas para conseguir esta funcionalidad, pero la ms sencilla es establecer su propiedad AutoGenerateSelectButton al valor True. Con esto, se aade una nueva columna en el GridView que consta de un botn para seleccionar la fila. Obsrvelo en la figura siguiente.
Fjese que en el GridView ya aparece la nueva columna, que consta, en este caso, de un hipervnculo que permite seleccionar la fila correspondiente. Con esto sera suficiente para proporcionar esta funcionalidad, aunque despus veremos que podemos personalizar el aspecto del botn o hipervnculo si no utilizamos la propiedad AutoGenerate SelectButton. Es importante recordar que la pgina se recarga cada vez que se selecciona una fila. E El control GridView (II) 2 Normalmente, y para dejar ms clara esta situacin, se muestra con un color de fondo distinto la fila seleccionada. Esto se consigue a travs de la propiedad SelectedRowStyle del control GridView. Sin embargo, si se utiliza paginacin u ordenacin adems de la seleccin, puede producirse un pequeo problema y es que si se selecciona una fila y despus se pasa a una pgina distinta de resultados o simplemente se ordena el mismo, la misma fila (la misma posicin) quedar seleccionada aunque realmente sea un registro distinto. Normalmente ste no es el resultado deseado, ya que, por ejemplo, si se trata de un producto, tendremos un producto distinto al que inicialmente habamos seleccionado. Para evitar que quede seleccionada la fila una vez hemos cambiado de pgina (o incluso tambin si hemos elegido otro criterio de ordenacin pulsando en un encabezado de columna), debemos establecer la propiedad SelectedIndex del control GridView. Pr ot ect ed Sub Gr i dVi ew1_PageI ndexChanged( ) Gr i dVi ew1. Sel ect edI ndex = - 1 End Sub El evento PageIndexChanged ocurre justamente cuando cambia el ndice de la pgina seleccionada si utilizamos paginacin. Estableciendo en dicho evento la propiedad SelectedIndex del GridView al valor -1 lo que realmente estamos haciendo es eliminar la seleccin si hay alguna fila seleccionada en el GridView. Si necesitramos hacer esto pero atendiendo a la ordenacin, utilizaramos el mismo cdigo para el evento Sorted del GridView.
2. PERSONALIZAR LA SELECCIN omo hemos podido comprobar, utilizando la propiedad AutoGenerateSelectButton conseguimos la funcionalidad de seleccin que seguramente necesitaremos en algn momento de nuestra aplicacin. Bien es cierto que con lmites, ya que no podemos configurar el botn o hipervnculo que se incluye en la primera columna del GridView para ello. Si deseamos establecer esta funcionalidad de otra forma, podemos aadir una columna de tipo CommandField y personalizarla adecuadamente o incluso utilizar una columna de datos del GridView. C El control GridView (II) Copyright Computer Aided Elearning, S.A. 3 Por lo tanto, estableceremos la propiedad AutoGenerate SelectButton a False y editaremos la propiedad Columns para aadir una columna de tipo CommandField (Select).
Se puede establecer la propiedad ButtonType para indicar que la columna muestre un hipervnculo (Link), un botn (Button) o incluso una imagen (Image). Como se ha comentado, otra alternativa es utilizar una de las columnas de datos para seleccionar la fila. Para ello, puede utilizar el tipo de columna ButtonField.
El control GridView (II) 4 Por ejemplo, en este caso parece que es adecuado hacerlo simplemente pulsando en la columna del identificador del producto. En este caso, adems de la propiedad ButtonType, donde elegiremos el aspecto de la columna, lo ms importante es elegir Select en la propiedad CommandName. De esta forma, la columna ButtonField funciona prcticamente igual que una columna CommandField de tipo Select, como hemos hecho antes. Finalmente, debe establecer adecuadamente la propiedad DataTextField. Si se trata de una columna de datos, el editor lo hace por nosotros, enlazndola con un campo de la tabla Products. Sin embargo, al crear una columna de tipo ButtonField, tenemos que hacerlo nosotros expresamente. Observe el resultado.
Fjese que ahora la columna ID no slo sirve para mostrar el identificador del producto, sino que, si pulsamos en l tambin se selecciona la fila. Por lo tanto ya sabe que puede personalizar como desee la funcionalidad de seleccin: desde lo ms rpido y sencillo a conseguir el aspecto deseado.
Puede utilizar los eventos SelectedIndex Changing y SelectedIndex Changed para escribir cdigo asociado al momento previo y posterior a seleccionar una fila. El control GridView (II) Copyright Computer Aided Elearning, S.A. 5 3. USAR LA SELECCIN EN UN FORMULARIO MAESTRO/DETALLE amos a utilizar esta funcionalidad en un caso concreto. La idea es crear una pgina web donde en la parte superior aparecer la lista de clientes de la tienda virtual y, en la parte inferior, las rdenes o pedidos que han realizado. Es la tpica pgina o formulario maestro/detalle.
Aqu tenemos el ejemplo que hemos comentado. En la parte superior aparece un control GridView asociado con un control SqlDataSource que da acceso a los detalles de la tabla Customers y el cual ya tiene configurada la seleccin de filas (fjese en la primera columna). Esto ya sabemos hacerlo. Por su parte, el control GridView de la parte inferior muestra las rdenes o pedidos de compra del cliente seleccionado. Para ello, el origen de los datos que tiene que mostrar este segundo GridView est en funcin del cliente seleccionado, por lo que ser necesario establecerlo a travs de un parmetro. Sin embargo, qu valor debe tener este parmetro? Si lo rellenamos con el ndice correspondiente a la fila seleccionada en la lista de clientes, no funcionar, ya que lo que realmente necesitamos es el identificador del cliente en s. V Otro ejemplo de este tipo de formularios es visualizar las rdenes y las lneas de detalle de cada una de ellas. El control GridView (II) 6 Por ello, antes de configurar este segundo control GridView, debemos establecer una propiedad del primero. Dicha propiedad es DatakeyNames, donde indicamos el campo o lista de campos que son claves para los registros que se muestran en el GridView. Visual Studio establece esta propiedad por defecto, indicando que el campo clave es CustomerID. Por lo tanto, no necesitamos hacer nada si ya se ha establecido. Una vez hecho esto, configuraremos el origen de los datos del segundo control GridView. Por lo tanto, lo mejor es hacer clic en el botn de etiqueta inteligente que aparece al seleccionarlo, desplegar la lista Choose Data Source y elegir New Data Source. Debe seguir el asistente para crear un origen de datos asociado con una base de datos, pero cuando acceda al paso en el que se indica el conjunto de datos requerido, debe elegir la opcin Specify a custom SQL statement or stored procedure, ya que no desea acceder a todos los registros de la tabla Orders, sino nicamente a los relacionados con el cliente seleccionado en el primer control GridView.
Al continuar, deber escribir la correspondiente consulta SQL, como puede ver en la figura de la pgina siguiente, donde se consigue el conjunto de rdenes relacionadas gracias al uso del operador INNER JOIN y del parmetro @CustomerID. El control GridView (II) Copyright Computer Aided Elearning, S.A. 7
En el siguiente paso deber configurar dicho parmetro.
Haga grande este cuadro de dilogo para poder trabajar con las propiedades avanzadas del parmetro. El control GridView (II) 8 El origen del valor del parmetro vendr dado por la seleccin del control grdCustomers, es decir, de la rejilla con los datos de los clientes de la parte superior de la pgina. Por ello, debe elegir Control en la lista Parameter source y dicho control en la lista inferior. Adems, al pulsar en Show advanced properties puede establecer las propiedades necesarias del parmetro. La cuestin aqu es indicar de dnde se recoger el valor para el parmetro @CustomerID. Sabemos que podemos hacerlo a travs de la propiedad DataKeyNames del control GridView de la parte superior de la pgina. Pues deberemos establecerlo en la propiedad PropertyName del parmetro. Si se fija en la figura anterior, comprobar que el valor dado para dicha propiedad es la expresin: SelectedDataKey.Values(CustomerID). Como SelectedDataKey es una coleccin, debemos indicar exactamente qu campo, para lo que utilizamos la propiedad Values y el nombre del campo entre parntesis. Con esto conseguimos el resultado deseado, es decir, que cada vez que queda seleccionado un cliente en el control GridView superior, aparece sus rdenes en el control GridView inferior. Para ello, es necesario realizar un postback de la pgina y, seguramente, volver a realizar la consulta en la base de datos. Con todo ello, ya sabemos cmo preparar un formulario maestro/detalle, tarea habitual en el desarrollo de una aplicacin de base de datos. El control GridView tambin proporciona funcionalidad para editar, es decir, aadir, eliminar o modificar registros de un origen de datos. Sin embargo, normalmente es mejor utilizarlo para mostrar informacin de la base de datos y realizar estas operaciones de edicin utilizando acceso conectado a la base de datos, es decir, mediante comandos SQL.
El control GridView (II) Copyright Computer Aided Elearning, S.A. 9 4. EL CONTROL GRIDVIEW Y EL VIEWSTATE hora que conocemos mejor el control GridView, que es uno de los ms utilizados en escenarios web de acceso a datos, es el momento de comentar su dependencia (o no) del ViewState. Y por qu es importante conocer la relacin entre GridView y ViewState? Pues porque la informacin almacenada en el ViewState para un control de este tipo puede ser grande, lo que aumentar el tamao de la pgina web considerablemente, como puede ver en el cdigo HTML siguiente.
Aqu podemos ver el aspecto del ViewState, que no es tanto como podamos pensar ya que el resultado del acceso a la base de datos est paginado, por lo que el control GridView muestra nicamente algunos registros. Sin embargo, incluso as podemos darnos cuenta de que este aspecto del GridView puede ser un serio problema (piense en una tabla con cientos de filas). Bien, inicialmente tenemos que tener en cuenta que es conveniente habilitar el ViewState para el control GridView si realmente ste lo va a utilizar. A El control GridView (II) 10 Esto quiere decir que si el control GridView se enlaza cada vez que ocurre un postback, entonces no tiene sentido habilitar su ViewState, ya que en todas las ocasiones que se accede al servidor web se realizar la correspondiente consulta a la base de datos. En nuestro caso esto es as por varios motivos: primero porque se utiliza paginacin, lo que hace que se realice la consulta a la base de datos cada vez que el usuario solicita una pgina distinta del conjunto de resultados; y segundo porque no tenemos el control para evitarlo al utilizar un objeto SqlDataSource como origen de los datos al que est enlazado el GridView. Por lo tanto, parece obvio que ser conveniente deshabilitar el ViewState, ya que realmente no se utiliza para rellenar los datos en este escenario. Recuerde que simplemente tiene que establecer el valor False en la propiedad EnableViewState del control GridView. En versiones anteriores de este tipo de controles, no se poda deshabilitar el ViewState si se utilizaba alguna de las funcionalidades de paginacin u ordenacin. Afortunadamente esto no es as con el control GridView, ya que los detalles necesarios para realizar esas funciones no los guarda en el ViewState sino en una parte de ste que no puede deshabilitarse, el Control State. Se podra decir que hemos visto la mitad de la ecuacin porque en el escenario planteado tiene sentido deshabilitar el ViewState de controles como el GridView ya que cada vez que se realiza un postback, vuelve a accederse a la base de datos. Sin embargo, puede que sta no sea la mejor solucin y que otras alternativas, como almacenar el resultado de la consulta en cach y utilizarla cada vez, sean incluso mejor. La segunda parte de la ecuacin es precisamente estudiar la cach de ASP .NET. Conociendo este componente de ASP .NET ser capaz de decidir la mejor alternativa en cada caso.