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

0
43

Descargar ejemplo DotNetcr_ToDoList.zip

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 función 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 el DetailsView 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 ejemplo DotNetcr_ToDoList.zip

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

Con más de 18 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español.

royrojas.com | dotnetcr.com

Dejar respuesta

Please enter your comment!
Please enter your name here