Chalalo Land

Controles JQuery equivalentes a Ajax Control Toolkit

Que tal, de nuevo navegando y relacionado con mi antiguo post, encontré una página recopilatoria de controles JQuery y que la comparan con Ajax Control Toolkit, no se dice cual es mejor o peor, si no que , pensando (milagro) que se viene mucho lo de ClientTemplates (que esta muy bueno) esto nos puede ayudar bastante (también para los que les gusta php)

http://httpcode.com/blogs/PermaLink,guid,6ebe1898-3ed8-434c-a54b-72cc8432e948.aspx

(Este es el contenido de la página, todos los derechos al autor de la recopilación, para que no me demande!)

ASP.NET Control Toolkit Accordian

JQuery:

http://jquery.bassistance.de/accordion/demo/

ASP.NET Control Toolkit Always Visible

JQuery:

http://www.west-wind.com/WebLog/posts/388213.aspx

Alternatively the following code will provide the same effect as the ASP.NET control:

   1: $(window).scroll(function() {        

   2:         $('#jqueryScroll').animate({ top: $(window).scrollTop() + "px" }, 
              { queue: false, duration: 350 });

   3: });

ASP.NET Control Toolkit Autocomplete

JQuery:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

ASP.NET Control Toolkit Calendar

JQuery:

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.datepicker

ASP.NET Control Toolkit Cascading Dropdown

JQuery: http://devlicio.us/blogs/mike_nichols/archive/2008/05/25/jquery-cascade-cascading-values-from-forms.aspx

Other notable method (http://weblogs.asp.net/stephenwalther/archive/2008/09/06/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx)

ASP.NET Control Toolkit Collapsible Panel

JQuery:

http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html or http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

ASP.NET Control Toolkit Confirm Button

JQuery:

http://www.ericmmartin.com/projects/simplemodal/

ASP.NET Control Toolkit Drag Panel

JQuery:

http://docs.jquery.com/UI/Dialog

ASP.NET Control Toolkit DropDown

JQuery:

http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/

ASP.NET Control Toolkit Drop Shadow

JQuery:

http://plugins.jquery.com/project/DropShadow

ASP.NET Control Toolkit Filtered Textbox

JQuery:

http://www.texotela.co.uk/code/jquery/numeric/

ASP.NET Control Toolkit List Search

JQuery:

http://rikrikrik.com/jquery/quicksearch/#examples  or  http://ejohn.org/blog/jquery-livesearch/

ASP.NET Control Toolkit Masked Edit

JQuery:

http://digitalbush.com/projects/masked-input-plugin/

ASP.NET Control Toolkit Modal Popup

JQuery:

http://famspam.com/facebox or http://www.ericmmartin.com/simplemodal/ or  http://jquery.com/demo/thickbox/

ASP.NET Control Toolkit Slider

JQuery:

http://docs.jquery.com/UI/Slider

ASP.NET Control Toolkit Mutually Exclusive CheckBox

JQuery: http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html

ASP.NET Control Toolkit Numeric up / down

JQuery:

http://plugins.jquery.com/project/spin-button

ASP.NET Control Toolkit Password strength

JQuery:

http://plugins.jquery.com/project/pstrength or http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

ASP.NET Control Toolkit Rating

JQuery:

http://www.fyneworks.com/jquery/star-rating/#

ASP.NET Control Toolkit Resizable Control

JQuery:

http://docs.jquery.com/UI/Resizables

ASP.NET Control Toolkit Rounded Corners

JQuery:

http://plugins.jquery.com/project/corners

ASP.NET Control Toolkit Slide Show

JQuery:

http://malsup.com/jquery/cycle/  or http://www.gmarwaha.com/jquery/jcarousellite/

ASP.NET Control Toolkit Tabs

JQuery:

http://docs.jquery.com/UI/Tabs

ASP.NET Control Toolkit Textbox Watermark

JQuery:

http://plugins.jquery.com/project/jWatermark

ASP.NET Control Toolkit Validator Callout

JQuery:

http://www.carnovsky.net/samples/jquery_callout_plugin.htm

Or a more complete and extensible validation plugin (which rivals the ASP.NET validation framework) :

http://jquery.bassistance.de/validate/demo/

[Tips] Filtrar un Gridview con Jquery al presionar una tecla :)

