Crear popup para seleccionar lista de contactos con .NET (Estilo hotmail)
[Visual Basic .NET]

Fecha: 02/Abr/2005 (28/03/2005)
Autor: Julio Anthony Aguilar Castillo ([email protected])

 

Aunque el titulo indica que es para una lista de contactos, esto puede ser aplicado a cualquier otro requerimiento. La idea general con esto lamentablemente tiene mucho de javascript y no .net puro realmente no se si posteriores versiones (del studio .net) incluyan también programación de lado del cliente, nos facilitarían la vida grandemente.

La idea general es que teniendo un webForm(al que llamaremos formulario padre) con campos que necesitan ser llenados con información de nuestra BD solicitamos a otra webform (formulario de contactos) que nos la proporcione. Lo interesante en esto es hacer que el webform invocado asuma el rol de un childform como en las aplicaciones windows de modo que mientras no se cierre este no se permita acceder al formulario que lo invoco.
Una vez que se cierre el formulario de contactos según el botón presionado se puede recuperar la información que hayamos seleccionado.

Web form "padre" (padre.aspx).

Creamos el form Padre el archivo .aspx y su codebehind .aspx.vb
En el archivo aspx Agregamos 2 textbox y un boton (los dos text box se supone que son para recibir los correos que seleccionemos y el boton llama al formulario para seleccionar los contactos
<body>
<form id="Form1" method="post" runat="server">
<asp:label id="Label1" runat="server">Para:</asp:label>
<asp:textbox id="TextBox2" runat="server" Width="464px">TextBox2</asp:textbox><BR>
<asp:label id="Label2" runat="server">C.C.:</asp:label>
<asp:textbox id="TextBox1" runat="server" Width="464px">TextBox1</asp:textbox>
<asp:button id="Button1" runat="server" Text="Button"></asp:button>
</form>
</body>
Insertamos el codigo en javascript (codigo que se ejecuta del lado del cliente)

function AbrirDetalleContactos()
{
// Enviaremos la informacion actual a la pagina contactos.aspx
var str1 = document.getElementById('TextBox1').value;
var str2 = document.getElementById('TextBox2').value;

// creamos un arreglo con la informacion a enviar... esto puede crecer aun mas si
//queremos enviar mas cosas
var Argumentos = new Array(str1, str2);
//damos la configuracion a la pagina que se ha de abrir
//usamos esto para asegurarnos que la pagina destino se refresque
var ran =Math.random()*4;
var ConfiguracionPagina = 'center:yes;resizable:no;help:no;status:no;dialogWidth:550px;dialogHeight:400px';
var Pagina = 'contactos.aspx?rn='+ ran;
// aqui hacemos que la pagina que se abra no sea totalmente independiente
// sino que funcione al tipico estilo de los "child forms"
// se espera a que esta pagina retorne un determinado valor(como un arreglo)
// Nota: Las dos paginas padre.aspx y contactos.aspx estan en el mismo directorio
Argumentos = window.showModalDialog(Pagina, Argumentos, ConfiguracionPagina);

// Una vez que el formulario fue cerrado puede que no devuelva info asi que la verificamos
if(Argumentos == null)
{ // mandamos un mensaje
 window.alert('No se devolvio ninguna valor!');
}
else
{ //quiere decir que se ha devuelto una lista de contactos
// asi que recuperamos la informacion enviada
 document.getElementById('TextBox1').value = Argumentos[0];
document.getElementById('TextBox2').value = Argumentos[1];
}
}
</script>

Luego en el código VB vamos a agregar al boton la función de AbrirDetalleContactos que declaramos con javascript: 

Private Sub Page_Load(......)
    ' 'Si la pagina es accesada por primera vez
	If Page.IsPostBack  = false then
        Button1.Attributes("onclick") = "javascript:AbrirDetalleContactos()"
	End If
End Sub

Web form "contactos" (contactos.aspx).

Listo nos vamos ahora al formulario de contactos.
Primero el archvio aspx. Al body le vincularemos el javascript obtenerInformacion para que cuando se cargue recupere la información que el form padre le proporcione.

<body onload="javascript:obtenerInformacion();" MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">

El javascript sería (esta javascript va antes de cerrar el encabezado):

//funcion para recopilar la informacion que envia el web form "padre"
function obtenerInformacion()
{
// inicializamos las variables a recoger
var str1 = '';
var str2 = '';
var ArgumentosRecibidos= new Array(str1, str2);
// obtenemos los valores de los argumentos enviados
ArgumentosRecibidos = window.dialogArguments;
document.getElementById('TextBox1').value = ArgumentosRecibidos[0];
document.getElementById('TextBox2').value = ArgumentosRecibidos[1];

}


A cada campo de texto le agregamos los scripts asignarcampo para saber a que campo se agregara los correos (esta informacion va en el formulario)

<asp:textbox id="TextBox1" runat="server" TextMode="MultiLine" Height="56px" onfocus="javascript:asignarCampo(this);"> </asp:textbox>
<asp:textbox id="TextBox2" runat="server" TextMode="MultiLine" Height="56px" onfocus="javascript:asignarCampo(this);" /></asp:textbox>
ment.style.backgroundColor='white'; }


