37- . Aplicaciones web. Control UpdateProgress
- En este capítulo del curso de programación en c# con visual studio 2017,vamos a ver un control de uso común en muchas de las páginas web que utilizamos habitualmente.Hablo del UpdateProgress , que para que funcione correctamente debe estar ubicada dentro de un UpdatePanel.Os dejo dos pinceladas de estos dos controles:- UpdatePanel: Los controles UpdatePanel permiten actualizar las partes seleccionadas de una página en lugar de actualizar toda la página con una devolución de datos. Esto se conoce como actualización parcial de la página.
- UpdateProgress: El control UpdateProgress proporciona información de estado sobre las actualizaciones parciales de página en controles UpdatePanel . Puede personalizar el contenido y el diseño predeterminados del control UpdateProgress. Para evitar el parpadeo que se produce cuando una actualización parcial de página es muy rápida, puede especificar un retraso antes de que se muestre el control UpdateProgress.
- Veamos un ejemplo en el video:
* Como hago habitualmente os dejo el código del ejemplo tantode la parte de cliente como de la parte de servidor:
- Código del fichero aspx:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<fieldset style="width:200px">
<legend>Ejemplo progres bar</legend>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" /><asp:Label ID="lblStatus"
runat="server" Text=""></asp:Label>
<asp:UpdateProgress ID="UpdWaitImage" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Image ID="imgProgress" ImageUrl="imagenes/Loading_icon.gif" runat="server" />
Por favor espere...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</form>
</body>
</html>
- Código del fichero cs:
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GestionVarios
{
public partial class ProgessBar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(10000);
lblStatus.Text = "Completado";
}
}
}
No hay comentarios:
Publicar un comentario