Update: La posibilidad de filtrar y que no desaparesca la paginación y la descarga del código está en:
http://geeks.ms/blogs/gperez/archive/2011/04/10/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla-y-no-filtra-el-pager.aspx

 Necesitaba filtrar un gridview al más estilo Windows Form, en donde presionas una tecla y luego se va filtrando la grilla, en mi caso , era sobre los datos que estaban ya en la página, por lo que no iba a tener que darme la vuelta de Marte(el server) y volver con los datos por cada tecla presionada.

Entonces, encontré esta página, como la explicación está en ingles, yo te la doy en español, y vamos a ver como funciona :).

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

1.- Primer paso
Vamos a utilizar un GridView junto a un input type=”text”, no vamos a utilizar un webcontrol, aunque podrías, no hay problema.

2.-Importar la Librería JQuery

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

3.- Código Fuente

<script language="javascript" type="text/javascript">
      $(document).ready(function() {
            //agregar una nueva columna con todo el texto
            //contenido en las columnas de la grilla
           // contains de Jquery es CaseSentive, por eso a minúscula

      $(".filtrar tr:has(td)").each(function() {
      var t = $(this).text().toLowerCase(); 
                $("<td class='indexColumn'></td>")
                .hide().text(t).appendTo(this);
            });

            //Agregar el comportamiento al texto (se selecciona por el ID)
            $("#texto").keyup(function() {
                var s = $(this).val().toLowerCase().split(" ");
                $(".filtrar tr:hidden").show();
                $.each(s, function() {
                     $(".filtrar tr:visible .indexColumn:not(:contains('"
                     + this + "'))").parent().hide();
                }); 
            }); 
        });

     </script>

4.- Saber como funciona el código (si ya sabes, te lo saltas)

