19 oct 2011

// // 3 comentarios

Actualizar controles fuera de un UpdatePanel

Nuevamente retomando el blog que últimamente ha estado un poquito de lado, pero a ver si ahora mantenemos la constancia en los posts.

Ahora voy a comentarles sobre algo que es muy común cuando desarrollamos aplicaciones web y trabajamos con controles UpdatePanel, que es tener que actualizar otros controles que se encuentran definidos fuera del UpdatePanel y para lograrlo vamos a plantear un escenario y las formas de hacerlo.

Escenario:

Tenemos algo muy simple, un UpdatePanel con un TextBox y un Button asociado a un evento que enviará el texto a un Label que está fuera del UpdatePanel

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            this.lblMostrar.Text = this.txtEntrada.Text;
        }

Si tal y como está hacemos clic en el botón no pasará nada con el Label, así que para actualizarlo, les mostraré 2 formas de hacer:

Modo 1: Usando ScriptManager.RegisterDataItem

Para lograr esto tenemos vamos a hacer uso del  PageRequestManager  que obtendrá los datos para ponerlos en el Label y tambien con el RegisterDataItem que los enviará como se muestra en el código.


Y también en el evento del botón ponemos esto:

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            scmPrincipal.RegisterDataItem(this.txtEntrada, this.txtEntrada.Text);
        }

Con esto ya podremos actualizar el Label fuera del UpdatePanel cuando presionemos el botón, pero también podemos hacerlo de otra forma, que detallo a continuación.

Modo 2: Usando otro UpdatePanel

Para esto necesitamos cambiar la estructura y poner el Label dentro de otro UpdatePanel pero con la propiedad UpdateMode="Conditional" para actualizarlo desde el botón.

Y en el evento del botón tendríamos lo siguiente:

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            this.lblMostrar.Text = this.txtEntrada.Text;
            this.upnActualizar.Update();
        }

Conclusión

De ambas formas obtendremos la misma funcionalidad, pero ya depende de cada uno como lo usa, dependiendo la estructura de sus formularios y casos.

Espero les sirva de algo y bueno con esto voy retomando el blog, espero ir poniendo mas cosas.

3 comentarios:

Anónimo dijo...

Hola Ricardo
Muy buen blog, mira he tratado de usar tu ejemplo pero se me esta generando este error y no se que es, gracias de antemano

Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined

Ricardo La Rosa dijo...

Hola,

Asegurate que el HTML que estan rendedirando los controles este con el mismo nombre que lo estas poniendo en las aspx o sino ponle el nombre que corresponde al HTML generado, si usas ASP .NET 4, puedes usar la propiedad ClientIDMode="Static" de los controles para que lo genere con el mismo nombre.

Espero te sea de ayuda.

Saludos.

SaysLeo dijo...

Muy útil tu aporte, gracias, pero tengo una duda, digamos que dentro del updatepanel tengo un botón (dentro de un gridview) que ejecuta un HttpContext.Current.Response para la descarga de un archivo, el problema es que solo funciona si el gridview esta fuera del updatepanel pero no dentro, seria posible 1 hacer que Response funcione dentro del update panel? o 2 llenar el gridview afuera del updatepanel pero con un boton que este dentro del updatepanel?
Saludos