WCF jQuery Support

Últimamente el equipo de Microsoft dedicado al desarrollo de WCF ha venido desarrollando algunos proyectos que mejoren nuestra experiencia al desarrollar aplicaciones con WCF y especialmente en el consumo de nuestros servicios a través de clientes HTTP, una de estas iniciativas es el proyecto WCF Support for JQuery , dicho proyecto consiste en un API que nos permite que nuestros clientes web interactúen fácilmente con nuestros servicios WCF a través del intercambio de objetos JSON .

Por otra parte este proyecto es de código abierto y lo podemos encontrar en wcf.codeplex donde además de este proyecto ser irán sumando otros proyectos que el equipo de WCF vaya desarrollando para extender el desarrollo de WCF.

Cuando instalen el paquete de instalación WCF jQuery Support, este añadirá una nueva plantilla entre nuestras aplicaciones web que además nos muestra un sencillo ejemplo de como empezar a usar esta API y como consumir y enviar objetos JSON desde nuestro cliente WEB.

La documentación de este proyecto aún está en proceso de desarrollo pero puede ver sus avances aquí.

Además dos ejemplos: Envió de datos de un formulario HTML y Manejando una colección de objetos desde el servicio.

Los plugins para JQuery desarrollados por Microsoft ahora forman parte de los plugins oficiales para JQuery

El día de ayer Scott Guthrie anuncio en su blog que los plugin  jQuery Templates pluginjQuery Data Link plugin, y  jQuery Globalization plugin ahora forman parte de los plugin oficiales de Jquery lo cual reafirma las intenciones de Microsoft de seguir impulsando el famoso framework javascript y el ahora visto bueno de la Software Freedom Conservancy admitiendo estos plugin como parte del grupo de plugins oficiales de Jquery.

Por otro lado actualmente Microsoft ofrece soporte para Jquery y en el nuevo Visual Studio 2010 cuando creamos aplicaciones ASP.NET Web Forms and ASP.NET MVC por defecto vienen incluidas las librerías de Jquery.

Por mi parte pienso que Microsoft y el equipo de ASP.NET apunta en la dirección correcta y espero que sigan liberando nuevos plugins.

Artículos de Jquery en este blog.

Crear calendario con JQuery/ Create a Date Picker using JQuery

The purpose of this control is show up a calendar where the user can pick a date, all the jquery libreries  needed has been directly referenced from the Google CDN.

We can get and set the value of the control through the text property of the control and also we can change the calendar culture as we can see in the line datepicker($.datepicker.regional['es']).

El propósito de este control es mostrar un calendario donde el usuario puede elegir una fecha, todas las librerías jQuery necesarias se referencian desde el CDN de Google.

Podemos obtener y establecer el valor del control a través de la propiedad de text del control y también podemos cambiar la cultura de calendario como podemos ver en la línea datepicker($.datepicker.regional['es']).

The Control:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Calendar.ascx.cs” Inherits=”Calendar” %>

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”

type=”text/javascript”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js”

type=”text/javascript”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js”

type=”text/javascript”></script>

<script type=”text/javascript”>