Ahora la explicación del código, como la mayoría de la gente que ve este blog son estudiantes, siempre recomiendo entender el código antes de solo pegarlo, o si no nos transformamos en simples copy-pasteros :P

      $(document).ready(function() {

JQuery nos da brinda esta función que nos va a servir para agregar el código que está dentro del ámbito una vez que la página este cargada completamente (Render listo).

   $(".filtrar tr:has(td)").each(function() {
      var t = $(this).text().toLowerCase(); 
                $("<td class='indexColumn'></td>")
                .hide().text(t).appendTo(this);
            });

 

Lo que hizo el autor del código fue obtener todas los td de los tr (".filtrar tr:has(td)") y recorrerlos uno por uno (each) y atacharle el siguiente comportamiento: la variable t, va a obtener el texto de cada td pasado a minúsculas, luego crea un td adicional en donde deja todo el texto(text(t).appendTo(this); y le agrega el atributo class='indexColumn' de manera de poder identificarlo para la búsqueda, además oculta esta columna(hide).

$("#texto").keyup(function() {
    var s = $(this).val().toLowerCase().split(" ");
    

En esta parte de código se le atacha el comportamiento en el evento keyup al textbox que tenemos (cuyo id es “texto”), ahora el arreglo s tiene el valor de lo que está escrito en la caja (la primera vez una sola letra o número) , se transforma a minúsculas (recuerda que toda la columna nueva está con letras minúsculas, y el contains de Jquery es Case Sensitive) . Esto se transforma en un arreglo, si es que hay un espacio “hola como estas”, mediante la función Split Ej: S[0]=”hola”,S[1]=”como”,S[2]=”estas”.

   $(".filtrar tr:hidden").show();

Esta línea nos va a servir para  volver a mostrar los TR que ocultamos ya que no concordaban con la búsqueda y que,  al volver con el backspace deberían aparecer nuevamente.

$.each(s, function() {
        $(".filtrar tr:visible .indexColumn:not(:contains('"
        + this + "'))").parent().hide();
     }); 

Ahora, por cada elemento dentro del Arreglo, vamos a filtrar todos los tr visibles (obvio, los invisibles ya no nos sirven), en donde la columna oculta .indexColum no contenga el contenido del arreglo s, como el final del selector fue un td, llamamos al parent() (tr) y lo ocultamos.

5.-Últimos ajustes

Con esto me refiero a lo que debes tener en la grilla y es super simple, si te diste cuenta se selecciona por clase .filtrar, por lo que tu grilla debe contar con ese atributo:

<asp:GridView ID="GridView2" class="filtrar" runat="server" …

6.-Resultado

Video:

Espero que te haya sido útil, recuerda que esto te sirve para php también, próximamente subo los ejemplos de filtrar por una sola columna.

Saludos,
Gonzalo

[Tips] FireAtlas, Extensión para FireBug para traceo ASP.NET AJAX Now!

Hola, excelente noticia, se ha liberado esta excelente herramienta basada en FireBug (Herramienta imprescindible para los que desarrollamos bastante código javascript).
El asunto es que ahora podemos hacer debug dedicado a Microsoft ASP.NET Ajax

Si no quieres llegar al fina y descargarlo Right now!

Descarga de FireAtlas
http://fireatlas.chesnaistechnologies.com/Default.aspx

Descarga de FireBug
http://getfirebug.com/

Algunas características:

• PageRequestManager events tracing
• Tracing de Llamadas a WebServices
• Inspección de Updates parciales en la página a través del Panel de Firebug Net Panel
• y viene mucho más (según el website)

Recuerda que primero debes tener instalado FireBug, y luego bajar e instalar el FireAtlas, si no sabes como instalación una extensión xpi, has lo siguiente:

1 - Abrir Firefox.
2 - Ir a Archivo : Luego en Abrir archivo... y seleccionas el xpi, luego te va a pedir reiniciar Firefox.

Vas a quedar con algo parecido a la siguiente Imagen:

Ahora bien, probando en la página de prueba que te da FireAtlas :

http://fireatlas.chesnaistechnologies.com/TestZone/UpdatePanelSample.aspx

Puedes hacer un tracert e ir directamente al código Javascript generado dinámicamente por el ScriptManager:

Ahora, la pregunta, donde bajo estas maravillas:

Descarga de FireAtlas
http://fireatlas.chesnaistechnologies.com/Default.aspx

Descarga de FireBug
http://getfirebug.com/

También puedes revisar este post de como realizar pruebas unitarias con extensiones de firefox a tu javascript, esta muy bueno , es de Stephen Walther:

http://stephenwalther.com/blog/archive/2009/05/18/unit-testing-javascript-with-fireunit.aspx

Espero que les sea de Ayuda.
Saludos,
Gonzalo

Nuevos Controles de Microsoft Ajax Control Toolkit

Siguen las buenas noticias, se agregaron nuevos controles a la suite de Controles de Ajax Control Toolkit.Esta versión incluye tres nuevos controles:

HTMLEditor
El HTMLEditor te permite  crear y editar fácilmente  contenido HTML. Puedes editar en modo de diseño, como un editor de texto enriquecido, o modificar el código html directamente.

Pincha acá para ir directamente a la página de demos
Pincha acá para ir a ver un video de como se implementa.

ComboBox
El control ComboBox “extendido” en el sentido de que podemos agregar una mayor posibilidad de interacción como por ejemplo entrada de texto.

Pincha acá para ir directamente a la página de demos
Pincha acá para ir a ver un video de como se implementa.

ColorPicker
El Control ColorPicker Extender  se puede conectar a cualquier control TextBox. Ofrece del lado del cliente la funcionalidad de selección de color con la interfaz de usuario en una ventana emergente de control.

Pincha acá para ir directamente a la página de demos
Pincha acá para ir a ver un video de como se implementa.

 Espero que disfruten los videos tanto como yo!
Saludos,

Gonzalo

[Off-Topic] Que Bolso para Notebook Ocupan?

Hola amigos, les pregunto por que ya me parezco al de la foto, soy dev independiente, y hago consultorías, ando con mi portátil en mi mochila todos los días, para un lado y otro, y la espada me está matando, mi notebook no es de los más pesados, y tampoco de los más livanos, un NetBook? pero con sql server, maquinas virtuales, oracle , VS2008, apache, emmmm, nop, no quiero que se derriba(que sea realmente productivo.

No es que tenga la espalda de cristal, sino que llevo años con esto y hace dos meses que ya me duele bastante la espalda.

algún dato por ahí sobre ergonomía??

Muchas gracias!

Saludos,
gonzalo

Invocando a un método de una página ASPX desde JQuery con notación JSON.

Hola, esta es la continuación del Post:

Invocando ASP.NET WebServices desde JQuery con notación JSON.

Esta vez vamos a llamar a un método de una página aspx desde una página html.

Código ASP.NET

Partial Class demoMetodoPagina
    Inherits System.Web.UI.Page

    <Services.WebMethod()> _
  Public Shared Function Suma(ByVal a As Integer, ByVal b As Integer) As String
        Return (a + b).ToString
    End Function

<Services.WebMethod()> _
Public Shared Function ObtHora() As String
        Return Date.Now.ToString
    End Function
End Class

Recuerda que los WebMethod deben ser Shared para que puedas llamarlos con JQuery ( del lado del cliente).

Código JQuery(Es el mismo que para llamar a un WS)

<script type="text/javascript">
      $(document).ready(function() { 
        $("#Suma").click(function(event){
             $.ajax({
                 type: "POST",
                 url: "demoMetodoPagina.aspx/Suma",
                data: "{'a': '" + $('#a').val() + "','b': '" + $('#b').val() + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(msg) {
                     AjaxSucceeded(msg);
                 },
                 error: AjaxFailed
             });
         });

La explicación la puedes encontrar en:

Invocando ASP.NET WebServices desde JQuery con notación JSON.

Espero que te funcione!, cualquier cosa, me avisas.

Saludos,

Gonzalo

Invocando ASP.NET WebServices desde JQuery con notación JSON.

Hola que tal?, ayer martes 12 , hicimos un Webcast con ASP.NET & JQuery, en donde revisamos varios ejemplos, ahora bien, quiero revisar algunos que vimos de manera bastante rápida por el tiempo.

Lo bueno es que vamos a invocar al WS desde una página HTML, aunque esto igual se puede hacer con Microsoft Ajax Library, vamos a ver la potencialidad de JQuery.

Código del WService

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class Saludame
    Inherits System.Web.Services.WebService

 <WebMethod()> _
  Public Function Saludame(ByVal nombre As String) As String
        Return "Bienvenido a la charla " & nombre
    End Function
End Class

El Código es sencillo, y recuerda descomentar la línea en donde está el código:

<System.Web.Script.Services.ScriptService()> _

Que nos permite hacer las llamadas desde un script del lado del cliente.

Código JQuery

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

  <script type="text/javascript">
      $(document).ready(function() {
        $("#sayHelloButton").click(function(event){
           $.ajax({
             type: "POST",
             url: "Saludame.asmx/Saludame",
             data: "{'nombre': '" + $('#nombre').val() + "'}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function(msg) {
                     AjaxOK(msg);
                 },
                 error: AjaxError
            });
         });
     });  

function AjaxOK(result) {
  alert(result.d);
}  

function AjaxError(result) {
  alert("ERROR " + result.status + ' ' + result.statusText);
}
</script>    

Código HTML

  <form id="form1">
     <h1> Llamando  ASP.NET AJAX Web Services con jQuery </h1>
        Ingrese su Nombre:
        <input id="nombre" /> <br />
        <input id="SaludaButton" value="Saluda!"
               type="button"  />
    </form> 

Explicación

Lo que hace este código JQuery es encadenar a al evento click del botón la funcionalidad de ajax, seteamos el tipo de envío (Post) , la URL, que corresponde a la dirección web o al nombre del archivo y luego el webmethod que invocamos “Saludame”, en data van los parámetros de entrada al WS con notación JSON, recuerda que si vas a enviar más de un parámetro tienes que formatear correctamente este string. Por ejemplo, si vas a enviar dos parámetros de entrada:

data: "{'a': '" + $('#a').val() + "','b': '" + $('#b').val() + "'}",

Luego especificamos el content type, el tipo de datos y especificamos las funciones que serán invocadas si la ejecución resultó correcta(AjaxOK) o si ocurrió un error(AjaxError).

y ta tan!!

Espero que te sirva,

Gonzalo

Material Charla ASP.NET & JQuery , Una pareja explosiva!

Hola, ya esta disponible el material del evento de ASP.NET + JQuery que dimos con Leando Masotti, nos sentimos muy cómodos haciendo este Webcast, considerando que geográficamente estábamos como a 700 kilómetros de distancia, los comentarios posteriores a la charla nos confirmaron que todo había salido muy bien :). Espero que hayan disfrutado tanto como nosotros de este webcast! Abajo pego los link para las descargas.

Si quieres la presentación, descárgala Aquí.

Si quieres los demos, descárgalos Aquí

Saludos,

Gonzalo

Webcast MSDN: JQuery y ASP.NET, una pareja Explosiva

Con Leandro Masotti, estaremos dando este interesante Webcast, espero que puedan verlo!.

http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032415096&EventCategory=4&culture=es-AR&CountryCode=AR

[Off-topic] Diagrama de personalidad y acciones de un Informático