17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.
net Tutorial | C# |
updatepanel asp
¿Cómo funciona el updatepanel?
En este apartado veremos el updatepanel asp.net con un ejemplo de la forma correcta para
utilizar el control <"asp: UpdatePanel"> con c#, a continuación tenemos una página llamada
administracion.aspx en la cual tenemos un botón en donde al dar un click hará una llamada
asíncrona al servidor y no actualizara toda la página, es decir no hará todo el postbak solo se
actualizara el apartado del TextBox utilizando el control "updatepanel triggers" te
mostraremos el código del lado del aspx y te vamos explicando:
www.spyasociados.com/control-updatepanel/ 1/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
(img/ejemplo1_control_updatepanel_.jpg)
update panel asp.net ejemplo
a) El ContentTemplate y Triggers; estos dos controles son obligatorios y están dentro de
UpdatePanel y dentro de ContentTemplate debe estar el nodo Panel y al interior del mismo
puedes colocar cualquier objeto desde un control hasta TextBox o imagen dependiendo el
diseño de la página, con la finalidad que solo actualices todo lo que está dentro del updatepanel
asp.net de c#, puedes utilizar varios updatepanel en toda la página teniendo el control de cada
sección si así lo deseas. En este caso solo estamos ocupando uno para el ejemplo.
www.spyasociados.com/control-updatepanel/ 2/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
(img/ejemplo2_control_updatepanel_.jpg)
Tenemos varias promociones especiales que te pueden interesar, para conocerlas dale un:
Clic Aquí. (../desarrollodepaginasweb)
(../desarrollodepaginasweb)
www.spyasociados.com/control-updatepanel/ 3/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
AsyncPostBackTrigger
b) En el update panel de asp.net el trigger es el control en el que indicaremos por medio del
AsyncPostBackTrigger a que evento de un objeto en específico se ejecutara la acción, en este
ejemplo se le declara al botón btnBanner en su evento Click en el cual queremos que actualice
el contenido del updatepanel donde tenemos el TextBox. Es decir que cuando se le de click en
el botón btnBanner se actualizara solo el TextBox colocando el siguiente mensaje: "Entro al
evento btnBanner_Click satisfactoriamente" esté texto se le coloca en el control del botón.
(img/ejemplo3_control_updatepanel_.jpg)
update panel asp.net ejemplo del UpdateProgress
c) "UpdateProgress"; Este control es importante ya que muestra la imagen de una imagen gif
en lo que hace la petición al servidor para que muestre el contenido en el updatepanel al
momento de presionar el botón se mostrara y cuando termine la petición se ocultara este
control ayuda mucho a tu sitio web para el usuario, este control debe estar del
ContentTemplate para que funcione en automático. Recuerda que es muy importante que
cuando abres un nodo debes de cerrarlo.
www.spyasociados.com/control-updatepanel/ 4/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
(img/ejemplo4_control_updatepanel_.jpg)
Audífonos Redmi Airdots
$510.00 Envío GRATIS. Ahorras:
$320.00 (39%)
Hasta 4 horas de uso continuo.
Audífonos Redmi Airdots
Compatibles con Bluetooth 5.0
www.spyasociados.com/control-updatepanel/ 5/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
¡ ADQUIERELO EN AMAZON ! (HTTPS://AMZN.TO/31AFIHI)
d) Finalmente este es el resultado de nuestro ejercicio donde utilizamos updatepanel de aspx
donde el control UpdatePanel y los que dependen de él hacen una función en específico y se
cumple el objetivo de hacer una llamada asíncrona de una sola sección de nuestra página web
al servidor.
Nota: El control updatepanel de asp.net es de gran utilidad ya que nos ayuda a evitar que toda
la página web se actualice en su totalidad ya que si el usuario está posicionado en la parte
inferior de la página y hace una llamado al servidor por medio de un botón esto hará que haga
todo la página web se actualice regresando al inicio de la página y el usuario tendrá que
regresar de nuevo a la sección en la que estaba “parte inferior”, esto es incómodo para el
usuario y poco funcional, pero ahora con el control updatepanel postback evitaremos este error
de programación, como lo explicamos anteriormente ya no tienes que preocuparte de esta parte
con el UpdatePanel y con la ayuda del control UpdateProgress es aún mejor ya que simula la
carga de la página y al usuario le dara seguridad, ya que con esto tiene la percepción de que la
página está cargando o en su defecto está haciendo algo.
www.spyasociados.com/control-updatepanel/ 6/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
(img/ejemplo1_imagen_updatepanel_.jpg)
El lenguaje de programación de asp.net de Microsoft está enfocado a la programación
orientada a objetos y eventos en el cual nos da grandes beneficios con una serie de controles
que nos ayuda hacer la programación más fácil, en la nueva versión del framework 3.5 están
incluidos peticiones de ajax haciendo referencia al control updatepanel asp, utilizando triggers
para poder tener llamadas asíncronas al servidor. En el cual podemos llamar un updatepanel
dentro de otro updatepanel creando así varias peticiones simultaneas sin tener que hacer el post
www.spyasociados.com/control-updatepanel/ 7/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
de toda la página completa, si no por partes y en ciertas partes de una página web.
Los triggers para un updatepanel lo hace que sea conditional para ciertos eventos en específico
en los cuales nos regresan datos del servidor, por ejemplo, se pueden declarar un evento de un
textbox o de un button que haga una llamada al servidro en su evento en específico. Esta
llamada se realiza dentro de la sección <"triggers"> en la declaración de control de
updatepanel del asp.net.
El elemento <"asp: AsyncPostBackTrigger"> esté elemento es el más importante de todos ya
que es el que apunta al evento de cualquier control que incluya el UpdatePanel ya sea de un
boton, combo, grid, etc, por lo cual se puede hacer cualquier control para activar una
actualización parcial de la página.
De esta forma, el elemento <"asp: UpdateProgres"> se puede utilizar para simular la carga de
un archivo o la realización de algún proceso en específico en cual mostrara la imagen de carga
mientras se hace la petición al servidor y el updatepanel triggers realiza su función haciendo la
llamada del control cual puede ser el updatepanel a un button ó un updatepanel con un
fileupload en el cual se carga un archivo.
Estaremos publicando un ejemplo detallado sobre el control AsyncFileUpload el cual nos
ayuda a cargar uno o varios archivos a la base de datos y así completando un ejercicio
completo del user control updatepanel en el cual detallaremos paso a paso como hacer esta
carga de forma correcta sin tener ningún error al crear el control updatepanel, bueno sin más
por el momento te damos gracias por visitarnos no se te olvide comentar en nuestro blog.
Si deseas que te expliquemos sobre mas temas o si tienes dudas escríbenos en nuestro blog
y lo publicaremos a la brevedad.
Nombre Comentarios
www.spyasociados.com/control-updatepanel/ 8/9
17/5/2021 ▷ [ASPNET] | Control UpdatePanel | asp.net Tutorial | C# |
Campos obligatorios tienen *. La dirección del correo electrónico no será publicada y
no es obligatoria.
ASP.NET Tutorial.
ESCRIBIR COMENTARIOS
Los datos personales que sean recopilados por spyasociados.com, a través de sus
diferentes puntos de recepción, serán protegidos y tratados con fundamento en las
disposiciones de la Ley Federal de Protección de Datos Personales en posesión de los
particulares.
Tutorial asp.net
Estaremos publicando más temas sobre los siguientes lenguajes: .net, mvc, SqlServer, Angularjs,
html5, Boostrap, JavaScript, cs3, etc.
Nosotros
Somos desarrolladores de sistemas web. Nuestro propósito es publicar diferentes temas sobre el
desarrollo web en varios lenguajes de programación con el objetivo de brindar información de calidad
y oportuna.
Políticas
Política de Cookies (../politica-de-cookies)
Política de Privacidad (../politica-de-privacidad/)
©2020, Derechos reservados por César Santiago Pimentel, Ver. 1.0 SP
Diseñado por www.spyasociados.com (http://www.spyasociados.com)
www.spyasociados.com/control-updatepanel/ 9/9
