.Net Adventure Center: ASP.Net

Integrando YUI con ASP.NET MVC

Mon, 14 Jul 2008 04:31:29 GMT

Si han estado trabajando o al menos le han dado una mirada al ASP.NET MVC framework, sabrán que a diferencia del ASP.NET tradicional, no se encuentran disponibles al menos de momento controles como por ejemplo el GridView, este vacío lo podemos llenar con una gran cantidad de controles de terceros que fueron creados para trabajar sobre alguna de las diversas librerías JavaScript que hay en este momento dando vueltas, una de las mejores y más completas librerías a mi entender es YUI (The Yahoo! User Interface Library) , la misma viene repleta de controles y una excelente documentación, que hacen que su implementación sea algo relativamente sencillo.

Para mostrar lo fácil que es integrar YUI a nuestras soluciones ASP.NET MVC, vamos a crear una aplicación de ejemplo en el que utilizaremos los controles DataSource y DataTable de YUI para consumir un feed Json creado con el nuevo JsonResult.

Para comenzar empezaremos con el código del Controller.

public JsonResult GetPlayersList()

{

OranjeDataContext ctx = new OranjeDataContext();

var data = (from player in ctx.Players

select player).ToList<Player>();

return this.Json(new { players = data.ToArray() }, "text/html");

}

En el podrán observar que estoy utilizando el nuevo JsonResult que es un nuevo tipo de ActionResult que nos permite serializar la salida en formato Json, lo demás es solo una query LinqToSql y un poco de formateo en la forma de exponer el código Json, ya que la DataTable de YUI espera recibir la data de la siguiente manera.

Notaran que antes de la data propiamente dicha la DataTable de YUI espera obtener el nombre de la entidad expuesta.

Bien, el siguiente paso es consumir la data en la View, para ello lo primero que haremos será crear las referencias a los archivos JavaScript necesarios, para ello pueden utilizar el YUI Dependency Configurator, el cual indicándole los controles a implementar nos indicara los archivos que debemos utilizar.

Lo siguiente es consumir la data, para ello deberemos de incluir el siguiente código en la vista.

YAHOO.util.Event.addListener(window, "load", function() {

YAHOO.example.PopulateGrid = new function() {

var myColumnDefs = [

{key:"PlayerId", label:"Id"},

{key:"Name"},

{key:"Number"},

{key:"Age"},

{key:"Caps"},

];

this.myDataSource = new YAHOO.util.DataSource("Home/GetPlayersList?");

this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

this.myDataSource.responseSchema = {

resultsList: "players",fields: ["PlayerId","Name","Number","Age","Caps"]};

this.myDataTable = new YAHOO.widget.DataTable("myGrid", myColumnDefs, this.myDataSource);

};

});

</script>

En el podrán observar que creamos un evento que se dispara cuando se carga la vista, luego hay una función en la cual definimos las columnas a utilizar por nuestro DataTable, configuramos el DataSource el cual referencia al método que devuelve el Json serializado desde el Controller, a continuacion seleccionamos los campos de la entidad que utilizaremos y por ultimo creamos el DataTable al cual le pasamos los valores antes asignados mas el Id del elemento HTML en el cual queremos que se cree.

Si todo sale bien, deberían de ver en el browser algo parecido a lo que se aprecia en la imagen siguiente, en la misma también podrán notar la salida del JsonResult.

Aquí concluye este ejemplo, si desean seguir investigando la gran cantidad de características que se incluyen en el control DataTable, como así también los demás controles que forman parte de YUI lo pueden hacer en los siguientes links.

The Yahoo! User Interface Library (YUI)

Yahoo! User Interface Blog

ASP.NET Future : SearchDataSource

Wed, 12 Sep 2007 05:34:33 GMT

Entre los controles que componen ASP.Net Futures, se encuentra el SearchDataSource, el nombre mismo del control me llamo la atención y me puse a investigar un poco su funcionamiento, este control nos permite integrar fácilmente búsquedas en nuestros sitios web, estas búsquedas pueden provenir de diferentes providers, yo lo probé contra Live Search, pero es posible crear nuestro propio provider.

Para comenzase necesitamos tener instalado ASP.Net Futures July 2007 CTP y Visual Studio 2008, luego de tener todo instalado nos dirigiremos a http://search.msn.com/developer, para conseguir la clave que nos permitirá consultar el servicio de búsquedas de Live Search, para ello seleccionaremos Create and Manage Application IDs, luego de ingresar nuestra LiveID nos dirigiremos a Get a new AppID, terminado este paso anotaremos el ID que hemos generado.

Ahora crearemos un ASP.NET Futures Web Site tal como se ve en la siguiente imagen.

Abrimos el web.config y nos dirigimos a la siguiente sección:

<add name="WindowsLiveSearchProvider"

type="Microsoft.Web.Preview.Search.WindowsLiveSearchProvider, Microsoft.Web.Preview"

appID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

siteDomainName="xxxxxx.xxxx.xxx" />

</providers>

</search>

En appID ingresaremos el ID que generamos previamente y en siteDomainName añadiremos el nombre de dominio contra el que queremos hacer consultas, si lo que desean es hacer búsquedas en toda la web eliminaremos esta propiedad.

Abrimos el archivo Default.aspx y agregamos un TextBox con el nombre TextBoxSearch y un Button con el nombre ButtonSearch, luego arrastraremos el SearhcDataSource a nuestra página y lo configuraremos de la siguiente manera.

<asp:SearchDataSource ID="SearchDataSource1" runat="server">

<asp:ControlParameter ControlID="TextBoxSearch" Name="query" />

</SelectParameters>

</asp:SearchDataSource>

Terminado esto arrastraremos también un control ListView, el cual configuraremos de la siguiente forma para mostrar el resultado de nuestras consultas.

<asp:ListView ID="ListView1" runat="server" DataSourceID="SearchDataSource1">

</LayoutTemplate>

<li>

<ul>

<%#Eval("Description") %><br/>

</ul>

</li>

</ItemTemplate>

</asp:ListView>

Para finalizar configuraremos el evento click de ButtonSearch para que haga el DataBind de nuestro SearchDataSource.

protected void ButtonSearch_Click(object sender, EventArgs e)

{

SearchDataSource1.DataBind();

}

Ya con esto tenemos todo listo, cabe aclara que este servicio solo nos provee diez resultados por consulta lo cual a mi entender es muy poco, pero como dije anteriormente tenemos la posibilidad de crear nuestro propio provider con lo cual podemos subsanar esta limitación, después de esta aclaración podemos pasar a probar nuestra aplicación, la cual debería lucir más o menos como en la siguiente imagen.

Si desean conocer más acerca de este control y de cómo crear sus propios providers, a continuación les dejo algunos links que les serán de utilidad.

Nuevos controles en ASP.NET 3.5

Wed, 15 Aug 2007 05:47:39 GMT

Entre las novedades de ASP.NET 3.5 se encuentran los controles ListView, DataPager y LinqDataSource, para mostrarles el funcionamiento de cada uno de ellos prepare esta pequeña demo donde podrán apreciar las funcionalidades básicas de los mismos.

Para comenzar vamos a definir nuestro modelo de datos usando el designer de Linq To SQL, para ello vamos a agregar un archivo dbml a nuestra solución.

Luego arrastraremos las tablas de las cuales obtendremos los datos al designer.

Ahora es tiempo de crear un nuevo Data Source, para ello arrastraremos a nuestra página un control LinqDataSource y pasaremos a configurarlo, primero elegiremos el contexto que vamos a utilizar.

Luego seleccionaremos la tabla y campos que consultaremos.

Finalizado este paso, es tiempo de añadir a nuestra página un ScriptManager, un UpdatePanel y dentro de este ultimo un control ListView, luego pasaremos a la parte de código y configuraremos el control de la siguiente manera.

<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource1" >

</LayoutTemplate>

<li>

<%#Eval("Name") %><br/>

Position: <%#Eval("Position") %>ǀ Age: <%#Eval("Age") %><br/>

</li>

</ItemTemplate>

</asp:ListView>

Como podrán apreciar he configurado el DataSourceID para que use el LinqDataSource que creamos previamente, luego agregue un elemento LayoutTemplate, el cual será el contenedor de nuestros datos y finalmente añadí un ItemTemplate, el cual define la apariencia de cada uno de los items a presentar, tanto el LayoutTemplate como el ItemTemplate, son los elementos del ListView que más se van a utilizar, pero el mismo posee muchos más, que nos permiten configurar y personalizar aun más la apariencia del mismo.

Como último paso, agregaremos un control DataPager, el cual nos permitirá añadir la función de paginación al ListView, para ello arrastraremos un control DataPager a nuestra página y lo configuraremos de la siguiente manera.

<asp:DataPager ID="DataPager1" runat="server" class="pager" PagedControlID="ListView1" PageSize="10">

<asp:NumericPagerField />

</Fields>

</asp:DataPager>

La configuración de este control es muy simple, solo debemos seleccionar a que control lo vamos a enlazar utilizando la propiedad PagedControlID, en este caso será nuestro ListView, luego elegiremos la cantidad de items por página y la apariencia del mismo, yo en este caso elegí NumericPagerField, pero hay un par de opciones más que podemos utilizar.

Cabe aclarar que por el momento el DataPager que viene incluido en la Beta 2 de Orcas no trabaja muy bien con consultas personalizadas, así que tengan esto en cuenta si comienzan a experimentar con estos controles.

