Blog de Jorge Pedraza

julio 16, 2009

ASP.NET – Popup

Filed under: Aplicaciones Web — JorgePedraza @ 10:32 pm
Tags:

Desde que las paginas web se han convertido en un estandar de la internet, como el medio principal para interectuar con los usuarios de computadora alrededor del mundo. El documento html a evolucionado fuertemente dando entrada a temas como los lenguaje de interpretado  y plataforma de desarrollo web dinamico.

Mucha paginas web adoptan caracteristicas similar a la interfaz de un aplicación windows incluso a nivel de interación de ventanas. entonce el presente articulo tiene como finalidad dar foco al aspecto de llamada de ventanas web emergentes en diferentes modalidades .

En ASP.NET tiene excelente capacidades en relación con javascript estandares para logra atractivo comportamiento de las ventanas web emergente con las paginas aspx.

Acontinuación se meciona algunos JavaScript de interes para este proposito:

  • open : Abre una ventana nueva y carga el documento web especificado por una URL determinada.
  • opener : Establece o recupera una referencia a la ventana que creó la ventana actual.
  • showModalDialog : Crea un ventana dialogo modal que muestra el documento web especificado.
  • ShowBrowserUI : Abre el cuadro de diálogo Explorador especificada.
  • showModelessDialog : Crea un cuadro de diálogo no modales que muestra el documento HTML especificado.
  • showHelp : Muestra un archivo de ayuda. Este método puede utilizarse con ayuda de HTML de Microsoft.
  • show : Muestra una ventana emergente en la pantalla.

Para mayor información acerca del uso de estos metodos consulte los Metodos DHTML

Ahora se menciona  pasos breve para logra que cualquier paginas ASP.NET se comporte como pagina cargada en ventana del explorador tipo emergente.

  1. Se inicia visual studio 2005 o superior, luego seleciona un proyecto de aplicación web en lenguaje deseado. para fines de este articulo se usa el lenguaje Visual Basic.
  2. Ahora se habla de tres modalidad de ventana Emergente web para este articulo (open, showModalDialog, showModelessDialog) de ahi su concepto son Auto descriptible.
  3. Se agrega de inmediato un elemento nuevo del tipo JavaScript (script.js), el cual contendra los javascript clave que se estaran usando de forma centralizada, cuyo metodos y parametros son los siguientes:
    • UpdateTexto(idname,valor)  :  Metodo para fijar valor en un objeto de entrada (caja de texto).
    • OpenCatalago(idname, postBack, Ancho, Alto, PaginaWeb) :  Metodo para abrir ventana del navegador emergente cargando determinada pagina aspx desde otra pagina aspx la cual es la principal.
    • SetDatos(formName, idname, newData, postBack) :  Metodo para fijar valor en un objeto perteneciente a una pagina aspx principal donde se invoco la otra pagina aspx en formato navegador emergente.
    • VentanaDialogoModal(url,Arg,Ancho, Alto, idname) :  Metodo para Invocar pagina aspx en una ventana de dialogo modal emergente del navegador .
    • VentanaDialogoNoModal(url,Arg,Ancho, Alto, idname) :  Metodo para Invocar pagina aspx en una ventana dialogo no modal emergente del navegador.
    • idname : nombre identificador del objeto html contenido en la pagina.
    • valor :  valor especifico para un objeto html
    • postBack : valor booleano para establecer postBack de la pagina
    • Ancho :  Ancho de la ventana del navegador donde carga determinada Pagina aspx.
    • Alto :  Alto de la ventana del navegador donde carga determinada Pagina aspx.
    • PaginaWeb : Nombre de la pagina aspx
    • newData : Nuevo dato para fijar en objeto de destino.
    • Arg : Argumento que puede representar un valor o estructura de objeto.
  4. Entonce se agraga 3 paginas ASPX :
    • WebVentana.aspx   ->open,
    • WebVentana2.aspx ->showModalDialog,
    • WebVentana3.aspx ->showModelessDialog
  5. Se incluye una referencia del javascript (script.js) en cada pagina del proyecto: 
    • <head runat=”server”>
          <title>Popup en ASP.NET</title>
          <script  type=“text/javascript” src=“script.js” ></script>
      </head>
  6. En la pagina default.aspx vamos agregar una caja de texto y tres botones del tipo HTML, el cual sera convertido en objeto del lado del servidor.
  7. En  las paginas Web: WebVentana.aspx , WebVentana2.aspx  se agrega una caja de texto  y un boton del tipo HTML y en WebVentana3.aspx se agrega un Caja de texto y tres botones del tipo HTML. Todos ellos  sera tambien convertido en objetos del lado del servidor. 
  8. Una vez construido el esqueleto del proyecto, en la pagina default.aspx vamos programar en el evento load los respecitvos enlaces javascript con los objectos HTML de lado del servidor.
    • Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
         If Not Me.IsPostBack Then
            Button1.Attributes.Add(“Onclick”, “javascript:OpenCatalago(Text1, false ,515, 400,WebVentana.aspx)”)
            Button2.Attributes.Add(“Onclick”, “javascript:VentanaDialogoModal(WebVentana2.aspx,Text1.value,400,400,Text1);”)
            Button3.Attributes.Add(“Onclick”, “javascript:VentanaDialogoNoModal(WebVentana3.aspx,window,400,400,Text1);”)
         End If
      End Sub   

Una vez más se encuentra una forma versátil de generar sitio web ASP.NET con capacidades especiales de ventana emergente del explorador, para centrar todo los proceso de operación en un pagina principal sin necesidad de desplazarla.

Para mayor detalle, anexo codigo fuente en visual studio 2005 Codigo fuente ASP.NET Popup

4 comentarios »

  1. Muy buen post!. Gracias por el Js.

    Comentario por Paul — febrero 16, 2010 @ 7:46 pm | Responder

  2. Mil gracias

    Comentario por juan — enero 20, 2012 @ 3:54 pm | Responder


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Blog de WordPress.com.

A %d blogueros les gusta esto: