ModalPopupExtender. Creando cajas de diálogo en ASP.NET mediante AJAX

Durante el desarrollo de una aplicación Web, es posible que nos encontremos ante el diseño de un WebForm en el que debido a las características de la información a recabar, resulte conveniente que ciertos datos sean introducidos desde un formulario independiente del principal, empleando una funcionalidad similar a la que ofrecen los cuadros de diálogo de Windows Forms, cuando abrimos un formulario mediante el método ShowDialog de la clase Form.


 


ModalPopupExtender. Descripción general


Afortunadamente, mediante el uso de AJAX, implementar este funcionamiento no solamente es posible, sino que resulta muy sencillo gracias al uso de ModalPopupExtender, uno de los componentes incluidos en el paquete de controles Ajax Control Toolkit.



ModalPopupExtender es un extensor, lo que significa que permite ampliar o extender la funcionalidad de un control ASP.NET ya existente. Para el caso que nos ocupa, podemos aplicar dicho extensor a un control Panel -también podríamos haber utilizado un control Table-, consiguiendo que el comportamiento de este último se asemeje al de un cuadro o caja de diálogo, de forma que cuando el ModalPopupExtender es activado y el control Panel asociado que representa el diálogo es visualizado, el resto de controles de la página quedan deshabilitados hasta que no pulsemos el botón de confirmación o cancelación que a tal efecto deberemos haber incluido en el control Panel.


En el presente artículo vamos a desarrollar un ejemplo que nos permita describir los elementos más importantes del ModalPopupExtender, así como su aplicación práctica en la construcción de un diálogo de selección de datos.


 


El escenario de trabajo


Supongamos que debemos desarrollar un formulario Web para realizar una toma de datos, con un aspecto como el mostrado en la siguiente figura.



Entre el conjunto de controles TextBox de este formulario, existe uno: txtSituacion, que el usuario debería rellenar con el nombre de una ciudad, mes y año, en un formato como el del siguiente ejemplo:


Zaragoza, marzo de 2008


A pesar de que el usuario tiene plena libertad para escribir este valor dentro del mencionado TextBox, no estaría de más que recibiera una pequeña ayuda. De esta tarea se van a ocupar varios controles DropDownList, que situados dentro de un control Panel, van a funcionar como un cuadro de diálogo gracias a un ModalPopupExtender, y nos van a permitir seleccionar cada una de las partes del dato a introducir en txtSituacion, dejando a la aplicación el trabajo de unir todos los fragmentos para componer la cadena final resultante, que asignaremos al TextBox.


 


Los controles principales de la página


En primer lugar crearemos un nuevo proyecto ASP.NET, y nos situaremos en el diseñador de la página Web, donde comenzaremos por agregar los controles que conformarán el formulario de entrada de datos que ya vimos en la anterior figura. Es muy importante no olvidar la inclusión de un componente ScriptManager a la página, dado que vamos a implementar características AJAX en la misma. El siguiente bloque de código muestra todas las instrucciones necesarias.


<form id=»form1″ runat=»server»>
<asp:ScriptManager ID=»ScriptManager1″ runat=»server» />
<div>
<table border=»2″>
<tr>
<td colspan=»2″ align=»center»>
<asp:Label ID=»Label1″ runat=»server» Text=»Datos de solicitud» Font-Bold=»True»
Font-Underline=»True» />
</td>
</tr>
<tr>
<td>
<asp:Label ID=»Label2″ runat=»server» Text=»Nombre:» />
</td>
<td>
<asp:TextBox ID=»txtNombre» runat=»server» />
</td>
</tr>
<tr>
<td>
<asp:Label ID=»Label3″ runat=»server» Text=»e-mail:» />
</td>
<td>
<asp:TextBox ID=»txtEmail» runat=»server» />
</td>
</tr>
<tr>
<td>
<asp:Label ID=»Label7″ runat=»server» Text=»Situación:» />
</td>
<td>
<asp:TextBox ID=»txtSituacion» runat=»server» Width=»300″ />
</td>
</tr>
<tr>
<td>
<asp:Button ID=»btnAsistente» runat=»server» Text=»Asistente de selección» Width=»150″ />
</td>
<td>
<asp:Button ID=»btnGrabar» runat=»server» Text=»Grabar datos» Width=»125″ />
</td>
</tr>
</table>
</div>
</form>

 


Los controles del cuadro de diálogo


Continuando en este mismo diseñador del formulario Web, como siguiente paso añadiremos un Panel en cuyo interior situaremos los controles que constituirán nuestro cuadro de diálogo. Adicionalmente incluiremos en la cabecera de la página un estilo para que el aspecto del control Panel y su contenido resulte más atractivo al usuario.


<style type=»text/css»>
.CajaDialogo
{
background-color: #99ffcc;
border-width: 4px;
border-style: outset;
border-color: Yellow;
padding: 0px;
width: 200px;
font-weight: bold;
font-style: italic;
}
.CajaDialogo div
{
margin: 5px;
text-align: center;
}
</style>

//….
//….
<asp:Panel ID=»pnlSeleccionarDatos» runat=»server» CssClass=»CajaDialogo»>
<div style=»padding: 10px; background-color: #0033CC; color: #FFFFFF;»>
<asp:Label ID=»Label4″ runat=»server» Text=»Seleccionar datos» />
</div>
<div>
<table>
<tr>
<td>
<asp:Label ID=»Label5″ runat=»server» Text=»Ciudad:» />
</td>
<td>
<asp:DropDownList ID=»ddlCiudades» runat=»server»>
<asp:ListItem>Zamora</asp:ListItem>
<asp:ListItem>Teruel</asp:ListItem>
<asp:ListItem>Salamanca</asp:ListItem>
<asp:ListItem>Sevilla</asp:ListItem>
<asp:ListItem>Lugo</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID=»Label6″ runat=»server» Text=»Mes:» />
</td>
<td>
<asp:DropDownList ID=»ddlMeses» runat=»server» />
</td>
</tr>
<tr>
<td>
<asp:Label ID=»Label8″ runat=»server» Text=»Año:» />
</td>
<td>
<asp:DropDownList ID=»ddlAnualidades» runat=»server» />
</td>
</tr>
</table>
</div>
<div>
<asp:Button ID=»btnAceptar» runat=»server» Text=»Aceptar» />
&nbsp;&nbsp;
<asp:Button ID=»btnCancelar» runat=»server» Text=»Cancelar» />
</div>
</asp:Panel>

La siguiente figura muestra el aspecto del panel recién creado.



Fijándonos en el código aspx que acabamos de escribir, nos habremos percatado de que el único control DropDownList al que hemos añadido valores en su lista es ddlCiudades; esto es debido a que los otros dos controles de lista serán llenados en el code-behind de la página, en el evento Load para ser más exactos.


La técnica seguida para añadir los valores a las listas de mes y año consistirá en inicializar una variable DateTime y dos ArrayList; mediante un bucle incrementaremos el valor del mes y año de la fecha, asignándola a los ArrayList; por último, asignaremos estos ArrayList como origen de datos de los controles DropDownList. El código correspondiente a este proceso lo vemos a continuación.


public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// rellenar dos listas con los valores
// de meses y años que usaremos
// en los controles de lista desplegable
ArrayList alMeses = new ArrayList();
ArrayList alAnualidades = new ArrayList();
DateTime dtFecha = new DateTime(2000, 1, 1);

