Cargar datos con ASP.NET y JQuery Parte I

Que tal, después de mucho tiempo empiezo a escribir de nuevo, este es el primero de una serie de artículos que pienso escribir acerca de como trabajar con Asp .Net y Jquery, con lo que podemos crear aplicaciones realmente serias, profesionales, de gran usabilidad y bueno, con entornos bastante impactantes si sacamos provecho de la gran cantidad de plugins que se han creado para esta. En lo personal ya no puedo desarrollar alguna aplicación web sin pensar en Jquery como herramienta fundamental en mis desarrollos, en fin, después de esta carreta, manos a la obra.

Antes que nada he de suponer que ya tienes algunos conceptos básicos sobre Asp .Net y JavaScript, de todas formas esto no sera impedimento para que leas este articulo.

Lo primero que haremos sera descargar la ultima versión de esta gran librería en: http://jquery.com/

Para este ejemplo también nos introduciremos un poco a trabajar con Jquery UI que es una biblioteca hecha en Jquery y con la que podemos hacer nuestras paginas mas elegantes e interactivas, descarga la ultima versión en: http://jqueryui.com/ , adicionalmente ofrece una gran cantidad de temas visuales con la posibilidad de que personalizar cada uno.

En este punto ya estamos listo para empezar a trabajar, así que sin mas preámbulos abre visual studio y crea un nuevo proyecto web, o si prefieres algo gratis puedes descargar MonoDevelop en http://monodevelop.com/ que no tiene costo y es realmente bastante bueno.

Dentro del proyecto debemos agregar las librerias que descagamos:

Observa que hay una carpeta llamada cupertino, este es el tema que yo he utilizado de jqueryui, como te mencionaba anteriormente podemos elegir entre muchos temas visuales para descargar.

Para este ejemplo tambien crearemos una nueva base de datos:

seguido a esto crea una tabla llamada clientes

Bien, existen muchas formas con las que podemos realizar operaciones con bases de datos desde .net, a mi me gusta trabajar con ADO.NET Entity Data Model para esto, si conoces otro metodo puedes usarlo, lo importante es que vamos a crear la funcion que se encargara de retornar los datos.

Agregaremos entonces un nuevo elemento Entity Data Model:

Establecemos la conexión a la base de datos:

Al final vermos algo como esto:

A continuacion agrega un archivo de servicio web a tu proyecto con el nombre ClientesWS.asmx 

Al abrir el archivo encontraras una linea comentada como esta:

// [System.Web.Script.Services.ScriptService]

Debes quitarle el comentario, para que podemos acceder mas adelante a los metodos de este web service desde jquery.

Crearemos el método encargado de retornar los datos de la tabla clientes, el codigo quedaria de la siguiente forma:

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace AspJqueryParteI
{

  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]
  [System.Web.Script.Services.ScriptService]
  public class ClientesWS : System.Web.Services.WebService
  {

    // Retornar listado de clientes
    [WebMethod]
    public List ListarClientes()
    {
      //BDejemploEntities representa el objeto con el que podemos realizar operaciones con la base de datos
      using (BDejemploEntities entidades = new BDejemploEntities())
      {
        //Creamos la consulta a la base de datos utilizando Linq
        var clientes = (from c in entidades.clientes orderby c.nombre ascending select c).ToList();

         return clientes;
      }
    }

  }
}

Ahora creemos un nuevo archivo js llamado clientes.js, desde aca llameros el metodo ListarClientes de nuestro servicio web y mostraremos los resultados en una pagina aspx, bien, agregar el siguiente codigo al archivo:

//Bueno, para entenderlo mejor esto viene siendo como el Page_Load de una pagina aspx, en este caso aca se inserta y llaman todas las funciones javascript que se van a ejecutar al cargar la pagina
$(document).ready(function () {

    //Nota: En jquery llamamos cualquier elemento mediate $("#nombre_elemento"), por ejemplo, en c# para obtener el texto de una caja de texto lo harias con tcaja_texto.text, en jquery esto seria equivalente a $("#tcaja_texto").val()

    //Combinando Jquery y Jquery UI
    //Crearemos el boton bListarClientes que se encargar de llammar la funcion ListarClientes
    $("#bListarClientes").button({ //Opciones del boton JqueryUI
        label: "Cargar Clientes",
        icons: {
            primary: "ui-icon-document"
        }
    }).click(function () { //Evento al hacer click en el boton
        ListarClientes();
    });
    //dentro de la pagina web debemos crear un div con id=bListarClientes

});

//Funcion encargada de invocar el metodo ListarClientes del webservice y mostrar la informacion dentro de la pagina aspx
var ListarClientes = function () {

    //Utilizamos la funcion ajax de jquery para invocar el metodo ListarClientes de nuestro servicio web
    $.ajax({
        type: "POST",
        url: "ClientesWS.asmx/ListarClientes", //Direccion del servicio web segido de /Nombre del metodo a llamar
        data: "{}", //Esto se utiliza si deseamos pasar algun paramentro al metodo del servicio web ejm: {'indentificacion':'1234'}
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Esto quiere decir que los datos nos llegaran como un objeto json
        success: function (response) { //Aca se recibe la respuesta del metodo llamado

            //llenamos el objeto datos_clientes con la lista de clientes que nos retorno el metodo del servicio web
            var datos_clientes = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

            //Recorremos los registros
            for (var i = 0; i < datos_clientes.length; i++) {
                var identificacion = datos_clientes[i].identificacion;
                var nombre = datos_clientes[i].nombre;
                var email = datos_clientes[i].email;
                var telefono = datos_clientes[i].telefono;

                //Escribimos los datos mediante jquery en la tabla tbl-clientes que crearemos en la pagina web
                $("#tbl-clientes tbody").append("<tr><td>" + identificacion + "</td>" + 
                                                              "<td>" + nombre + "</td>" +
                                                              "<td>" + telefono + "</td>" +
                                                              "<td>" + email + "</td>");

} } });}

Casi terminamos, solo nos queda agregar nuestra pagina aspx llamada default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AspJqueryParteI._default" %>

<!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">
    <title>Cargar datos con Asp.Net y Jquery</title>
    
    <link href="jquery/cupertino/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
    
    <script src="jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="jquery/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>

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

    <style type="text/css" >
        body{font: 67% "Trebuchet MS" , sans-serif;}
        table { margin: 1em 0; border-collapse: collapse; width: 100%; }
	    table td{  border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	    table th { font-weight:bold; border: 1px solid #eee; padding: .6em 10px; text-align:center;}
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Cargar datos con Asp.Net y Jquery</h2>

        <div id="bListarClientes">Cargar Clientes</div>

        <table id="tbl-clientes"  class="ui-widget ui-widget-content" >
            <thead>
                <tr class="ui-widget-header">
                    <th>Identificacion</th>
                    <th>Nombre</th>
                    <th>Telefono</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
    </form>
</body>
</html>

para finalizar te explico lo siguiente del codigo anterior: Agregamos las librerias de jquery a nuestra pagina y la hoja de estilos de jqueryui

<script type="text/javascript" src="jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.11.custom.min.js"></script>

Agregamos las libreria javascript que hemos creado para el ejemplo:

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

Este div es el que convertimos en un boton en nuestra libreria:

</pre>
<div id="bListarClientes">Cargar Clientes</div>
<pre>

La tabla donde mostraremos los datos:

</pre>
<table id="tbl-clientes" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header">
<th>Identificacion</th>
<th>Nombre</th>
<th>Telefono</th>
<th>Email</th>
</tr>
</thead>
</table>
<pre>

Al final de todo este sera el resultado del ejemplo:

Espero les sirva, pronto explicare otros ejemplos mas avanzados sobre el tema.
Descarga el codigo fuente del ejemplo

• asp
• datos
• javascript
• jquery
• jqueryui
• net