El javascript seria ( en el encabezado)
// funcion para agregar el correo de un contacto a los textbox segun sea el caso
function asignarCampo(objeto)
{
nombreElemento= objeto
}


El boton para cancelar solo cierra el web form sin devolver información alguna (esto va en el formulario)
<INPUT style="Z-INDEX: 103; LEFT: 96px; POSITION: absolute; TOP: 200px" onclick="javascript:window.close();" type="button" value="Cancelar">
El boton para enviar la info
<INPUT style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 200px" onclick="javascript:enviarInformacion();" type="button" value="Aceptar">


El javascript sería:
//funcion para enviar informacion al web form "padre"
function enviarInformacion()
{
var str1 = document.getElementById('TextBox1').value;
var str2 = document.getElementById('TextBox2').value;

var ArgumentosAEnviar = new Array(str1, str2);
// pasamos los argumentos de vuelta
window.returnValue = ArgumentosAEnviar;
window.close();
}


Aquí el datalist que recuperara la información de contactos tanto el nombre como el correo electronico
<DIV id="divGrid">
<asp:datalist id="DataList1" runat="server">
<ItemTemplate>

<a id="enlace1" onmouseout="javascript:despintar(this)" onmouseover="javascript:pintar(this)"
onclick='<%#"javascript:agregar("""& DataBinder.Eval(Container.DataItem,"CorreoElectronico") &""")"%>'
style="COLOR: blue; TEXT-DECORATION: underline" >
<%# DataBinder.Eval(Container.DataItem,"NombreContacto")%>
</a> <asp:Label ID="Label1" Runat=server text='<%# DataBinder.Eval(Container.DataItem,"CorreoElectronico")%>'>
</asp:Label>

</ItemTemplate>
</asp:datalist></DIV>

El javascript vinculado a este datalist sería:

//funcion para resaltar el item del datalist
function pintar(objeto)
{
objeto.parentElement.parentElement.style.backgroundColor='#aaffff';
}
//funcion para volver el item resaltado a su estado original
function despintar(objeto)
{
objeto.parentElement.parentElement.style.backgroundColor='white';
}
// funcion para agregar el correo de un contacto a los textbox segun sea // el caso
function agregar(correo)
{ if (nombreElemento.value.length<1)
{
nombreElemento.value=nombreElemento.value + correo
}
else
{ //validamos que el campo a insertar no exista todavia
var textos = nombreElemento.value.split(";")
temp=0
estado=false
while ((temp< textos.length)&&(estado==false))
{ if (textos[temp]==correo)
{
estado=true;
}
temp+=1;
}
if (estado==false)
{
nombreElemento.value= nombreElemento.value + ';'+correo
}
}
}

Finalmente en el archivo contactos.aspx.vb

Private Sub Page_Load(......)
    ' 'Si la pagina es accesada por primera vez
	If Page.IsPostBack  = false then
        p_llenarDataList()
	End If
End Sub

Private Sub p_llenarDataList()
' 'Creamos una instancia de conexion y el objeto comando
	Dim cnxDBINTRANET as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
   Dim query as String= "select Nombrecontacto, correoelectronico from tacontacto"
   Dim cmdObtenerContactos as New SqlDataAdapter(query, cnxDBINTRANET)
   'Marcamos el comando como query
   cmdObtenerContactos.SelectCommand.CommandType = CommandType.Text
   'Creamos y llenamos el dataset
   Dim dsContactos as New DataSet
   cmdObtenerContactos.Fill(dsContactos)
            'lo enlazamos con el list
   DataList1.DataSource = dsContactos
   DataList1.DataBind()

End Sub

Aclaraciones .

Aquí aclaramos algunas pequeñas cosas.

Tenemos una tabla con SQL Server 2000 llamada taContactos con al menos 2 campos : nombrecontacto y correoelectronico. La conexión a la BD es almacenada en el web.config asi:

<appSettings>
<add key="ConnectionString" value="server=localhost;database=dbPrueba;uid=sa;pwd=sa;" />
</appSettings>


Dim cnxDBINTRANET as New SqlConnection(ConfigurationSettings.AppSettings("connectionString")) Dim

Reeemplazariamos el valor de ConfigurationSettings.AppSettings("connectionString") por "server=localhost;data......" y eso es todo.

Una vista previa del ejemplo corriendo :


Espero que les sirva, nos vemos.GBY

Espacios de nombres usados en el código de este artículo:

imports System.Data.SqlClient (esto en contactos.aspx.vb)

Fichero con el código de ejemplo: khaleb2002_popupParaSeleccionar.zip - 8 KB

ir al índice