for (int nContador = 1; nContador <= 12; nContador++)
{
alMeses.Add(dtFecha.ToString(«MMMM»));
alAnualidades.Add(dtFecha.Year);
dtFecha = dtFecha.AddMonths(1);
dtFecha = dtFecha.AddYears(1);
}

// asignar las listas a los controles
this.ddlMeses.DataSource = alMeses;
this.ddlMeses.DataBind();

this.ddlAnualidades.DataSource = alAnualidades;
this.ddlAnualidades.DataBind();
}
}


La causa de emplear dos técnicas distintas de llenar las listas desplegables -desde código aspx y code-behind- reside simplemente en mostrar al lector las distintas posibilidades existentes de abordar esta operación sobre este tipo de control.


 


Dotando al Panel del comportamiento de un diálogo. ModalPopupExtender entra en acción


Para proporcionar a nuestro control Panel el comportamiento de un cuadro de diálogo nos queda pendiente el detalle más importante: añadir a la página Web el ya comentado control AJAX ModalPopupExtender, que una vez conectado con el Panel, hará que este funcione como una ventana modal, impidiendo al usuario que interactúe con otros elementos que no sean los contenidos dentro del control Panel.


La siguiente lista muestra las principales propiedades del ModalPopupExtender que tendremos que manipular, para configurar adecuadamente nuestra caja de diálogo.


TargetControlID. Identificador del control de la página Web que provocará la activación del ModalPopupExtender.


PopupControlID. Identificador del control que el ModalPopupExtender muestra como cuadro de diálogo modal. Podemos utilizar cualquier control que actúe como contenedor: Panel, Table, etc.


OkControlID. Identificador de un control situado dentro del cuadro de diálogo, que actuará como botón de confirmación. Esta labor corresponderá habitualmente a un control de tipo Button, pero podemos emplear otros tipos.


CancelControlID. Identificador de un control situado dentro del cuadro de diálogo, que actuará como botón de cancelación. Esta labor corresponderá habitualmente a un control de tipo Button, pero podemos emplear otros tipos.


OnOkScript. Código JavaScript que se ejecutará cuando el control asignado a la propiedad OkControlID desencadene su evento Click.


OnCancelScript. Código JavaScript que se ejecutará cuando el control asignado a la propiedad CancelControlID desencadene su evento Click.


DropShadow. Valor de tipo bool que permite mostrar una sombra alrededor del borde del cuadro de diálogo, para dotar a este de un efecto de resaltado.


BackgroundCssClass. Nombre correspondiente a un estilo CSS, que será aplicado al resto de controles de la página Web no pertenecientes al cuadro de diálogo, y que permanecen deshabilitados mientras este último está en funcionamiento.


Según las propiedades que acabamos de mencionar en esta tabla, la configuración del ModalPopupExtender quedaría como muestra el siguiente fuente.


<cc1:ModalPopupExtender ID=»mpeSeleccion» runat=»server»
TargetControlID=»btnAsistente»
PopupControlID=»pnlSeleccionarDatos»
OkControlID=»btnAceptar»
CancelControlID=»btnCancelar»
OnOkScript=»mpeSeleccionOnOk()»
OnCancelScript=»mpeSeleccionOnCancel()»
DropShadow=»True»
BackgroundCssClass=»FondoAplicacion» />

Observemos que los controles para aceptar y cancelar el diálogo corresponden a los botones btnAceptar y btnCancelar incluidos en el Panel pnlSeleccionarDatos. La funcionalidad aportada por estos botones corresponde a las funciones JavaScript indicadas en las propiedades OnOkScript y OnCancelScript, que añadiremos en la cabecera de nuestra página aspx, y que vemos a continuación.


<script language=«javascript» type=«text/javascript»>
function mpeSeleccionOnOk()
{
var ddlCiudades = document.getElementById(«ddlCiudades»);
var ddlMeses = document.getElementById(«ddlMeses»);
var ddlAnualidades = document.getElementById(«ddlAnualidades»);
var txtSituacion = document.getElementById(«txtSituacion»);

txtSituacion.value = ddlCiudades.options[ddlCiudades.selectedIndex].value + «, « +
ddlMeses.options[ddlMeses.selectedIndex].value + » de « +
ddlAnualidades.options[ddlAnualidades.selectedIndex].value;
}
function mpeSeleccionOnCancel()
{
var txtSituacion = document.getElementById(«txtSituacion»);
txtSituacion.value = «»;
txtSituacion.style.backgroundColor = «#FFFF99»;
}
</script>


Como ya habíamos comentado, al confirmar la caja de diálogo tomaremos los valores seleccionados en las listas desplegables, y los juntaremos para componer el valor a asignar al TextBox txtSituacion. Por otro lado, si cancelamos el diálogo, vaciaremos el cuadro de texto y le cambiaremos el color de fondo.


Respecto a la apariencia que presentarán los demás controles cuando abramos el cuadro de diálogo, tomarán las características del siguiente estilo que también añadiremos en la cabecera de la página, y utilizaremos desde la propiedad BackgroundCssClass del extensor.


<style type=»text/css»>
/* …. */
.FondoAplicacion
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>

No obstante, todavía queda un pequeño pero importante detalle que ajustar, ya que cuando ejecutamos la aplicación, justo al ser presentado el contenido de la página, el Panel del cuadro de diálogo se muestra por un instante para desaparecer a continuación, lo cual produce un desagradable efecto, que podemos corregir si aplicamos a este elemento el valor de estilo «display: none» para ocultarlo, como vemos seguidamente.


<asp:Panel ID=»pnlSeleccionarDatos» runat=»server» CssClass=»CajaDialogo» Style=»display: none;»>

Ahora ya podemos ejecutar la aplicación, en la que al hacer clic sobre el botón btnAsistente, el extensor ModalPopupExtender abrirá el Panel pnlSeleccionarDatos ofreciendo el aspecto de la siguiente figura.



Dado que al cancelar el cuadro de diálogo cambiamos el color de la caja de texto, como detalle complementario vamos a añadir una funcionalidad consistente en devolver a dicha caja su color original cuando vuelva a tomar el foco. Se trata de una operación que bien podíamos haber programado en el código aspx de la página, pero hemos optado por hacerlo en el code-behind a efectos de demostrar las capacidades de generación de código JavaScript de la clase Page.


public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// generar código JavaScript para asociar
// con el evento onfocus del textbox txtSituacion
System.Text.StringBuilder sbJS = new System.Text.StringBuilder();
sbJS.Append(«function txtSituacionOnFocus()»);
sbJS.Append(«{ n»);
sbJS.Append(» var txtSituacion = document.getElementById(‘txtSituacion’); n»);
sbJS.Append(» txtSituacion.style.backgroundColor = ‘#FFFFFF’; n»);
sbJS.Append(«}»);

// registrar en la página el código JavaScript
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
«CodigoJS», sbJS.ToString(), true);

// asociar el evento cliente con la función JavaScript para este control
this.txtSituacion.Attributes.Add(«onfocus», «txtSituacionOnFocus()»);
//….
}
}


Y con este detalle habríamos completado el ejemplo, cuyo código fuente se encuentra disponible en los siguientes enlaces para C# y VB.


Espero que os resulte de utilidad.


Un saludo.


 