$(function() {

$.datepicker.setDefaults($.datepicker.regional['']);

$(“#<%=datepicker1.ClientID %>”).datepicker($.datepicker.regional['es']);

});

</script>

<div>

<asp:Label ID=”lblFecha” runat=”server” Text=”Fecha: “></asp:Label>

<asp:TextBox ID=”datepicker1″ runat=”server”></asp:TextBox>

</div>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class Calendar : System.Web.UI.UserControl

{

public string text

{

get { return datepicker1.Text ; }

set { datepicker1.Text = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

}

}

The Page :

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default”%>

<%@ Register src=”calendar.ascx” tagname=”calendar” tagprefix=”uc3″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

</head>

<body>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”sp1″ runat =”server”>

</asp:ScriptManager>

<div>

<uc3:calendar ID =”calendar1″ runat =”server” />

</div>

</form>

</body>

</html>

You can download the code from here/ Puedes descargar el codigo desde aqui.

Efecto Page Curls usando JQuery

JQuery además de ayudarnos a hacer nuestras aplicaciones mas rápidas y ahorrarnos los postback en nuestros formularios Asp.Net , también nos puede ayudar a crear algunos efectos interesantes en nuestras páginas.  Para esto solo necesitamos el plugin para Jquery the-sexy-curls-jquery-plugin que pueden descargar de aquí.

El siguiente es un ejemplo que muestra lo fácil de usarlo.

<html xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”>

<script  type =”text/javascript”  src=”turn/jquery.min.js”>

</script><script type =”text/javascript”  src=”turn/jquery-ui.min.js”></script>

<script type =”text/javascript”  src=”turn/turn.js”></script><link rel=”stylesheet” href=”turn/turn.css”>

<script type=”text/javascript”>

$(document).ready(function () {        $(‘#target’).fold();    });

</script>
</head>

<body>

<form id=”form1″ runat=”server”>    <div>

<img id=”target” src=”turn/imagen.png” alt=”">          </div>

</form>

</body>

</html>

El ejemplo lo pueden descarga de aquí.

Plugin de Globalizacion para JQuery

Microsoft  sigue colaborando con jQuery, ya antes habían creado un plugin para realizar plantillas vinculadas a datos en JQuery y mas recientemente han creado un plugin para establecer parámetros de Globalización de nuestra aplicación web desde Jquery de esta manera podemos adaptar nuestras paginas rápidamente a la cultura del usuario, podemos cambiar formatos de fechas, monedas, etc , además incluye 350 culturas . Por lo que vemos Microsoft sigue apoyando de manera activa a JQuery por lo que es una clara invitación a los desarrolladores web de ASP.NET a empezar usar este cada vez mas popular framework JavaScript.

Para mas información sobre como funciona el plugin y descargar algunos ejemplo entren al siguiente post del blog de Scott Guthrie.

Usando JQuery y Ajax para llenar un DropDownList y otros ejemplos prácticos.


El código que pueden ver en este post hace varias cosas que son muy típicas en cualquier aplicación Web , como llenar un dropdownlist en la carga inicial, llenar otro dropdownlist en función del valor del primero, y crear una tabla con algunos valores, la diferencia es que todo lo haremos del lado del cliente usando el framework javascript JQuery y comunicándonos con algún web services que nos devolverá los datos que necesitamos en formato JSON.
Si todavía alguno se pregunta cual es la ventaja de hacer esto con JQuery y del lado del cliente, pues dicha ventaja esta en que nos ahorramos las idas y venidas al servidor y pasar por todo el ciclo de carga de la pagina cuando hace postback lo cual implica envió innecesarios de datos al servidor aunque estemos usando Ajax o un updatepanel, por lo que hacerlo con JQuery y Ajax siempre será mas eficiente.

Seguir Leyendo…

Instrucciones Básicas con JQuery

A continuación le dejo algunas instrucciones básicas de JQuery con las que se pueden empezar si se quieren ir familiarizando con este framework javascript.

Además les dejo este enlace donde pueden acceder a una JQuery CheatSheet creada por la gente de colorcharge que además está bastante completa y muy bien hecha.

Seguir Leyendo…

DNJ un Framework JQuery para .Net

DNJ  es un Framework JQuery para desarrollo de aplicaciones ASP .Net el mismo trata de hacernos la vida mas facil a la hora realizar desarrollos basados en el uso constante de JQuery y Ajax, por medio de DNJ podemos realizar llamadas a métodos de manera remota y provee muchas otras funciones  para extender el comportamiento Ajax de nuestros controles entre ello la posibilidad de convertir todos nuestros controles web en controles ajax.

Por otra parte DNJ posee una serie de controles JQuery UI que ademas son wysiwyg y entre los cuales se encuentran Tabs, accordion, Datepicker, slider y themeswitcher.

En mi opinión es una buena alternativa para aplicaciones cargadas con mucho logica del lado del cliente y que aprovecha las bondades de JSON y JQuery.

Para visitar la pagina de DNJ pueden hacer click aquí donde además de descargar el Framework DNJ tendrán acceso a la documentación.