botecnologia

Cargar datos con ASP.NET y JQuery Parte I
may 4
Posted by handark
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 provechode 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 estearticulo.
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 detemas 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 tuproyecto 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:
ver fuenteimprimir?
01
using System;
02
using System;

03
using System.Collections.Generic;
04
using System.Linq;

05
using System.Web;
06
using System.Web.Services;

07
  
08
namespace AspJqueryParteI

09
{
10
  

11
  [WebService(Namespace = "http://tempuri.org/")]
12
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

13  [System.ComponentModel.ToolboxItem(false)]
14
  [System.Web.Script.Services.ScriptService]

15
  public class ClientesWS : System.Web.Services.WebService
16
  {

17
  
18
    // Retornar listado de clientes

19
    [WebMethod]
20
    public List ListarClientes()

21
    {
22
      //BDejemploEntities representa el objeto con el que podemos realizar operaciones con la base de datos

23      using (BDejemploEntities entidades = new BDejemploEntities())
24
      {

25
        //Creamos la consulta a la base de datos utilizando Linq
26
        var clientes = (from c in entidades.clientes orderby c.nombre ascending select c).ToList();

27
  
28
         return clientes;

29
      }
30
    }

31
  
32
  }

33
}
Ahora creemos un nuevo archivo js llamado...