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.

<script type="text/javascript" language="javascript">

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>

<div id="myGrid"></div>

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

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:

      <search enabled="true">

        <providers>

          <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">

     <SelectParameters>

         <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>

                        <ul id="itemcontainer" runat="server" ></ul>

</LayoutTemplate>

<ItemTemplate>

                        <li>

         <ul>

         <a  href='<%# Eval("Url") %>'> <%#Eval("Title") %></a><br />         

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

          <a href='<%# Eval("Url") %>'> <%#Eval("Url") %></a><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.

• Microsoft ASP.NET Futures (July 2007)
• Enabling Search for your Web Site with ASP.NET AJAX
• Search Provider Example

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>

        <ul id="itemcontainer" runat="server" class="players_list"></ul>

     </LayoutTemplate>

     <ItemTemplate>

         <li>

             <img src='<%#Eval("Photo") %>' /><br/>

             <%#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">

            <Fields>

                <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.