GridView y ModalPopup en Ajax.Net

Navegando por los foros de Microsoft Ajax me encuentro bastantes preguntas sobre cómo editar una fila de un gridview en una ventana modal utilizando código del lado del cliente.
En este post daré una solución cuya ventana modal no es el control ModalPopupExtender, sino una ventana modal del propio navegador. Cuando estudie el control lo publicaré utilizándolo.

Tomaremos como ejemplo una de las páginas de un CRM open source que en mis ratos libres estoy desarrollando.
Realmente es muy simple, utilizaremos lo siguiente:

1. JavaScript para mostrar la ventana modal
   Un TemplateField del GridView
   El evento RowDataBound del GridView
   Y nada más ….

Vamos por pasos:
1. El javascript de apertura de la ventana modal será.
function AbrirVentana(Pagina)
{
window.showModalDialog(Pagina);
}

Al método window.showmodaldialog se le pueden pasar parámetros como página, argumentos, tamaño, posición, etc, en este link podéis ver sus opciones y funcionamiento. En nuestro caso a la función AbrirVentana le pasaremos un parámetro que contendrá la página y el registro con el que queremos trabajar.

2. En el gridview añadiremos una template column que contendrá un buttonlink al que le pondremos como url la llamada al javascript pasándole como parámetro la columna única de la tabla con la que vamos a trabajar.

3. En el evento antes mencionado del gridview RowDataBound añadiremos el código necesario para asociar al template column el valor adecuado.

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
‘ PREPARACION DE LA APERTURA DE LA VENTANA MODAL
If e.Row.RowType <> DataControlRowType.DataRow Then Exit Sub
Dim row As GridViewRow = e.Row
Dim button As LinkButton = e.Row.FindControl(“BtnModal”)
If Not button Is Nothing Then
button.OnClientClick = “javascript:(AbrirVentana(‘EditCandidatos.aspx?Codigow=” & e.Row.Cells(1).Text & “‘));”
End If
End Sub

Y esto es todo, algo importante a tener en cuenta en la ventana modal, es que, para que, si por ejemplo incluimos un formview para manejar el registro a tratar y no se nos abra una nueva ventana cuando por ejemplo pulsemos el botón editar del mismo es añadir al “head” el elemento <base target="_self"/>

Bueno, espero que les sirva de algo, saludos y si les apetecen pueden hacer comentarios.