Aplicación Web To-Do List o Task List utilizando Ajax y ASP.NET 2005

Descargar solución DotNetcr_ToDoList

En esta ocasión vamos a realizar una aplicación de tareas (To-Do List) similar a la que nos puede proveer el Outlook, y la vamos a programar con Ajax y ASP.NET.

En este ejemplo vamos a necesitar:
- Visual Studio 2005 o Visual Studio Express Editions (http://msdn2.microsoft.com/en-us/express/aa974185.aspx)
- SQL Server 2005 o SQL Server 2005 Express Editions (http://msdn2.microsoft.com/en-us/express/bb410791.aspx)
- ASP.NET 2.0 AJAX Extensions 1.0 (http://asp.net/ajax/downloads/)
- ASP.NET AJAX Control Toolkit (http://asp.net/ajax/downloads/)

Generalmente en internet se encuentran muchos ejemplos de Ajax 2.0, pero estos han sido creados con el wizard que provee Visual Studio, o han sido desarrollados sin una estructura adecuada, como en la vida real deben tener los programas (Conexion, Capas, etc.).

En siguiente ejemplo se conecta a una base de datos SQL Server 2005, a través de una clase conexión que llama procedimientos almacenados, un ejemplo que no se encuentra con regularidad en sitios de desarrollo.

La clase conexión que vamos a utilizar es la misma que hemos venido utilizando en otros ejemplos en este sitio web y que ha evolucionado después de cada aplicación desarrollada.

El único cambio que debemos realizar en la clase conexión serian los parámetros de dicha clase, nombre o dirección de servidor, nombre de base de datos, usuario y password. Buscamos la región Constructor y Variables de Conexión y le definimos nuestros propios parámetros.

El siguiente paso es crear una clase llamada nTareas.vb, esta clase funciona como una especie de capa de negocios, y podría estar dentro de otra solución dll o dentro de un web service, que funcionaría igual a como lo hacemos aquí. En nTareas vamos a tener los metodos Get, Insert, Update y Delete de Tareas

nTareas.vb

El siguiente paso sería desarrollar la capa de presentación y ahora si, la parte que va a invocar el Ajax.

Primero que todo debemos instalar ASP.NET 2.0 AJAX Extensions 1.0 y ASP.NET AJAX Control Toolkit las cuales de descargan en http://asp.net/ajax/downloads/

Vamos a tener 3 controles para este ejemplo, un DropDownList, un GridView y un DetailsView y para unirlos a los 3 vamos a agregar un ObjectDataSource.

El GridView lo vamos a asociar al ObjectDatasource que hemos agregado y le definimos las propiedades que vamos a necesitar, en este caso solo Enable Paging y Enable Editing. También si desean ya el código está preparado para habilitar Enable Deleting.

De la misma forma como hicimos con el GridView lo vamos a hacer con el DetailsView, asociarlo al ObjectDataSource, pero en este caso le vamos a definir en las propiedades Enable Inserting

Ahora debemos configurar el ObjectDataSource, definirle las propiedades e indicarle a cual funcion va a llamar dependiendo de cada evento.

Como podemos ver en el código, cada una de las propiedades esta asociada a algún método dentro de nTareas, por ejemplo UpdateMethod=”UpdateTareas” y en la propiedad TypeName la asociamos a la clase correspondiente pero funcionaría de igual forma con un web service o cualquier componte externo. Ahora en las siguientes agrupaciones le definimos la a cada método los parámetros correspondientes los cuales deben estar en el mismo orden y mismo tipo de los de la clase.

ObjectDataSource

Para introducir Ajax debemos agregarle a nuestro código las etiquetas ScriptManager

Luego de agregarlas se deberían ver algo así

Luego de tener nuestros controles en la página y el script manager vamos a encapsular el GridView y elDetailsView dentro del componente UpdatePanel, el cual nos va a dar el efecto Ajax dentro del sitio web.

Y el código para el GridView debería verse algo así

Y para el DetailsView debería verse algo así

El script de la base de datos se encuentra en dentro de los archivos del documento adjunto.

Ya teniendo todo esto listo solo quedaría ejecutar la aplicación y probar nuestra aplicación Ajax en nuestro Browser.

Descargar solución DotNetcr_ToDoList

La base de este código ha sido tomado de http://www.asp.net/ajax/, agregandole funcionalidad y haciendo funcional para un caso de la vida real.

3 comments

  1. Anónimo - December 11, 2007 10:33 am

    que tal amigo disculpa mi ignorancia pero como le hago para crear la base de datos, no puedo probar el ejemplo porque no tengo base de datos

    Reply
  2. Anónimo - October 23, 2008 10:41 pm

    arriba encontraras unos links SQL Server 2005 o SQL Server 2005 Express Editions (http://msdn2.microsoft.com/en-us/express/bb410791.aspx) necesitas descargarte el sql express edition, es una version gratuita de sql y ahi tendras tu base de datos. el script de creacion de la base de datos esta en el archivo adjunto en este articulo

    Reply
  3. Anónimo - January 28, 2010 9:57 pm

    en el link de descarga esta el script de la base de datos

    Reply

Have your say