[ASP.NET MVC 3] Paginar información automáticamente con el scroll usando JQuery

Luis Ruiz Pavón — Fri, 15 Apr 2011 09:05:00 GMT

No sé sí el título será muy acertado pero lo que quiero mostrar es como cargar más información en nuestra página tal cual lo hace Facebook, Google Reader… cuando la barra de scroll llega al final. (Al final del artículo está el código de ejemplo) Para ello vamos a hacer uso de JQuery y del evento del scroll de la ventana. En este caso no necesitamos ninguna librería adicional de JQuery pues ya lo tenemos disponible...(read more)

[ASP.NET] jQuery Templates

Luis Ruiz Pavón — Tue, 11 May 2010 11:48:00 GMT

En el blog de Scoot hay un extenso artículo sobre esta nueva contribución de Microsoft a esta fantástica librería como es jQuery.

Me voy a centrar en este artículo en las templates de cliente:

¿Que són?

Pues digamos que es como una mezcla de código javascript y HTML que nos permiten generar código HTML a través de un objeto o array de objetos javascript, algo como esto:

<script id="productTemplate" type="text/html">

    <div>

        Product Id: {{= id }} <br />

        Title: {{= title }} <br />

        Description: {{= description }} <br />

        Price: € {{= price }}

    </div>

</script>

En este caso el objeto que vamos a represnetar (Product) tiene 4 propiedades (id, title, description, price) que están representadas dentro de los corchetes.

En el ejemplo que os voy a mostrar, los datos se están consumiendo de un servicio REST desarrollado con WCF.

Lo primero es la página aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <title>JQuery</title>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>How to use jQuery Templates</h2>

    <h1>List of Products</h1>

    <div id="productsContainer">

    </div>

<script id="productTemplate" type="text/html">   1:  

   2:     <div>

   3:         Product Id: {{= id }} <br />

   4:         Title: {{= title }} <br />

   5:         Description: {{= description }} <br />

   6:         Price: € {{= price }}

   7:     </div>
</script>

    <br/>

    <br/>

    <input id="btnGetProducts" type="button" value="Get Products from WCF Service!!!" />

</asp:Content>

Una vez que tenemos la página, añadimos en la master la referencia a los scripts:

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

<script src="../../Scripts/Common.js" type="text/javascript" />

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

La librería jquery.tmpl.js la podéis descargar de aquí: http://github.com/jquery/jquery-tmpl

Ahora vamos con el código del fichero Common.js:

var serviceUrl = 'http://localhost:49766/ProductService.svc';

var getAllMethod = '/products/json';

var postMethod   = '/products/json';

var deleteMethod = '/products/{id}/json';

$(document).ready(function() {

    $('#btnGetProducts').click(getProducts);

});

function getProducts() {

    var noCache = Date();

    $.getJSON(serviceUrl + getAllMethod, { 'noCache': noCache }, function process(details) {

        details.length = details.length ? details.length : 0;

        $('#opProducts').children().remove();

        if (details.length == 0) {

            alert('No Products!!!');

        else {

            alert(details);

            $("#productTemplate").render(details).appendTo("#productsContainer");

});

Lo interesante en este código es esta línea:

$("#productTemplate").render(details).appendTo("#productsContainer");

donde haciendo uso del método render al que le pasamos el array de objetos que nos devuelve el servicio REST, para que lo renderize con la template y lo añada al div productsContainer dando como resultado lo siguiente:

Y todo esto desde la parte cliente ¿No os parece acojonante?

Un saludo y atentos al siguiente ;)

Amigo mío Siempre estas Programando en .NET : ASP.NET MVC, JavaScript, JQuery

[ASP.NET MVC 3] Paginar información automáticamente con el scroll usando JQuery

[ASP.NET] jQuery Templates