91 Comentarios

  1. lmblanco

    Hola Enrique

    Muchas gracias por leerlo, y me alegro que te haya gustado 8-DDDD

    Un saludo.
    Luismi

  2. ifernandez

    Gran articulo Luismi, sin duda otra referencia para los favs

    Un abrazo

  3. lmblanco

    Hola Isaac

    Muchas gracias por tu interés, campeón, espero que en algún momento te pueda resultar de ayuda 😎

    Saludotes.
    Luismi

  4. anonymous

    Hola,

    La verdad es muy bueno… y es muy util, Felicidades!!!… pero te comento que lo hice y en el panel, adicione unas grillas, pero ya no funciona, no muestra nada… antes lo hacia llamando a otra ventana y funcionaba, pero ahora simplemente no aparece la ventana modal…

    saludos,
    Marcelo

  5. lmblanco

    Hola Marcelo

    Gracias por leer el post y por tu opinión. Respecto al problema que comentas, hay que tener en cuenta que el control GridView contiene una «maquinaria» interna compleja, por lo que deberías revisar todos los controles que has añadido tanto a la ventana modal como a la página Web normal, por si estuvieran entrando en conflicto. Además de esto, también hay que tener en cuenta, que cuando utilizas el GridView, al moverte por sus páginas de datos, en cada cambio de página se va a producir un envío del formulario al servidor, y ello hará que se cierre la ventana modal en la que tienes el GridView. Una posible solución, sin hacer un análisis muy detallado del problema, podría consistir en abrir de nuevo la ventana modal al cargar el formulario, usando el método Show del ModalPopupExtender; comprobando, claro está, que la ventana modal necesita ser abierta para proseguir con el uso del GridView. Te adjunto un ejemplo en el que he añadido un GridView a un ModalPopupExtender y sí se visualiza al abrir la ventana modal. También hay que tener en cuenta que este ejemplo es muy básico, y tu problema puede requerir un examen más detallado para localizar la causa.

    //====================================================================
    < %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridView1._Default" %>

    < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    pruebas con gridview



















    //——————————————————————–
    public partial class _Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (this.IsPostBack)
    {
    this.mpeDialogo.Show();
    }
    }
    }
    //====================================================================

    Espero que consigas localizar el problema.

    Un saludo.
    Luismi

  • anonymous

    Excelente el articulo. Pero tengo un problema que no he encontrado como solucionarlo, lo que pasa es que yo deseo que desde el ModalPopupExtender cuando presione el boton OK, me realice la funcion de guardado en una base de datos SQL con los datos del formulario que se encuentra en el ModalPopupExtender.

    Me podrias colaborar.

    Gracias de antemano

  • lmblanco

    Hola Juan Pablo

    Gracias por leer el artículo y por tu opinión 😎

    Respecto al problema que mencionas, si necesitas acceder a una base de datos desde ajax para poder realizar algún tipo de operación sobre los registros de una tabla (consulta, alta, baja o modificación), el modo de resolverlo es mediante un servicio de tipo asmx o wcf.

    En primer lugar debes crear en tu proyecto un servicio, por ejemplo de tipo WCF, y escribir en él los métodos de acceso a la base de datos.

    A continuación, dentro del WebForm que contiene el código ajax que deseas comunicar con el origen de datos, añade al ScriptManager una referencia al servicio de la siguiente forma:





    Seguidamente, en el bloque de código javascript del WebForm, escribe un método que será el encargado de llamar al método(s) necesario(s) del servicio, algo parecido a lo siguiente:

    Y a grandes rasgos, estos serían los pasos principales a realizar. Ya que se trata de un requerimiento bastante habitual, quería preparar un post para el blog basado en este tipo de funcionalidades, dado que es un tema que puede resultar interesante. Espero poder publicarlo en los próximos días/semanas.

    Un saludo.
    Luismi

  • anonymous

    Hola, me parece buenisimo tu ejemplo, sabes yo tengo un inconveniente, al utilizar el modal dentro de una pagina q hereda de un masterpage, el detalle es q se posiciona en la parte superior izquierda, saben xq podria ser?? …
    saludos

    daniel lt

  • lmblanco

    Hola Daniel

    Gracias por leer el post. Respecto al problema que comentas, parece ser que se presenta con cierta frecuencia; en el siguiente enlace perteneciente al blog de Ramesh Bhaskar tienes un post en el que comenta esta cuestión y una posible solución a la misma.

    http://blog.rameshbhaskar.com/2008/01/08/modalpopupextender-does-not-display-at-the-center/

    Espero que te sea de utilidad.

    Un saludo,
    Luismi

  • anonymous

    Hola Luis. No puedo más que felicitarte por tu excelente artículo. Me ha sacado muchas dudas, y me ha resultado bastante útil.
    El problema es que estoy haciendo un proyecto muy similar, pero cuando se ejecuta el código JavaScript correspondiente a los eventos del botón OK y Cancelar del formulario, no se actualizan los controles en el sitio.

    Es decir, tengo este código en el evento que se dispara al apretar el botón Aceptar:
    function mpeSeleccionOnOk()
    {
    var CajaTexto=document.getElementById(«txtProveedor»);
    var CajaTexto2=document.getElementById(«txtOwner»);

    CajaTexto.Value=CajaTexto2.Value;

    }

    Se ejecuta (porque si modifico algo intencionalmente obtengo un error). Pero la caja de texto llamada txtProveedor no cambia su valor para nada.
    ¿Qué me está faltando?
    Saludos y muchas gracias

  • anonymous

    Pido perdón por lo anterior, encontré el problema. Yo ponía el código Javascript fuera del formulario (

    ) y por eso no funcionaba.

    Ahora tengo otro problema. En lugar de usar un combo yo uso un Listbox para que el usuario seleccione una opción ¿como paso la selección del ListBox a una caja de texto en la función Javascript del botón OK?

    Gracias y un gran saludo

  • lmblanco

    Hola Franco

    Gracias por tu interés en el artículo y me alegra que te haya sido de ayuda 😎

    Celebro que resolvieras el primer problema que comentabas, respecto a tu otra duda en la manipulación del ListBox desde Javascript, el modo de selección en el ListBox es también utilizando su colección options. Supongamos que en el ejemplo del artículo, utilizamos dentro del panel que usaremos como diálogo un ListBox:

    //———————————————————


    //———————————————————

    Ahora pasamos al código Javascript que se ejecutará al pulsar el botón ok del cuadro de diálogo, y utilizamos de forma combinada las propiedades options y selectedIndex del ListBox como vemos a continuación, para obtener el elemento seleccionado:

    //———————————————————

    //———————————————————

    Espero que te sirva para solucionar el problema.

    Un saludo.
    Luismi

  • anonymous

    Hola excelente articulo, una pregunta no se porq cuando activo mi Popup la barra de desplazamiento esta activa pero no funciona, es decir no veo todo el contenido de lo q contiene mi panel.
    no se si es un problema de version del ajax??

    Saludos.

  • anonymous

    exelente el articulo….pero tengo un problema tengo una aplicacion un boton carga el model con un gridview 2 cajas de texo y un boton, en mi gridview hay una columna de tipo templateField con un input tipo boton que cada vez que le doy aceptar mediando un javascript carga algunos datos del grid a las caja de texto .El problema es que cada vex que le pulso el boton del grid se cierra el modelPoput…..de ante mano se agradece la solucion .
    Salu2….

  • lmblanco

    Hola Marcos

    Gracias por leer el artículo.

    Acabo de probar a añadir al ejemplo una barra de desplazamiento vertical sobre el panel que funciona como caja de diálogo, utilizando la propiedad ScrollBars del control Panel, de la siguiente forma:

    y al ejecutar la aplicación y abrir el ModalPopupExtender, la barra de desplazamiento está activa y me funciona correctamente, desplazando el contenido del panel al moverla.

    Es posible que sea alguna cuestión relacionada con las versiones. Actualmente estoy utilizando Visual Studio 2008 con el SP1 instalado para .NET Framework y Visual Studio. También utilizo el Ajax Control Toolkit para .NET Framework SP1.

    Un saludo.
    Luismi

  • lmblanco

    Hola Martín

    Gracias por leer el artículo, y en cuanto al problema que mencionas es necesario tener presente que el control GridView, como ya comenté en otra respuesta a este mismo post, es un control complejo, y la interacción con el mismo puede producir el envío del formulario al servidor con el consiguiente cierre del ModalPopupExtender.

    Intenta revisar el diseño de la funcionalidad que proporcionas en el ModalPopupExtender, situando si es posible, las operaciones que realizas al pulsar uno de los botones de la columna del grid fuera de dicho grid, en un único botón.

    Un saludo.
    Luismi

  • anonymous

    Está muy interesante el contenido, pero quisiera saber, como seria una ventana modal, con un gridview, es decir, con solo seleccionar un registro de la grilla, me pase el valor en la caja de texto, en este caso txtsituacion

  • lmblanco

    Hola Pepe

    Gracias por leer el post, y respecto a tu pregunta, puedes configurar el control GridView para que mediante la propiedad AutoGenerateSelectButton se muestre para cada fila un link que te permita seleccionar dicha fila, de forma que posteriormente en el evento SelectedIndexChanged, obtengas la fila seleccionada y extraigas el valor que necesites de la celda. El código de marcado necesario sería similar al siguiente:

    //—————————————-

    pruebas con gridview



















    //—————————————-

    En cuanto al codebehind, el evento a manejar sería el siguiente.

    //—————————————-
    protected void GridView2_SelectedIndexChanged(object sender, EventArgs e)
    {
    this.txtSituacion.Text = this.GridView2.SelectedRow.Cells[2].Text;
    this.mpeDialogo.Hide();
    }
    //—————————————-

    Espero que este ejemplo te sirva.

    Un saludo.
    Luismi

  • anonymous

    Hola que tal…
    Muy bueno tu atirculo amigo, solo quisiera saber si sabes como validar tus cajas de texto para impedir que se abra el Modalpopup, si estos no han sido llenado, ya que yo esoy manejando algo similar, pero al momento de mandar llamar el Modalpopup los textbox son validados pero se muestra el modalpopup cosa que no quiero hasta que se complete el primer formulario. saludos
    jmmg_1982@hotmail.com

  • lmblanco

    Hola José Manuel

    Gracias por tu interés en el artículo. Ante esta situación que planteas podrías emplear la siguiente técnica para evitar que el Modalpopup se muestre sin que hayas validado los textbox:

    Basándonos en el ejemplo del post, en primer lugar añadimos al formulario un control button que mantendremos oculto, y que asociaremos al Modalpopup:

    //——————————————

    ….

    //——————————————

    De esta forma, al pulsar ahora el botón btnAsistente, no se mostrará directamente el modalpopup, por lo que podemos asignar a btnAsistente una función javascript para realizar la validación de los textbox.

    //——————————————


    //——————————————

    Dentro de la función javascript de validación, en el caso de que esta no se cumpla según nuestros requisitos, utilizamos la línea:

    window.event.returnValue = false;

    para evitar que el flujo de la ejecución llegue al manipulador del evento click de servidor del button. Cuando la validación sea correcta y se ejecute el evento click de servidor, emplearemos en el manejador de dicho evento el siguiente código.

    //——————————————
    protected void btnAsistente_Click(object sender, EventArgs e)
    {
    this.mpeSeleccion.TargetControlID = «btnAsistente»;
    this.mpeSeleccion.Show();
    }
    //——————————————

    Lo que hacemos aquí es reasignar el control que desencadena la apertura del modalpopup, haciendo que sea el botón btnAsistente, y a continuación mostramos el modalpopup.

    Y esto sería todo, supongo que con algunos retoques lo podrás adaptar a tu caso.

    Un saludo.
    Luismi

  • anonymous

    Hola.

    Estoy buscando información sobre el ModalPopupExtender y me he encontrado este pedazo artículo. Con él he solucionado algún problema que tenía pero me falta uno, tiene que ver bastante con lo que comentais del GridView. Sólo que yo no necesito la paginación sino necesito capturar eventos del GridView (OnRowCommand).

    ¿Puedes ayudarme?

  • lmblanco

    Hola Elvira

    Gracias por tu opinión. Respecto a la posibilidad de acceder al evento RowCommand en un GridView situado dentro de un ModalPopup, en el siguiente bloque de código tienes un ejemplo en el que usando un panel, situamos en su interior un GridView, en el que declaramos un manejador para el evento RowCommand. También asociamos este panel con un extensor ModalPopup.

    //————————————











    //————————————

    A continuación, en el codebehind de la página escribimos el código correspondiente al evento RowCommand, forma que podamos obtener el índice de fila sobre la que se ha producido la selección y realizar las operaciones que necesitemos.

    //————————————
    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
    // obtenemos el índice de fila seleccionado
    int nFila = int.Parse(e.CommandArgument.ToString());
    }
    //————————————

    Espero que te sirva de ayuda.

    Un saludo.
    Luismi

  • anonymous

    Hola Doc:

    Queria saber, si tienes algun ejemplo de como reutilizar la porcion de codigo metido en este control por otros formularios. Es decir en mi caso, a veces necesito reutilizar la lista de materiales y cuando doy click un en boton me llame a este modal que podria estar en algun lugar del site.

    Espero me entiendas y puedas ayudar. gracias.

  • anonymous

    HOla pues mira para mi ese no es el problema el problema es que cuando le doy aceptar me pierde todos los valores ingresadors en caso de un textbox alguein tiene idea de quepuedo hacer?

  • anonymous

    bueno de hecho es srita pero bueno no importa. hasta el momento nohe podido y opte por otra opcion pero de todos modos sigo buscando

  • anonymous

    muy bueno pero no se como probarlo pues en mi visual estudio no tengo el ajax control toolkit…que opinas…

  • lmblanco

    Hola Vanessa

    Quizá se esté produciendo por alguna circunstancia, un envío del formulario al servidor. Si realizas alguna operación relativa a manipulación de datos, quizá debas implementarla en un servicio Web. En este otro artículo se explica un caso que quizá te pueda resultar de interés:

    http://geeks.ms/blogs/lmblanco/archive/2008/08/08/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-i.aspx

    Un saludo.
    Luismi

  • lmblanco

    Hola Juanelo

    En el siguiente post de este blog, tienes un enlace para poder descargar la última versión del toolkit:

    http://geeks.ms/blogs/lmblanco/archive/2008/08/22/ajax-control-toolkit-para-net-framework-3-5-sp1.aspx

    Y en este otro hay un video explicativo sobre su instalación:

    http://www.asp.net/learn/ajax-videos/video-76.aspx

    Espero que te resulten de ayuda.

    Un saludo.
    Luismi

  • anonymous

    gracias por responder, y enviarme esos enlaces me ayudaron mucho, bueno felicitarte por estos post que son muy interesantes para programadores principiantes como yo. hasta pronto….

  • anonymous

    Hola Luismi, estupendo tu artículo. Qué dominio de esta tecnología!

    Tengo un objetivo técnico que me supera de momento (soy un principiante), y no sé si lo que intento hacer es posible o no. Tal vez me puedas guiar un poco, pues ando perdido..

    Tengo un datalist que contiene un LinkButton en su Itemtemplate desde el cual quiero abrir un panel en modo popup, que me deje desactivado detrás este datalist. Para esto había pensado en hacerlo con un ModalPopupExtender. El problema está en lo que quiero que tenga el modalPopup. Me gustaría que recuperara ciertos datos de la base de datos que he de mostrar, esto es posible? A parte de esto, el panel del ModalPopup debe tener unas textbox que al pulsar un button «Insertar» vayan insertanto filas en un gridView. Y una vez creadas las filas que quiera, con otro button «Guardar» lo que quiero es guardar este contenido en la base de datos y cerrar el ModalPopup.

    Hay alguna manera de hacer esto con el ModalPopupExtender? O me estoy etiendo en una camisa de once varas?

  • anonymous

    Cuando se decide colaborar en el mundo de la programacion todo aquel que lo quiera hacer deberia pensar en hacerlo de la manera en que usted lo hace.
    Despues de pasar por muchos ejemplos que solo lograron confundirme encontrar esta publicacion es como encontrar un Oasis en un desierto Felicitaciones excelente articulo.

  • anonymous

    Hola.
    Tu ejemplo me funciona muy bien pero cuando lo pongo en una pagina que este bajo una MasterPage no funciona. Que debo tener en cuenta para hacer lo mismo pero trabajando con master pages.

    de antemano gracias por tu ayuda.

  • lmblanco

    Hola Eztorh

    Gracias por tu interés en el artículo. Respecto al problema que planteas es una cuestion similar a la que se ha comentado anteriormente en otras respuestas de este mismo post, y radica precisamente en la naturaleza de los controles que queremos incluir dentro del ModalPopupExtender. Es necesario tener presente que el uso de ciertos controles pueden producir un envío del formulario al servidor, lo cual provocará el cierre del ModalPopupExtender, por lo que es necesario que revises tu diseño para detectar este tipo de situación y ver si es viable el uso de dichos controles.

    Un saludo,
    Luismi

  • lmblanco

    Hola Juan Carlos

    Gracias por tu interés y opinión en el artículo. Respecto al problema que planteas, debes tener en cuenta que al utilizar master pages, ASP.NET, para cada control que tengas en tu página, añade al ID un sufijo adicional. De esta forma, por ejemplo, si tienes en tu página un TextBox declarado de la siguiente manera en una página que utiliza una master page:



    El html generado para la propiedad ID del TextBox será algo así: ctl00_ContentPlaceHolder1_txtApellidos

    Por lo tanto, si desde javascript necesitas obtener una referencia a este control, deberás utilizar este nuevo valor para el ID.

    Una forma de poder acceder desde javascript a los controles utilizando el ID que originalmente has asignado a los controles, consistiría en generar el código javascript desde el codebehind de la página web, registrar dicho bloque de código de script, y asociarlo a un evento de cliente del control, de la forma que puedes ver en el siguiente bloque de código:

    //—————————–
    protected void Page_Load(object sender, EventArgs e)
    {
    System.Text.StringBuilder sbJS = new System.Text.StringBuilder();
    sbJS.Append(«function txtApellidos_onblur() { n»);
    sbJS.Append(«debugger; n»);
    sbJS.Append(«var txtApellidos = document.getElementById(‘» + this.txtApellidos.ClientID + «‘); n»);
    sbJS.Append(«alert(txtApellidos.value); n»);
    sbJS.Append(«}»);

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), «CodigoJS», sbJS.ToString(), true);

    this.txtApellidos.Attributes.Add(«onblur», «txtApellidos_onblur()»);
    //….
    }
    //—————————–

    Espero que estas indicaciones te sirvan de ayuda.

    Un saludo,
    Luismi

  • anonymous

    Hola Luismi,

    Excelente artículo. Gente como tú hace que no me entren ganas de aporrear la pantalla cuando algo no sale 🙂

    Quiero introducir dos controles AJAX en una misma página (un Accordion y un ModalPopup), pero sólo el ModalPopup funciona. Si quito el ModalPopup, entonces el Accordion funciona. Los dos elementos están en diferentes ContentPlaceHolder que están enlazados a una master page. ¿Esto tiene solución o sólo se puede poner un elemento AJAX por página?

    Muchas gracias de antemano !!!

  • lmblanco

    Hola Vicente

    Muchas gracias por tu opinión sobre el artículo. Respecto al problema que me comentas, he intentado reproducir la situación, creando un proyecto con una master page conteniendo algunos elementos genéricos para todas las páginas de la aplicación (una tabla) y dos ContentPlaceHolder.

    A continuación he añadido al proyecto un webform cuya página maestra fuera la anteriormente creada. Este webform tiene los elementos Content para los ContentPlaceHolder definidos en la página maestra. En cada uno de los Content he situado un Accordion y un ModalPopupExtender con una configuración sencilla y ambos funcionan. Te adjunto el código que he utilizado por si puedes adaptarlo a tu caso para que no te ocurra el comportamiento que me comentas.

    //============================================================================
    // código master page ———————————————
    < %@ Master Language="C#" AutoEventWireup="true" CodeBehind="Maestra.master.cs" Inherits="ModalPopupExtCajaDialogo_CS.Maestra" %>

    < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










    // código webform de contenido ————————————
    < %@ Page Title="" Language="C#" MasterPageFile="~/Maestra.Master" AutoEventWireup="true" CodeBehind="Inicio.aspx.cs" Inherits="ModalPopupExtCajaDialogo_CS.Inicio" %>

    < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>



    SECCION AAA

    linea1

    linea2

    linea3

    linea4



    SECCION BBB

    linea1

    linea2

    linea3

    linea4






    //============================================================================

    Un saludo.
    Luismi

  • anonymous

    Gracias Luis, no podía hacer esto y con tu ejemplo tan claro lo logre!! Muchas gracias!!

  • lmblanco

    Hola Fernando

    No hay de qué, gracias por tu interés y celebro haberte resultado de ayuda.

    Un saludo,
    Luismi

  • anonymous

    Hola, queria hacerles una consulta. Tengo un botón el cual abre una ventana popup pero solo para mostrar un mensaje, o sea, un label dentro del panel. La cosa es que quiero que en el boton que yo uso para abrir el popup, me ejecute el evento onclick el cual tiene codigo behind.
    Digamos, quiero ingresar un registro a una base de datos y luego mostrar el popup para mostrar «Se ingreso correctamente».

    La cosa es que el botón no realiza el postback, solo muestra el popup, por ende, no hace el codigo behind. ¿Hay alguna forma de hacer las dos cosas?

  • anonymous

    Hola Luis Miguel.
    Nada mas tengo que decirte dos cosas:

    1º GRACIAS!
    Realmente necesitaba esta información. Mil gracias por compartir tus conocimientos.

    2º INCREIBLE!
    Es increible tu paciencia para con la gente que ha leido este artículo. Creo que el abuso es parte del ser humano. Pero quería decirte que tu código es claro y la forma en que lo explicas es invaluable.

    Mil gracias.

  • lmblanco

    Hola Carlos

    Para utilizar el ModalPopupExtender en una operación de edición de una base de datos puedes utilizar un servicio WCF de la forma que se explica en este otro post del blog:

    http://geeks.ms/blogs/lmblanco/archive/2008/08/08/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-i.aspx

    Un saludo.
    Luismi

  • lmblanco

    Hola Juan Carlos

    Muchas gracias por tu opinión e interés en el post, celebro que el mismo haya servido para despejar tus dudas 😎

    Un saludo.
    Luismi

  • anonymous

    diría pregunta … tengo problema con el popup :S no puedo ocultarlo hasta que termine de hacer el postback la páginas causando que repita lo que hace el botón tantas veces le de click. Alguna idea??????

  • anonymous

    Hola, buena tarde Luis:

    Tengo un ModalPopupExtender, dentro de un Panel y funciona casi todo correctamente, el detalle es que al correr la aplicación aparece y desaparace el panel inmediatamente, esto siempre que se refresca la página y al parecer solo me pasa en Internet Explorer, ¿Sabes como evitar o solucionar esto Luis?
    De antemano te gradezco tu tiempo y respuesta, ¡saludos!

  • lmblanco

    Hola 3v3

    Prueba a deshabilitar el botón una vez que el usuario lo haya pulsado.

    Un saludo,
    Luismi

  • lmblanco

    Hola Jaciel

    Revisa que en la etiqueta en la que defines el control Panel estás asignando a la propiedad Style el valor que inicialmente oculta el panel.

    Un saludo,
    Luismi

  • anonymous

    Muy buena info, pero no sé cómo utilizarla 🙁 , tengo el siguiente panel:

    CICLO DIA TOMA LECTURA CICLO DIA DIGITACION LECTURA DIA CRITICA
    70

    710



    700

    72



    71

    73



    710

    74



    72

    75



    73

    76



    74

    77



    75

    78



    76

    79



    77

         
    78

         
    79

         
         


    Actualmente dicho panel lo tengo en una página aspx con un gridview, y quedaría más llamativo si cargara la pagina con el gridview de la base de datos de fondo y saliera el popup modal para el ingreso de datos, pero no sé cómo llamarlo cuando se cargue la pagina y tampoco sé como pasar a script lo que hace el botón ingresar para colocar dentro de OnOkScript.:
    protected void btn_ingresar_Click(object sender, EventArgs e)
    {
    functions op = new functions();
    int i;
    valores[0] = tl70.Text.ToString();
    valores[1] = tl700.Text.ToString();
    valores[2] = tl71.Text.ToString() ;
    valores[3] = tl710.Text.ToString();
    valores[4] = tl72.Text.ToString();
    valores[5] = tl73.Text.ToString();
    valores[6] = tl74.Text.ToString();
    valores[7] = tl75.Text.ToString();
    valores[8] = tl76.Text.ToString();
    valores[9] = tl77.Text.ToString();
    valores[10] = tl78.Text.ToString();
    valores[11] = tl79.Text.ToString();

    valores[12] = d710.Text.ToString();
    valores[13] = d72.Text.ToString();
    valores[14] = d73.Text.ToString();
    valores[15] = d74.Text.ToString();
    valores[16] = d75.Text.ToString();
    valores[17] = d76.Text.ToString();
    valores[18] = d77.Text.ToString();
    valores[19] = d78.Text.ToString();
    valores[20] = d79.Text.ToString();

    valores[21] = c710.Text.ToString();
    valores[22] = c72.Text.ToString();
    valores[23] = c73.Text.ToString();
    valores[24] = c74.Text.ToString();
    valores[25] = c75.Text.ToString();
    valores[26] = c76.Text.ToString();
    valores[27] = c77.Text.ToString();
    valores[28] = c78.Text.ToString();
    valores[29] = c79.Text.ToString();

    for (i = 0; i <= 11; i++) op.insertar_BD(tablax, "toma_lect", valores[i], ciclosunion[i]); for (i = 3; i <= 11; i++) { op.insertar_BD(tablax,"digit_lect", valores[9 + i], ciclosunion[i]); op.insertar_BD(tablax,"critica", valores[18 + i], ciclosunion[i]); } Alguien me puede echar una mano o ayudar con esto? Muchas gracias de antemano 🙂

  • anonymous

    Hola Manual.

    Tengo una Consulta, saben porque el fondo de mi popup (con modalpopupExtender) aparece descuadrado.. es decir no tapa toda la ventana sino ke aparece a la mitad de la ventana… cosa no deberia ser asi deberia oscurecer toda la ventana….(centrado)

    dejo una parte mi codigo

    <

  • lmblanco

    Hola David

    Es posible que este problema sea debido al estilo css que utilizas para la propiedad BackgroundCssClass del ModalPopupExtender. Prueba a utilizar el código del ejemplo que está en el post y a adaptarlo a tu caso.

    Un saludo.
    Luismi

  • anonymous

    Hola.

    Estoy probando este código en una página, en la que solicito un dato a través de un modalpopupextender al pulsar sobre un imagebutton, y cuando lo introducen y pulsan aceptar, cargo un campo oculto de la página, para después, en el codigo behind del evento onClick, recuperarlo. Pero el caso es que la función del evento onclick, nunca llega a ejecutarse. Alguien sabe por qué ??? Paso a continuación el código:
    function cancelar() {
    hfCarpeta.value = «»;
    }
    function aceptar() {
    var hfCarpeta = document.getElementById(«txtNombreCarpeta»);
    }



    Cómo puedo llamar al servidor para que se ejecute la función del evento onclick ???

    Muchas gracias.

  • lmblanco

    Hola Karlos

    Si necesitas realizar algún tipo de operación como el que mencionas, creo que en lugar de utilizar el evento onclick en code-behind, podrías probar a realizar toda la operación desde el lado cliente, y si es necesario, por ejemplo, interactuar con la base de datos, utilizar un servicio. Tienes un ejemplo en los siguientes post de este blog:

    http://geeks.ms/blogs/lmblanco/archive/2008/08/08/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-i.aspx

    http://geeks.ms/blogs/lmblanco/archive/2008/08/11/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-y-ii.aspx

    Un saludo,
    Luismi

  • anonymous

    Hola Luis Miguel

    Ante todo felicidades por este artículo tan útil y entendible.

    Mi caso es que tengo un GridView en el que en una columna he definido un template con un imageButton, el cual lanzaría el popup.

    El problema es que, si realizo alguna interacción con la página que la recargue (trabajo con MasterPage), por ejemplo cambio la selección de un DropDown, etc, cuando luego vuelvo a hacer click en el boton del popup, éste sale por detrás de todos los controles de la pagina secundaria y la master page, pero por delante del fondo de la pagina secundaria.

    No sé que puede ser. ¿Tienes alguna idea? Y ante todo, gracias por tu tiempo

  • lmblanco

    Hola nigelman

    Gracias por tu interés en el artículo. Respecto a la duda que comentas, es cierto que el hecho de utilizar el ModalPopupExtender dentro de un GridView puede ocasionar algún problema dada la complejidad de la maquinaria interna que tiene el control GridView. Creo que sería recomendable que revisaras los controles incluidos tanto en el panel que actúa como ventana modal, como en la parte del WebForm normal. Una prueba que podrías hacer es crear un nuevo WebForm con un diseño lo más sencillo posible, que solamente tuviera un GridView y el ModalPopupExtender, para verificar si de esta forma también ocurre el problema. Aislado los posibles controles implicados quizá localices el fallo.

    Un saludo,
    Luismi

  • anonymous

    Buena … justo lo que necesitaba te pasaste esta bien explicado gracias ..

  • lmblanco

    Hola Felipe

    Gracias por tu interés en el post y celebro que te haya sido útil.

    Un saludo,
    Luismi

  • anonymous

    Excelente manera de explicar este extensor.
    Gracias por compartir tu experiencia y conocimiento.

  • lmblanco

    Hola Roberto

    Gracias por tu interés en el artículo y espero que te sirva de ayuda.

    Un saludo,
    Luismi

  • anonymous

    Hola que tal, mira esta super bien el tema, yo me baje el VB y lo corri sin problemas y funciono a la perfeccion, tengo una duda, lei arrivita que alguien trabaja con Masters. bueno igual yo, trabajo con una Master page, y pues mi problema es que yo solo quiero pasar 1 solo campo, el ddlcidades, y pasarlo al textbox, el problema es cuando lo corro, abre todo, saca el popup pero cuando le doy aceptar o cancelar, me sale un error que es Microsoft JScript run time erro: ‘null’ is null or not an object.

    y no se donde esta sacando ese valor nul… mi projecto es en VB

    Saludos.

  • lmblanco

    Hola LuisEffe

    Gracias por tu interés en el artículo. Respecto a tu comentario, cuando en una aplicación empleamos páginas master, debemos tener en cuenta que para evitar problemas en lo que respecta a conflictos con los identificadores de los controles, ASP.NET reasigna estos identificadores. De esta forma, supongamos que en nuestra página tenemos un control TextBox con el identificador txtNombre; si usamos páginas maestras, el identificador real que aparece en el html generado sería algo así: ctl00_ContentPlaceHolder1_txtNombre, por lo que es muy posible que el problema que estás teniendo es debido a esta causa.

    Una forma de solucionarlo consistiría en generar el script cliente desde el codebehind de la página, haciendo uso de la propiedad ClientID que tienen los controles, la cual nos devuelve el identificador real que el control tiene en el html generado. Pongamos como ejemplo una aplicación en la que hemos creado un servicio wcf como el siguiente:

    //——————————

    [ServiceContract(Namespace = «»)]

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

    public class WSDatos

    {

    [OperationContract]

    public string DevolverNombre()

    {

    return «valor obtenido del servicio wcf»;

    }

    }

    //——————————

    Añadimos también a esta aplicación una página master y después un webform que utiliza dicha página master. Si en este webform queremos que al pulsar un botón, se haga una llamada al servicio wcf pero desde código javascript, el botón lo crearemos como un control input básico. El objetivo a cumplir es que al llamar al método del servicio wcf, el resultado obtenido por dicha llamada sea depositado en un control TextBox.

    //——————————

    < %@ Page Title="" Language="C#" MasterPageFile="~/Maestra.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PruManipDatosMaster.WebForm1" %>

    //——————————

    Para poder hacer una referencia correcta hacia el identificador del TextBox, en el evento Load del webform construiremos el script de cliente, en el que utilizaremos la propiedad ClientID del TextBox. Dicho script lo registraremos en la página mediante la propiedad ClientScript de la página, y su método RegisterClientScriptBlock, de forma parecida a la siguiente:

    //——————————

    protected void Page_Load(object sender, EventArgs e)

    {

    System.Text.StringBuilder sbScripCliente = new System.Text.StringBuilder();

    sbScripCliente.Append(«function Button1_onclick() { n»);

    sbScripCliente.Append(«WSDatos.DevolverNombre(DevolverNombreCompleted); n»);

    sbScripCliente.Append(«} n»);

    sbScripCliente.Append(«function DevolverNombreCompleted(sCadena) { n»);

    sbScripCliente.Append(«document.getElementById(‘» + this.txtNombre.ClientID + «‘).value = sCadena; n»);

    sbScripCliente.Append(«} n»);

    this.ClientScript.RegisterClientScriptBlock(this.GetType(),

    «CodigoJavascript», sbScripCliente.ToString(), true);

    }

    //——————————

    De esta manera, al llamar al servicio wcf desde el lado cliente, el valor devuelto por el servicio será depositado correctamente en el control de la página.

    Espero que este ejemplo te sirva de ayuda.

    Un saludo.

    Luismi

  • anonymous

    Excelente Articulo, me ayudó muchisimo en un proyecto que estoy haciendo, pero nuevamente se me compicó la existencia

    mi pregunta es la siguiente:

    en el modalPopUp tengo un gridview al cual lo enlacé a la base de datos mediante el asistente para crear un sqldatasource, entoces lo que necesito es que al momento de seleccionar un campo del grid view me llene 2 textbox que tengo en la pagina principal.. he probado de distintas formas y no he logrado hacerlo…

    Saludos y esperando una pronta respuesta

    Cesar Lagos

  • lmblanco

    Hola César

    Gracias por leer el artículo y por tu interés en el mismo.

    Respecto a la pregunta que expones, como he comentado en otras respuestas de este mismo post, el control gridview tiene una compleja maquinaria que puede provocar efectos extraños al ser añadido a un modalpopupextender.

    Si necesitas llenar dos cajas de texto que están insertadas dentro del gridview con datos, quizá deberías probar a emplear ajax combinando con algún tipo de servicio (asmx o wcf). Te paso un par de enlaces de otro post publicado en este blog, por si te resultan de ayuda.

    http://geeks.ms/blogs/lmblanco/archive/2008/08/08/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-i.aspx

    http://geeks.ms/blogs/lmblanco/archive/2008/08/11/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-y-ii.aspx

    Un saludo,
    Luismi

  • anonymous

    Me parece trome el artículo, lo adpte mientras comía mis Helados Guayos de Aguaje y CamuCamu.

  • anonymous

    El articulo esta excelente, tengo una dificultad, un linkbutton es el encargado de abrir el modalpopupextender, el problema es que, necesito que al mismo tiempo me ejecute las instrucciones del evento onclick del linkbutton, Gracias

  • anonymous

    Hola,

    Estoy tratando de realizar un modalpopup en un formulario para que al momento de guardar o actualizar me muestre un modal con un mensaje de la acción(guardar o actualizar) que se este realizando y se oculte automáticamente sin dar clic en ningún lado.

    Mis botones están dentro de un updatepanel.

    Gracias por la atencion.

    Espero recibir respuesta pronto.
    angela87_martin@hotmail.com

  • lmblanco

    Hola Cristian

    Gracias por tu interés en el artículo. Respecto a la dificultad que planteas, una posible solución sería utilizar el estupendo truco que se comenta en el blog del compañero de Geeks, Chalalo Land.

    http://geeks.ms/blogs/gperez/archive/2009/04/05/tips-ocultando-el.aspx

    Aquí se propone utilizar un control Button para abrir el ModalPopupExtender, pero ocultando el Button. De esa forma podría utilizar el otro control LinkButton para dedicarlo a las operaciones que necesites.

    Espero que te ayude.

    Un saludo,
    Luismi

  • lmblanco

    Hola Carolina

    Te adjunto algunos enlaces a propuestas sobre este problema que comentas:

    http://forums.asp.net/p/1264217/2371905.aspx

    http://forums.asp.net/p/1285281/2481513.aspx

    http://forums.asp.net/p/1458836/3347140.aspx

    Espero que te resulten de ayuda.

    Un saludo,
    Luismi

  • anonymous

    muy buena la informacion gracias,empiezo en asp.net y empleo vs2008.. eh descargado el ejemplo y me funciona muy bien pero cuando lo implemento en mi proyecto al hacer click en el boton asistente solo actualiza la pagina y no muestra el popup eh empleado un windows form y no olvide el scriptManager incluso agregue el update panel en el orden correcto y tambien intente con ajax web form disculpa por no especificar mas el problema ya que no figura ningun error pero lo he implemntado de muchas formas y siempre me sucede igual al final solo actualiza porfavor talves este olvidando algun paso…

    Muchas gracias de antemano por la informacion y tu atencion.

    Correo: Ruben7_89@hotmail.com

  • lmblanco

    Hola Rubén

    Gracias por tu interés en el post. Respecto al problema que tienes, si he entendido bien, el ejemplo te funciona correctamente cuando lo ejecutas en entorno de desarrollo desde vs2008, residiendo el problema cuando lo despliegas en un sitio web. Es posible que el problema sea la falta de alguna dll correspondiente al toolkit de ajax. Revisa que todos los componentes de ajax estén instalados también.

    Un saludo,
    Luismi

  • anonymous

    Hola muchas gracias por la ayuda al final logre solucionarlo el problema era que estaba empleando el ScriptManager de Ajax Extensions y lo cambie por el ToolkitScriptManager de tool kit y ya me funciona gracias por el tutorial me hes de mucha ayuda.

    Saludos Ruben

  • lmblanco

    Hola Rubén

    Celebro que finalmente pudieras solucionar el problema 🙂

    Un saludo,
    Luismi

  • anonymous

    Hola Luismi como estas??, tengo un gran problema espero q me puedas ayudar. Tengo la siguiente estructura en mi pagina web

    Accordion
    modal popup
    drop down list
    drop down list

    El problema es q cuando abro el popup con los ddl y elijho una opcion se cierra el popup. Yo necesito q los ddl si o si tengan la propiedad AutopostBack en TRue par afiltrar un par de datos. Por favor necesito ayuda

  • anonymous

    Hola, gracias por el articulo, la verdad es que me ayudo bastante… queria preguntarte como hago para deshabilitar el formulario original al abrirse el modal. Para explicarme mejor, al abrir el modal el formulario que me queda atras (original) queda habilitado y el usuario puede modificarlo…

    gracias!!!

  • anonymous

    Hola Luis Miguel, muy interesante tu articulo, quisiera saber si es posible utilizando este control abrir una pagina aparte como ventana modal, no se si me hago entender pero lo que veo es que la ventana modal se crea en la misma página, pero yo quiero llamar una pagina nueva, como ventana modal, es posible??

  • lmblanco

    Hola Makos

    Revisa el código de ejemplo de este post, ya que los dropdownlist que se utilizan, al hacer una selección no producen el cierre del panel.

    Un saludo,
    Luismi

  • lmblanco

    Hola Nakiotio

    No hay de qué, celebro que te fuera de utilidad.

    Revisa el código fuente del ejemplo, ya que acabo de probarlo y cuando se abre el ModalPopupExtender, si intentas hacer clic fuera del mismo, en el formulario original, este no toma el foco hasta que no has aceptado el ModalPopupExtender.

    Un saludo,
    Luismi

  • lmblanco

    Hola Famara

    Gracias por tu opinión sobre el artículo. Respecto a tu pregunta, puedes probar a utilizar desde javascript el método window.showModalDialog() de una forma similar a la siguiente:

    //————————————–
    prueba ventana modal


    //————————————–

    Un saludo,
    Luismi

  • anonymous

    Hola, gracias por compartir tus conocmientos !! Mira, tengo un problema al cerrar el modalpopup.
    Se cierra e inmediatamente se vuelve a abrir.
    Lo he intentado de muchas formas y nada me resulta.
    Te agradecería si me ayudas !!

    Lourd
    ——————————————-







    MONTO A PAGAR:

    RECARGOS:

    FORMA DE PAGO:




  • anonymous

    Me funcionó el cerrar con la tecla ESC:

    function pageLoad(sender, args) {
    $addHandler(document, «keydown», OnKeyPress);
    var t = document.getElementById(«referencia»);
    t.style.visibility = «hidden»
    }

    function OnKeyPress(args) {
    if (args.keyCode == Sys.UI.Key.esc) {
    $find(«ModalPopupExtender1»).hide();
    }

    }

    Y haciendo un postback también, pero no quiero hacer un postback si la opción es cancelar… ¿cómo le puedo hacer para que el botón cerrar tenga el mismo comportamiento que cuando presiono el ESC?

  • lmblanco

    Hola Lourd

    Puedes probar a simular una pulsación de tecla cuando realmente se pulse otra distinta. En el siguiente ejemplo se cambia el foco entre los controles pulsando Enter, pero realmente se envía la tabla Tabulador:

    //—————–








    //-----------------

    Espero que te sirva para adaptarlo a tu caso.

    Un saludo,
    Luismi

  • anonymous

    muchas gracias Luis Miguel quedo perfecto y con esto ademas puedo controlar otros comportamientos como validar ingresos de solo numericos

  • lmblanco

    Hola Mario

    Gracias por tu opinión y celebro que el post te haya servido de ayuda.

    Un saludo,
    Luismi

  • anonymous

    Hola, esta muy bueno tu post, solo tengo una duda existencial…

    por que cuando hago mis dialogos si funcionan en ie 8 y 7 y navegadores basados en el, pero todos los navegadores basados en firefox y webkit no funcionan 🙁 me preocupa por que de los 6 navegadores que tengo instalados solo funciona el dialogo en 2 de ellos, la cosa esta así

    en firefox cuando presiono cancelar se cierra pero si lo quiero volver a abrir la pag hace postback y genera un comportamiento extraño

    Gracias por la ayuda

  • lmblanco

    Hola Israel

    Gracias por tu interés en el post. Respecto al problema que comentas no he probado el ejemplo en Firefox, pero por la descripción que haces, quizá sea algún aspecto de la configuración de Firefox o quizá un problema en su motor de javascript.

    Un saludo,
    Luismi

  • anonymous

    Hola amigo, la duda que tengo es como recoger datos desde el modelopopup, me explico, tengo un webform para registrar clientes a la hora de hacer clic en el boton registrar hago q aparesca el modelpopup con el clásico mensaje de ¿ESTAS SEGURO?, pero mi problema radica en que como compruebo en el codebehind si se a presionado «Aceptar» o «Cancelar». Lo he logrado hacer con el confirmButtonExtender, pero no lo e logrado con el modelpopup, me gustaría saber como hacerlo (disculpen la novatez jeje).

  • anonymous

    Muchas gracias, me ayudo bastante 🙂

  • lmblanco

    Hola miuler089

    Para gestionar datos con el ModalPopupExtender puedes utilizar un servicio WCF como se muestra en este enlace:

    http://geeks.ms/blogs/lmblanco/archive/2008/08/08/manipulaci-243-n-de-datos-en-ajax-mediante-el-control-modalpopupextender-i.aspx

    Espero que te sirva.

    Un saludo,
    Luismi

  • lmblanco

    Hola Macbeth

    Gracias por tu interés en el artículo y celebro que te sirviera 🙂

    Un saludo,
    Luismi

  • anonymous

    Como podemos limpiar los controles dentro de un ModalPopupExtender (léase dentro de un panel asociado

  • anonymous

    ModalPopupExtender. Creando cajas de di�logo en ASP.NET mediante AJAX – El aprendiz de brujo

  • Responder a Cancelar respuesta

    Tema creado por Anders Norén