tag:blogger.com,1999:blog-9718515638658798322024-02-18T20:29:26.572-08:00Código Fuente para ProgramaciónCódigo fuente de aplicaciones, eventos, manejadores, paginas dinámicas y todo lo relacionado con el desarrollo de aplicaciones. Implementando lenguaje ASP.NET, C#, HTML, JavaScript, AJAX.Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-971851563865879832.post-56595758543633841742012-07-04T13:00:00.001-07:002012-07-04T13:16:10.227-07:00Contador y Limitador de CaracteresLa idea de colocar esta función a un TextArea o a un TextBox tipo multiline de ASP.NET resulta muy común cuando existe un limite de espacio en un campo de una tabla en la Base de Datos (BD), ya que en ocasiones se crean campos para párrafos, mensajes o títulos con un tamaño de caracteres 400 por ejemplo y para no desbordar este tope o para evitar que los datos se almacenen incompletos en la BD se establece un limitador de caracteres en el campo y preferiblemente en la parte del cliente. En la siguiente figura se muestra un ejemplo<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgVXW_-R-PKff_lkKWN2qOQy_b9ArVreXkgJkoq_kHP0z6jRTqFRgkfUwl8CvS0IrnikGo5qxpqry_cFE_FRH5apC37rplYPRCf6fLGr76pMJNIjpIhCQovZvARZIynte-rqrBkLaAd6K/s1600/ContadorCaract.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgVXW_-R-PKff_lkKWN2qOQy_b9ArVreXkgJkoq_kHP0z6jRTqFRgkfUwl8CvS0IrnikGo5qxpqry_cFE_FRH5apC37rplYPRCf6fLGr76pMJNIjpIhCQovZvARZIynte-rqrBkLaAd6K/s400/ContadorCaract.PNG" width="400" /></a></div>
<br />
<br />
Esto se puede logran con el siguiente código JavaScript:<br />
<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;"><</span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;">script</span> <span style="background-color: white; color: red; font-family: 'Courier New', Courier, monospace;">type</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">="text/</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">javascript"</span><span style="background-color: white;"> </span><span style="background-color: white; color: red; font-family: 'Courier New', Courier, monospace;">language</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">=</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">"</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">javascript"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="color: blue; font-family: 'Courier New', Courier, monospace;">function</span> <span style="background-color: white;"><span style="font-family: 'Courier New', Courier, monospace;">contadorTexto(campo, cuentaCampos, limiteMaximo)</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">if</span><span style="background-color: white;"> </span><span style="background-color: white; font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white;"><span style="font-family: 'Courier New', Courier, monospace;">(campo.value.length > limiteMaximo) <span style="color: green;">//Si muy largo, cortar.</span></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white;"><span style="font-family: 'Courier New', Courier, monospace;">campo.value = campo.value.substring(0, limiteMaximo);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="color: blue; font-family: 'Courier New', Courier, monospace;">else</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="background-color: white;"><span style="font-family: 'Courier New', Courier, monospace;">cuentaCampos.value = (limiteMaximo - campo.value.length);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white; font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="color: blue; font-family: 'Courier New', Courier, monospace;"></</span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;">script</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">></span><br />
<br />
Los dos (2) siguientes elementos son el TextBox donde se escribe el texto que se cuenta y se limita, seguido de un Input que muestra la cantidad de caracteres que faltan para llegar al limite.<br />
<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;"><</span><span style="color: #a31515;">asp:TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="Txt_Mensaje"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">TextMode</span><span style="color: blue;">="MultiLine"</span> <span style="color: red;">Height</span><span style="color: blue;">="80px"</span> <span style="color: red;">Width</span><span style="color: blue;">="400px" </span><span style="background-color: white;"><span style="color: red;">onkeydown</span><span style="color: blue;">="contadorTexto(this.form.Txt_Mensaje, this.form.Txt_Cont, 500);" </span></span><span style="background-color: white;"><span style="color: red;">onkeyup</span></span><span style="background-color: white; color: blue;">="contadorTexto(this.form.Txt_Mensaje, this.form.Txt_Cont, 500);"></</span><span style="background-color: white;"><span style="color: #a31515;">asp:TextBox</span></span><span style="background-color: white; color: blue;">></span></span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">="Txt_Cont"</span> <span style="color: red;">type</span><span style="color: blue;">="text"</span> <span style="color: red;">size</span><span style="color: blue;">="3"</span> <span style="color: red;">disabled</span><span style="color: blue;">="disabled"></span></span><br />
<br />
<br />
<br />
<br />Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com1tag:blogger.com,1999:blog-971851563865879832.post-58819152983222278772012-06-22T13:49:00.002-07:002012-06-22T13:49:59.749-07:00Actualizar elemento HTML ubicado fuera de un UpdatePanelEsta funcionalidad es de gran importancia para aquellas personas que utilizan el Control <b>UpdatePanel</b> de ASP.NET y en ocasiones requieren ubicar controles ASP como Label, Button, TextBox o controles HTML como Input, Span, entre otros, por fuera del control UpdatePanel (ilustrado en la figura 1.).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZAtsUHK3LgbLxpPg3cMC1qkjKkdnT3RMWKu6iFU31690TsthVj5MBR_iJH0rYP51fatYik0BuBJ_Lhz6xPgxebgJd1KusNjdS_wiJIr75ZJibHkPG7TxV5HyOr00Ry3fZCwxgHcqroB4/s1600/UpdatePanel.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Codigo ASP.NET" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZAtsUHK3LgbLxpPg3cMC1qkjKkdnT3RMWKu6iFU31690TsthVj5MBR_iJH0rYP51fatYik0BuBJ_Lhz6xPgxebgJd1KusNjdS_wiJIr75ZJibHkPG7TxV5HyOr00Ry3fZCwxgHcqroB4/s400/UpdatePanel.PNG" title="Figura 1." width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Figura 1.</div>
<br />
<b>El problema</b> consiste en que al momento de querer cambiar propiedades de los controles que están por fuera el UpdatePanel, estos no se verán reflejados debido a que solo se actualizarán los elementos que están dentro del Panel. Para ver un ejemplo mas claro, supongamos que al presionar el botón <i>Submit </i>se quiere bloquear el botón <i>Hab/deshab</i> o un TextBox (fuera del UpdatePanel) desde el CodeBehind por alguna condición dada.<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">protected void</span> Button1_Click(<span style="color: blue;">object </span>sender, <span style="color: #6fa8dc;">EventArgs </span>e)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if </span>(Button2.Enabled) {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: black; line-height: 18px; margin: 0px; padding: 0px;">Label1.Text </span><span style="line-height: 18px; margin: 0px; padding: 0px;">=</span><span style="color: blue; line-height: 18px; margin: 0px; padding: 0px;"> </span><span style="margin: 0px; padding: 0px;"><span style="line-height: 18px;"><span style="color: #6fa8dc;">DateTime</span>.Now.ToString()</span><span style="color: blue;"><span style="line-height: 18px;">;</span></span></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> Button2.Enabled = <span style="color: blue;">false</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else </span>{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="color: black; font-family: 'Courier New', Courier, monospace; line-height: 18px; margin: 0px; padding: 0px;">Label1.Text </span><span style="font-family: 'Courier New', Courier, monospace; line-height: 18px; margin: 0px; padding: 0px;">=</span><span style="color: blue; font-family: 'Courier New', Courier, monospace; line-height: 18px; margin: 0px; padding: 0px;"> </span><span style="font-family: 'Courier New', Courier, monospace; margin: 0px; padding: 0px;"><span style="line-height: 18px;"><span style="color: #a31515;">"Fecha inactiva"</span></span><span style="color: blue;"><span style="line-height: 18px;">;</span></span></span>
<br />
<span style="font-family: 'Courier New', Courier, monospace;"> Button2.Enabled = <span style="color: blue;">true</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<br />
Pero dado que el elemento <i>Label1</i> y <i>Button2</i> se encuentra fuera del Panel, se cambiará su propiedad Enable (dentro del servidor), pero este cambio no se verá reflejado en el explorador debido a que el cliente solo recibe actualización de elementos contenidos dentro el UpdatePanel, como función de AJAX.<br />
<br />
<br />
<b>La solución</b> está en que debemos cambiar el código anterior por el siguiente:<br />
<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">protected void</span> Button1_Click(<span style="color: blue;">object </span>sender, <span style="color: #6fa8dc;">EventArgs </span>e)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if </span>(Button2.Enabled) {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><span style="line-height: 18px;">ScriptManager1.RegisterDataItem(Label1, </span></span><span style="color: #6fa8dc; font-family: 'Courier New', Courier, monospace; line-height: 18px;">DateTime</span><span style="font-family: 'Courier New', Courier, monospace; line-height: 18px;">.Now.ToString()</span><span style="font-family: 'Courier New', Courier, monospace; line-height: 18px;">);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="line-height: 18px;"> ScriptManager1.RegisterDataItem(Button2, <span style="color: #a31515;">"false"</span>);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else </span>{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><span style="line-height: 18px;">ScriptManager1.RegisterDataItem(Label1, <span style="color: #a31515;">"Fecha inactiva"</span>);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="line-height: 18px;"> ScriptManager1.RegisterDataItem(Button2, <span style="color: #a31515;">"true"</span>);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<br />
El método <strong>RegisterDataItem()</strong> del ScriptManager envía datos en una llamada asíncrona (desde UpdatePanel) a los controles que se encuentran fuera del
UpdatePanel. Además se debe manejar el siguiente evento en el cliente.<br />
<b>Nota: </b>Este código debe colocarse después de la definición del control ScriptManager, de lo contrario dará un error diciendo que el espacio de nombres Sys no está definido aún.<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;"><</span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;">script</span> <span style="background-color: white; color: red; font-family: 'Courier New', Courier, monospace;">type</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">="text/</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">javascript"</span><span style="background-color: white;"> </span><span style="background-color: white; color: red; font-family: 'Courier New', Courier, monospace;">language</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">=</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">"</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">javascript"></span><br />
<span style="background-color: white; font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="background-color: white; font-family: 'Courier New', Courier, monospace;"> Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(</span><br />
<span style="background-color: white; font-family: 'Courier New', Courier, monospace;"> PageLoadingHandler);</span>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">function</span> <span style="font-family: 'Courier New', Courier, monospace;">PageLoadingHandler(sender, args)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">var</span><span style="font-family: 'Courier New', Courier, monospace;"> dataItems = args.get_dataItems();</span>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">if</span> <span style="font-family: 'Courier New', Courier, monospace;"> ($get(<span style="color: #a31515;">'Label1'</span>) !== </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">null</span><span style="font-family: 'Courier New', Courier, monospace;">)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> $get(<span style="color: #a31515;">'Label1'</span>).innerHTML = dataItems[<span style="color: #a31515;">'Label1'</span>];</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">if</span> <span style="font-family: 'Courier New', Courier, monospace;"> ($get(<span style="color: #a31515;">'Button2'</span>) !== </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">null</span><span style="font-family: 'Courier New', Courier, monospace;">)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span>
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">if</span> <span style="font-family: 'Courier New', Courier, monospace;"> (dataItems[<span style="color: #a31515;">'Button2'</span>] == <span style="color: #a31515;">"true"</span>)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> $(<span style="color: #a31515;">'input#Button2'</span>).attr(<span style="color: #a31515;">'disabled'</span>, dataItems[<span style="color: #a31515;">'Button2'</span>]);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">else</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> $(<span style="color: #a31515;">'input#Button2'</span>).removeAttr(<span style="color: #a31515;">'disabled'</span>);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span> <span style="color: blue; font-family: 'Courier New', Courier, monospace;"></</span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;">script</span><span style="background-color: white; color: blue; font-family: 'Courier New', Courier, monospace;">></span><br />
<br />
En primer lugar se obtiene una instancia de la clase <b>Sys.WebFroms.PageRequestManager</b> que es la encargada de actualizar los controles que se encuentran dentro del UpdatePanel. Antes de que esta actualización ocurra, gestionamos el evento pageLoading() y recogemos los datos enviados desde el servidor para actualizar el <i>Label1</i> y <i>Button2</i><span style="background-color: white;">.</span><br />
<br />
De esta forma se ha creado un manejador del evento <span style="background-color: white;">propio</span><span style="background-color: white;">, RecogerDatosHandler(), que por medio de la colección <i>args</i> podemos acceder a los datos enviados desde el servidor.</span><br />
<br />
No olvide importar el js con las librerias de JQuery para manejo JavaScript de los elementos en el cliente.<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;"><</span><span style="color: #a31515;">script </span><span style="color: red;">src</span><span style="color: blue;">="../js/jquery-1.4.2.min.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: #a31515;">script</span><span style="color: blue;">></span></span><br />
<br />
<br />
Para hacer este Post tomé de ayuda el siguiente Blog: <a href="http://oscarsotorrio.com/post/2009/12/08/Enviar-datos-asincronos-a-un-control-fuera-de-un-UpdatePanel.aspx">http://oscarsotorrio.com/post/2009/12/08/Enviar-datos-asincronos-a-un-control-fuera-de-un-UpdatePanel.aspx</a><br />
<br />
<br />
<br />Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com5tag:blogger.com,1999:blog-971851563865879832.post-18022043394907788542012-06-10T13:04:00.001-07:002012-06-10T13:04:59.979-07:00Llamar codigo JavaScript desde C# (ASP.NET)En ocasiones es necesario e importante ejecutar código JavaScript o llamar funciones de JavaScript encontradas en la pagina ASP.NET. Para ellos existen métodos que permiten hacer esta tarea, a continuación enuncio varios ejemplos para llamar funciones de JavaScript desde CodeBehind C#.<br />
<br />
El primer ejemplo es para llamar una función "MostrarOcultarDiv();" el cual como su nombre lo indica, permite visualizar y ocultar un elemento DIV de HTML con ID "divAgregar".<br />
<br />
<br />
<i style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">////////////////// CODIGO JAVASCRIPT /////////////////////</i><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span>
<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;">function </span>MostrarOcultarDiv()</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">var</span> div = document.getElementById(<span style="color: #a31515;">"divAgregar"</span>);</span>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if</span> (div.style.display == <span style="color: #a31515;">"none"</span>)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> div.style.display = <span style="color: #a31515;">"block"</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> div.style.display = <span style="color: #a31515;">"none"</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<br />
<br />
<i style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">////////////////// CODIGO C# (CodeBehind) /////////////////////</i><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span>
<span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><br />
<span style="background-color: white; font-size: 15px; line-height: 20px;"><span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"></span></span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">protected void</span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> BtnGuardar_Click(</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">object </span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;">sender, </span><span style="color: #6fa8dc; font-family: 'Courier New', Courier, monospace;">EventArgs </span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;">e)</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;">{</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> ...</span>
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #333333;"> </span><span style="color: green;">//Llamar funcion </span></span><span style="color: green; font-family: 'Courier New', Courier, monospace;">MostrarOcultarDiv() desde codigo C#</span><br />
<span style="color: green; font-family: 'Courier New', Courier, monospace;"> // Ambas lineas de código funcionan.</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #333333;"> ClientScript.RegisterStartupScript(</span><span style="color: blue;">this</span><span style="color: #333333;">.GetType(), </span><span style="color: #a31515;">"myScript"</span><span style="color: #333333;">, </span><span style="color: #a31515;">"MostrarOcultarDiv();"</span><span style="color: #333333;">, <span style="color: blue;">true</span>);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #333333;"> ClientScript.RegisterStartupScript(<span style="color: blue;">this</span>.GetType(), </span><span style="color: #a31515;">"myScript"</span><span style="color: #333333;">, </span><span style="color: #a31515;">"<script>javascript:MostrarOcultarDiv();</script>"</span><span style="color: #333333;">);</span></span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> </span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;">}</span><br />
<br />
<br />
<br />
<br />
El segundo ejemplo ejecuta una instrucción JavaScript "Alert" que muestra un mensaje luego de guardar unos datos.<br />
<br />
<br />
<br />
<i style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">////////////////// CODIGO C# (CodeBehind) /////////////////////</i><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span> <span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><br />
<span style="background-color: white; font-size: 15px; line-height: 20px;"><span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"></span></span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">protected void</span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> BtnGuardar_Click(</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">object </span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;">sender, </span><span style="color: #6fa8dc; font-family: 'Courier New', Courier, monospace;">EventArgs </span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;">e)</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;">{</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> ...</span> <span style="color: #333333; font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #333333;"> </span><span style="color: green;">//</span></span><span style="color: green; font-family: 'Courier New', Courier, monospace;">Ejecutar código 'Alert' JavaScript desde C#</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #333333;"> ClientScript.RegisterStartupScript(<span style="color: blue;">this</span>.GetType(), </span><span style="color: #a31515;">"myScript"</span><span style="color: #333333;">, </span><span style="color: #a31515;">"<script>javascript: </span></span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;">alert('Se guardaron los datos satisfactoriamente');</span><span style="color: #a31515; font-family: 'Courier New', Courier, monospace;"></script>"</span><span style="color: #333333; font-family: 'Courier New', Courier, monospace;">);</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"> </span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;">}</span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="color: #333333; font-family: 'Courier New', Courier, monospace;"><br /></span>Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com11tag:blogger.com,1999:blog-971851563865879832.post-55438877542881292022012-05-26T08:09:00.002-07:002012-06-10T13:23:20.443-07:00Controlar Teclas en TextBox, input y textarea (KeyPress)<br />
A continuación se encuentra el código que permite controlar las teclas que se pulsan (KeyPress) en una caja de texto de ASP.NET (TextBox), input tipo text y textarea de HTML desde Javascript. Este evento se llama cada vez que presiona una tecla cualquiera en la caja de texto. Ideal para cuando se quiere controlar la tecla Enter para enviar un formulario y ademas funciona en todos los explordores. En el ejemplo de abajo se muestra un mensaje de alerta cuando se presiona la tecla Enter.<br />
<br />
<br />
<br />
<i>////////////////// CODIGO JAVASCRIPT /////////////////////</i>
<br />
<i><br /></i><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;">function </span>get_KeyPress(textbox, evento)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">{</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: green;"> //debugger;</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">var </span>keyCode;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if </span>(evento.which || evento.charCode) {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> keyCode = evento.which ? evento.which : evento.charCode;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: green;">//return (keyCode != 13);</span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else if</span> (window.event)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> keyCode = event.keyCode;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if</span> (keyCode == 13)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if </span>(event.keyCode)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> event.keyCode = 9;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if</span> (keyCode == 13)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> alert(<span style="color: #a31515;">"se presiono Enter"</span>);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">return false</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> }</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">return true</span>;</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><br />
<br />
<br />
<br />
<i>////////////////// CODIGO DE TEXTBOX /////////////////////</i>
<br />
<i><br /></i><br />
<i><br /></i><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue; text-align: left;"><</span><span style="color: #990000; text-align: left;">asp:TextBox</span><span style="text-align: left;"> </span><span style="color: red; text-align: left;">ID</span><span style="color: blue; text-align: left;">="</span><span style="color: blue; text-align: left;">TxtMsj</span><span style="color: blue; text-align: left;">"</span><span style="text-align: left;"> </span><span style="color: red; text-align: left;">runat</span><span style="color: blue; text-align: left;">="server"</span><span style="text-align: left;"> </span><span style="color: red; text-align: left;">Width</span><span style="color: blue; text-align: left;">="</span><span style="color: blue; text-align: left;">270px</span><span style="color: blue; text-align: left;">"</span><span style="text-align: left;"> </span><span style="color: red; text-align: left;">placeholder</span><span style="color: blue; text-align: left;">="</span><span style="color: blue; text-align: left;">Manejo evento KeyPress y Enter</span><span style="color: blue; text-align: left;">"</span><span style="text-align: left;"> </span><span style="text-align: left;"><span style="color: red;">onkeypress</span></span><span style="color: blue; text-align: left;">="return get_KeyPress(this, event);"</span><span style="color: blue; text-align: left;">></</span><span style="color: #990000; text-align: left;">asp:TextBox</span><span style="color: blue; text-align: left;">></span></span>
<br />
<div style="text-align: left;">
<span style="color: blue;"><br /></span></div>
<div style="text-align: left;">
<span style="color: blue;"><br /></span></div>Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com0tag:blogger.com,1999:blog-971851563865879832.post-18881124237088264062012-05-26T08:00:00.002-07:002012-06-10T13:15:10.076-07:00Ubicar cursor al final de input, textarea HTML<div>
<br /></div>
<div>
A continuación se encuentra el código que permite posicionar el cursor al final de un TextBox (en ASP.NET), input y textarea (HTML) desde Javascript. Este evento se genera cuando el input o caja de texto recibe el foco, Ideal para cuando hay frecuente actualización de la pagina, como en el caso de un Chat.</div>
<div>
<br />
<br /></div>
<div>
<br /></div>
<div>
<i>////////////////// CODIGO JAVASCRIPT /////////////////////</i></div>
<div>
<br /></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;">function</span> ponerAlfinal(campo)</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">{</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">var </span>explor = navigator.appName; <span style="color: green;">//Identificar el explorador</span></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: green;">//alert("Explorador: " + explor);</span></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">if</span> (explor == <span style="color: #a31515;">"Microsoft Internet Explorer"</span>) <span style="color: green;">//Codigo para MS Internet Explorer</span></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> {</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">var</span> range = campo.createTextRange();</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> range.collapse(<span style="color: blue;">false</span>);</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> range.select();</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> }</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else if</span> (explor == <span style="color: #a31515;">"Netscape"</span>) <span style="color: green;">//Codigo para Netscape: Chrome, Mozilla</span></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> {</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">with </span>(campo) {</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> selectionStart = selectionEnd = value.length;</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> focus();</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> }</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> }</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">else</span> <span style="color: green;">//Si no es ninguno de los anteriores, uso el de IE</span></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> {</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: blue;">var </span>range = campo.createTextRange();</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> range.collapse(<span style="color: blue;">false</span>);</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> range.select();</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> }</span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;">}</span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<i>////////////////// CODIGO DE TEXTBOX /////////////////////</i></div>
<div>
<br /></div>
<div>
<br />
<div style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;"><</span><span style="color: #990000;">asp:TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="TxtMensaje"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Height</span><span style="color: blue;">="40px"</span> <span style="color: red;">Width</span><span style="color: blue;">="365px"</span> <span style="color: red;">onfocus</span><span style="color: blue;">="ponerAlfinal(this);"</span> <span style="color: red;">MaxLength</span><span style="color: blue;">="400"</span> <span style="color: red;">AutoCompleteType</span><span style="color: blue;">="Disabled"></</span><span style="color: #990000;">asp:TextBox</span><span style="color: blue;">></span></span></div>
<br />
<br />
<br /></div>Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com0tag:blogger.com,1999:blog-971851563865879832.post-73916929066993043292012-05-26T07:34:00.001-07:002012-05-26T08:11:16.290-07:00Insertar Gadget en Blogger oficiales y JavaScriptEl siguiente tutorial explica como se puede insertar un Gadget en tu Blogger ya sea desde los oficiales de la pagina de Blogger o alguno desde otra pagina o con tu codigo HTML/JavaScript.<br />
<br />
Este tutorial lo tome como referencia de la siguiente pagina: <a href="http://ticciudaddecordoba.blogspot.com/2012/04/insertar-un-gadget-en-blogger.html">Insertar un Gadget en Blogger</a><br />
<br />
<embed allowfullscreen="true" height="400" src="https://www.box.com/embed/kxof70unzq0869y.swf" type="application/x-shockwave-flash" width="466" wmode="opaque"></embed>Steven Gomezhttp://www.blogger.com/profile/01420744746854178225noreply@blogger.com0