ASP.NET – Detectar via javascript cuando el control SliderExtender cambia

Vamos a hacer un post simpático, que puede ser muy útil.
El caso consiste en lo siguiente: usaremos un control SliderExtender del Ajax Control Toolkit para comunicar el progreso de una tarea, pero lo interesante es que debe haber un código javascript que detecte este movimiento o cambio del porcentaje que vamos a comunicar… entonces, al detectar que se ha llegado al 100% de la tarea, se debe mostrar un control checkbox… el cual podrá ser marcado, pero si le bajamos el progreso a menos del 100% nuevamente el control checkbox debe ocultarse. Véalo en imágenes:


Empecemos entonces.
1.- El primer paso es obviamente añadirle las referencias al Ajax Control Toolkit y a ASP.NET ajax al proyecto.
2.- Luego, pongan este código en la página aspx, dentro del elemento Form:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<table style="width: 99%">
<tr>
<th>
&nbsp;<asp:Label ID="lblTask" Font-Bold="true" runat="server" Text=""></asp:Label>
</th>
</tr>
<tr>
<td style="padding: 20px;text-align: center">
Comunique el Progreso: 
<p>
<asp:TextBox ID="txtProgress" Text="0" runat="server"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtProgress"
Minimum="0" Maximum="100" Length="340" BoundControlID="lblProgress" Steps="100" />
<asp:Label ID="lblProgress" runat="server"></asp:Label>%          

</p>
<p id="pMove" style="display: none">
<asp:CheckBox ID="chkToOldTasks" Text="Mostrar en la lista de temas anteriores(abajo)." runat="server" />
</p>

<asp:ImageButton ID="imgUpdateProgress" ToolTip="Actualizar el progreso de la tarea"
ImageUrl="~/images/save.png" runat="server" />
</td>
</tr>
</table>

<script type="text/javascript">
function pageLoad(sender, e) 
{
var slider = $find('SliderExtender1');
slider.add_valueChanged(onValueChanged);
}

function onValueChanged(sender, e) 
{
var txtProgress = document.getElementById('txtProgress');
var chkToOldTasks = document.getElementById('chkToOldTasks');
var pMove = document.getElementById('pMove');
if (txtProgress.value == '100') 
{
pMove.style.display = 'block';
}
else 
{
pMove.style.display = 'none';
chkToOldTasks.removeAttribute("checked");
}
}
</script>

Y eso es todo, así de simple.

Nota: Esta funcionalidad, originalmente, incluía una master page, una página y un control de usuario… pero por razones de simplificar el post, lo he resumido tal como lo han leído.

Si al testear la funcionalidad, algo no te funciona bien en el código, simplemente haz un comentario y lo resolvemos juntos, ok?

Espero que les sea de utilidad ;)