DotNetcr.com
Si deseas hacer un intercambio de links con DotNetcr, escríbenos aquí
Recibe las actualizaciones vía RSS
Te invitamos a unirte en nuestras redes
   http://www.facebook.com/DotNetcr
   http://www.twitter.com/dotnetcr

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

Por royrojas | 8/21/2007 | Visitas 14,291 | Voto 5.00
Aplicacíon ASP.NET y Ajax, utilizando controles DropDown List, GridView y DetailsView asociados por un ObjectDataSource, conectada a una base de datos via nuestra clase Conexion e invocando procedimientos almacenados
Categorías : VB.NET, ASP.NET, SQL Server, Ajax
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.

#Region " Constructor y Variables Conexion **** "
Public Sub New()
Try
'Esta seccion de variables de la conexion
'prefiero hacerlo asi, en lugar de un archivo conexion
Me.Servidor = "WINXP-DEV"
Me.BaseDatos = "dotnetcr_test"
Me.Usuario = "USR_ASPNET"
Me.Password = "pwd123"

SQLConn = New SqlConnection(Me.StrConexion)
Catch ex As Exception
Throw ex
End Try
End Sub
#End Region


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
Imports Microsoft.VisualBasic

Public Class nTareas

Public Function GetTareas(ByVal Completo As Boolean) As Data.DataTable
Try
Dim sp As New StoredProcedure("DN_TraerTareas")

sp.AgregarParametro("Completo", Completo)

Return sp.ReturnDataSet.Tables(0)
Catch ex As Exception
Throw New Exception("Error cargando datos de las tareas")
End Try
End Function

Public Sub InsertTareas(ByVal Nombre As String, _
ByVal Completo As Boolean)
Try
Dim sp As New StoredProcedure("DN_CrearTareas")

sp.AgregarParametro("Nombre", Nombre)
sp.AgregarParametro("Completo", Completo)

sp.Execute()
Catch ex As Exception
Throw New Exception("Error agregando datos de las tareas")
End Try
End Sub

Public Sub UpdateTareas(ByVal Original_Id As Integer, _
ByVal Nombre As String, _
ByVal Completo As Boolean)
Try
Dim sp As New StoredProcedure("DN_UpdateTareas")

sp.AgregarParametro("Id", Original_Id)
sp.AgregarParametro("Nombre", Nombre)
sp.AgregarParametro("Completo", Completo)

sp.Execute()
Catch ex As Exception
Throw New Exception("Error actualizando datos de las tareas")
End Try
End Sub

Public Sub DeleteTareas(ByVal Original_Id As Integer)
Try
Dim sp As New StoredProcedure("DN_DeleteTareas")

sp.AgregarParametro("Id", Original_Id)

sp.Execute()
Catch ex As Exception
Throw New Exception("Error actualizando datos de las tareas")
End Try
End Sub

End Class


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
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
DeleteMethod="DeleteTareas"
InsertMethod="InsertTareas"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetTareas"
UpdateMethod="UpdateTareas"
TypeName="nTareas">
<DeleteParameters>
<asp:Parameter Name="Original_Id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Original_Id" Type="Int32" />
<asp:Parameter Name="Nombre" Type="String" />
<asp:Parameter Name="Completo" Type="Boolean" />
</UpdateParameters>
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1"
Name="Completo"
PropertyName="SelectedValue"
Type="Boolean" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="Nombre" Type="String" />
<asp:Parameter Name="Completo" Type="Boolean" />
</InsertParameters>
</asp: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í

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView id="GridView1" runat="server"
GridLines="None"
AlternatingRowStyle-CssClass="even"
CssClass="gridview"
DataSourceID="ObjectDataSource1"
DataKeyNames="Id"
AutoGenerateColumns="False"
AllowSorting="True"
AllowPaging="True">
<Columns>
<asp:CommandField
ShowEditButton="True"></asp:CommandField>
<asp:BoundField ReadOnly="True" DataField="Id"
InsertVisible="False" SortExpression="Id"
HeaderText="Id"></asp:BoundField>
<asp:BoundField DataField="Nombre"
SortExpression="Nombre"
HeaderText="Nombre"></asp:BoundField>
<asp:CheckBoxField DataField="Completo"
SortExpression="Completo"
HeaderText="Completo"></asp:CheckBoxField>
</Columns>
<AlternatingRowStyle
CssClass="even"></AlternatingRowStyle>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged">
</asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>


Y para el DetailsView debería verse algo así

<asp:UpdatePanel ID="UpdatePanel2" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server"
AutoGenerateRows="False"
DataKeyNames="Id"
DataSourceID="ObjectDataSource1"
DefaultMode="Insert"
CssClass="detailsview"
GridLines="None">
<Fields>
<asp:BoundField DataField="Id" HeaderText="Id"
InsertVisible="False"
ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Nombre"
HeaderText="Nombre"
SortExpression="Nombre" />
<asp:CheckBoxField DataField="Completo"
HeaderText="Completo"
SortExpression="Completo" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>


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/, agregandole funcionalidad y haciendo funcional para un caso de la vida real.
Area de Comentarios
Por Anónimo - Fecha: 2007/12/11 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
Por Anónimo - Fecha: 2008/10/23 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
Por Anónimo - Fecha: 2010/01/28 09:57 PM
en el link de descarga esta el script de la base de datos
Por Anónimo - Fecha: 2012/04/25 11:06 PM
Gee whiz, and I thouhgt this would be hard to find out.
Por Anónimo - Fecha: 2012/04/27 07:02 AM
iv1SAx , [url=http://bhrvzfkespfd.com/]bhrvzfkespfd[/url], [link=http://poecqkujefxf.com/]poecqkujefxf[/link], http://elohmgidcrnf.com/
Por Anónimo - Fecha: 2012/04/28 12:11 PM
EbsVXT , [url=http://luwhsiqlmtug.com/]luwhsiqlmtug[/url], [link=http://puhsihzxgqcs.com/]puhsihzxgqcs[/link], http://xlimqvzyxuik.com/
Ingrese su Comentario
Comentario
Para poder votar debe estar registrado en DotNetcr.com
Solo queda registrado el primer voto enviado
Voto


Últimos Recursos
natii_18
thesondemon
ibarra
dsevic
Eur
jota
PER 237
MEX 236
CRI 186
COL 117
ESP 104
ARG 87