En ocasiones mientras realizamos nuestras aplicaciones web
tenemos la necesidad de que el usuario seleccione o introduzca un cierto
detalle o valor mediante un Pop Up en este artículo crearemos un ejemplo de cómo podríamos implementarlo. Aunque
existe más técnicas para pasar valores entre páginas para este ejemplo usaremos
las variables de sesión para pasar la información del Pop Up a nuestra página
padre.
Lo primero será crear el diseño para nuestra página padre.
Como veis es un formulario bastante sencillo en el que se
mostrara la información sobre el país que seleccionemos en el Pop Up. Ahora diseñaremos el formulario que se mostrara en el Pop Up.
Simplemente será una seria de imágenes con las banderas de
los países que podemos seleccionar.
Vale comenzamos ahora con la lógica, lo primero que voy
hacer es ir al botón “seleccionar” del formulario padre y agregarle la función
en JavaScript para abrir el Pop Up.
<asp:Button
ID="btoSelec"
runat="server"
Text="Selecionar" OnClientClick="window.open('./SelecBandera.aspx','MiPagina',
'top=300,width=650 ,height=210, left=350');" />
Como veis he usado el
evento “OnClientClick” para llamar a JavaScript desde el cliente. Vale con esto
ya se nos abrirá nuestro Pop Up con nuestro formulario que contiene las
banderas.
Vamos al formulario
que se carga dentro de nuestro Pop Up. Ahora lo que he realizado es agregar un
evento “Onclick” a cada bandera. Y dentro de cada evento se realizara una
llamada a un procedimiento que he llamado “AlmecenaSeleccion” que he creado. En
este procedimiento se almacena el valor que se le pasa en una variable de sesión que he llamado “NombrePais” y como su nombre indica almacenara
el nombre del país. Dentro de este
procedimiento después de almacenar la variable de sesión realizo el refresco
del formulario padre mediante la utilización de procedimiento “RegisterClientScriptBlock”
que registra el código en JavaScript que
realiza el refresco y cierra el Pop Up.
using
System;
using
System.Collections.Generic;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public
partial class SelecBandera : System.Web.UI.Page
{
protected void ImgCanada_Click(object
sender, ImageClickEventArgs e)
{
AlmecenaSeleccion("Canada");
}
protected void ImgFranc_Click(object
sender, ImageClickEventArgs e)
{
AlmecenaSeleccion("Francia");
}
protected void ImgSpain_Click(object
sender, ImageClickEventArgs e)
{
AlmecenaSeleccion("España");
}
protected void
ImgItaly_Click(object sender, ImageClickEventArgs e)
{
AlmecenaSeleccion("Italia");
}
private void AlmecenaSeleccion(string
Pais)
{
// Crea la variable de sessión
Session["NombrePais"] =
Pais;
// Refrescamos el formuario padre
ClientScript.RegisterClientScriptBlock(GetType(), "Refresca", "window.opener.location.reload();
window.close();", true);
}
}
Vale ya hemos terminado con el formulario que se muestra en
el Pop Up ahora volvamos el formulario padre. Lo primero que he realizado es
definir un DataSet donde tendré la información de los países que se va mostrar
en el formulario. Posteriormente viene la definición de evento “Page_Load” como
sabréis este evento se lanza cuando se carga la página. Bueno como veis lo único
que se realiza después es colocar el valor que tiene la variable de sesión en
nuestro formulario y buscamos en registro en nuestro DataSet para mostrar los
datos.
using
System;
using
System.Data;
using
System.Collections.Generic;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public
partial class _Default : System.Web.UI.Page
{
public DataSet PaisesDs = new
DataSet();
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
if
(Session["NombrePais"] != null)
{
this.txtBuscqueda.Text
= Session["NombrePais"].ToString();
// Busca y muestra los datos
MuestrasDatos();
}
}
}
// Muestra Datos del Pais
private void
MuestrasDatos()
{
if (txtBuscqueda.Text != "")
{
// Cargamos nuestro Ds
CreaDataset();
// Buscamos si existe en país en DataSet
BuscarFila();
}
}
private void BuscarFila()
{
for (int i = 0; i < PaisesDs.Tables[0].Rows.Count; ++i)
{
if
(PaisesDs.Tables[0].Rows[i]["Nombre"].ToString().ToUpper()
== txtBuscqueda.Text.ToUpper())
{
RellenaFomulario(i);
break;
}
}
}
private void
CreaDataset()
{
// Creamos la tabla paises
PaisesDs.Tables.Add("Paises");
// Agregamos las columnas
PaisesDs.Tables[0].Columns.Add("Id");
PaisesDs.Tables[0].Columns.Add("Nombre");
PaisesDs.Tables[0].Columns.Add("Capital");
PaisesDs.Tables[0].Columns.Add("Moneda");
PaisesDs.Tables[0].Columns.Add("Idioma");
PaisesDs.Tables[0].Columns.Add("Población");
// Cargamos la información sobre los países
// España
PaisesDs.Tables[0].Rows.Add("1",
"España", "Madrid",
"Euro", "Español",
"47265321");
// Francia
PaisesDs.Tables[0].Rows.Add("2",
"Francia", "París", "Euro",
"Francés", "66007374");
// Italia
PaisesDs.Tables[0].Rows.Add("3",
"Italia", "Roma",
"Euro", "Italiano",
"60813326");
// Canada
PaisesDs.Tables[0].Rows.Add("4",
"Canada", "Ottawa
", "Dólar canadiense",
"Inglés", "60813326");
}
private void
RellenaFomulario(int index)
{
txtCapital.Text = PaisesDs.Tables[0].Rows[index]["Capital"].ToString();
txtIdioma.Text
= PaisesDs.Tables[0].Rows[index]["Idioma"].ToString();
txtMoneda.Text
= PaisesDs.Tables[0].Rows[index]["Moneda"].ToString();
txtPoblacion.Text = PaisesDs.Tables[0].Rows[index]["Población"].ToString();
}
}
Vídeo de la aplicación
No hay comentarios:
Publicar un comentario