Ya para terminar les dejo una imagen de los controles en funcionamiento.

AJAX Control Toolkit build 10606

Thu, 07 Jun 2007 01:53:23 GMT

Luego de tres meses de espera el equipo del AJAX Control Toolkit presento una nueva release de su suite de controles para ASP.NET, en esta oportunidad no se han agregado nuevos controles, pero se han arreglado aproximadamente 120 bugs y se han añadido nuevas funcionalidades a controles ya existentes, por ejemplo el AutoComplete ahora tiene la capacidad de utilizar animaciones en su despliegue, el control NumericUpDown ahora cuenta con la opción de seleccionar un rango de números y el control Tab se puede modificar en la vista de diseño, por último se le han agregado iconos a los controles cuando estos se encuentran en la toolboox de Visual Studio entre otras mejoras.

Download AJAX Control Toolkit build 10606

AJAX Control Toolkit build 10301

Fri, 02 Mar 2007 15:09:10 GMT

Esta nueva release del AJAX Control Toolkit aparte de las mejoras de siempre en compatibilidad y corrección de errores, trae como novedad el soporte para localización, themes y dos nuevos controles el SlideShowExtender y el ListSearchExtender de los cuales les hable hace un tiempo, el primero permite crear pequeñas y simples galerías de imágenes extendiendo las funciones del control Image y el segundo permite a media que vamos ingresando caracteres buscar entre los ítems de una ListBox o un DropDownList.

Download AJAX Control Toolkit build 10301

Personalizando el CreateUserWizard

Fri, 19 Jan 2007 22:23:15 GMT

Hoy Francisco Jimenez Bravo de la Comunidad ITGroup de Chile me envió un mail preguntándome como agregar más campos al CreateUserWizard de ASP.Net, mi recomendación fue que leyese un artículo que Scott Guthrie escribió en su blog hace un tiempo comentando como hacer esto y otras cosas más, puedes ver dicho artículo en este enlace:

How to add a Login, Roles and Profile system to an ASP.NET 2.0 app in only 24 lines of code

Ahora bien, si necesitas respuestas rápidas o el ingles no se te da, he armado un pequeño resumen del mismo.

Para comenzar debemos arrastrar un control CreateUserWizard en nuestra aplicación, luego seleccionamos la SmartTag Customize Create User Step para poder editar la apariencia y el contenido del control.

Francisco me comento que una de los campos que le interesaba agregar era el numero de RUT, o como le decimos en Argentina el numero de CUIT, si ven en la siguiente imagen he agregado una fila y un TextBox al cual le di el nombre de TextRUT.

El paso siguiente es escribir la lógica para que los datos extras se graben en el profile del usuario, para ello daremos doble click sobre el CreateUserWizard, con esto crearemos el evento y le agregaremos las siguientes líneas de código.

protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)

{

ProfileCommon customProfile = (ProfileCommon)ProfileCommon.Create(CreateUserWizard1.UserName, true);

customProfile.RUT = ((TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("TextRUT")).Text;

customProfile.Save();

}

El código habla por sí mismo, en la primera línea creó un profile para el nuevo usuario, en la segunda le paso el valor de la TextBox para que pueble la propiedad RUT del profile y por ultimo grabo los datos.

Para ir finalizando debemos asegurarnos de declarar en el web.config el uso de profiles y de las correspondientes propiedades.
Si están usando los providers que viene por defecto en ASP.Net solo deben agregar estas líneas a su web.config

</properties>

</profile>

En cambio si están usando un Membership y Role Provider personalizados, prueben con estas líneas

<add name="MyProfileProvider"

connectionStringName="DemoWizard"

applicationName="/"

type="System.Web.Profile.SqlProfileProvider" />

</providers>

</properties>

</profile>

Identificando la IP de tus clientes

Fri, 19 Jan 2007 04:10:08 GMT

Es posible que en algún desarrollo con ASP.Net necesites saber la dirección IP del cliente que accede a tu aplicación, bien con ASP.Net es muy fácil obtener esta información, solo mira las siguientes líneas de código.

public string getIP()

{

string clientIP;

clientIP = HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"];

if (clientIP == null)

{

clientIP = HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];

}

return clientIP;

}

La primera línea declara la variable clientIP y luego comprueba si la variable de servidor HTTP_X_FORWARDED_FOR es nula, esto es para identificar si el cliente esta accediendo a la aplicación de forma directa o a través de un proxy.

Añadiendo unas pocas líneas de código mas a estas desarrolle una aplicación web que es accedida por un gadget para la sidebar de Windows Vista que te permite visualizar tu dirección IP pública.

Download My Public IP Gadget