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

Suma de valores con Ajax y ASP.NET

Por royrojas | 11/27/2006 | Visitas 24,590 | Voto 4.00
En este pequeño ejemplo vamos a demostrar como podemos hacer llamados a nuestro servidor sin tener que cargar nuevamente la página, obvio lo hacemos con Ajax.
Categorías : VB.NET, C#, ASP.NET, Ajax
Descargar ejemplo AjaxAspNet001.zip

Desde hace un tiempo Ajax parece ser la moda en desarrollo de aplicaciones web. entonces nos preguntamos que es Ajax y como lo podemos implementar a nuestras aplicaciones ASP.NET.

¿Que es Ajax?
Algo importante de entender es que nadie inventó un lenguaje nuevo, ya que Ajax como tal no existe, más bien es una combinación de varios lenguajes que tenemos desde hace mucho tiempo, como el lenguaje XHTML (sucesor del actual HTML) las hojas de estilo en cascada (CSS) y JavaScript, junto a otros artilugios más técnicos como son XMLHttpRequest o XSLT. De hecho, el propio término es la abreviatura de "Asynchronous Javascript + XML".

En lo que consiste realmente es poder eliminar la forma actual en que se programan las aplicaciones. Actualmente al hacer un llamado a un objeto, por ejemplo el clic en un botón, esto implica que el navegador solicita datos al servidor para luego retornar los datos y posiblemente mostrarlos en pantalla, pero esto nos produce que se tenga que refrestar o recargar, lo que evita que podamos tener acciones continuas sin interrupción.

Entonces Ajax nos permite hacer llamados al servidor sin tener que recargar nuevamente la página. Lo mas importante talves sea que nos permite hacer consultas a nuestras bases de datos, mostrar en pantalla los resultados, sin que el usuario se de cuenta de todo el proceso.

Para implementar Ajax en nuestras aplicaciones ASP.NET vamos a utilizar la librería Ajax.NET Professional (AjaxPro.dll), y podemos descargar la última versión aquí.

Ahora que entendemos un poco del concepto de Ajax, hagamos un pequeño ejemplo que utilice esta tecnología.

1. Como primer paso seria agregar la referencia del AjaxPro.2.dll





2. Configuramos nuestro archivo web.config donde le indicamos que debe utilizar dicha referencia de Ajax.

<configSections>
<sectionGroup name="ajaxNet">
<section name="ajaxSettings" type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2"
requirePermission="false"
restartOnExternalChanges="true"/>
</sectionGroup>
</configSections>


3. Para que Ajax funciones debemos agregar unas etiquetas dentro del codigo en servidor.

Por ejemplo al crear la clase debemos agregarla a Ajax.

[VB]
<AjaxPro.AjaxNamespace("NombreDeClase")> _

[C#]
[AjaxPro.AjaxNamespace("NombreDeClase")]


Tendría que verse así
<AjaxPro.AjaxNamespace("NombreDeClase")> _
Partial Class NombreDeClase
Inherits System.Web.UI.Page


En el load de la página es requisito Registrar la clase

[VB]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Register Ajax.NET methods from this class
AjaxPro.Utility.RegisterTypeForAjax(GetType(Ejemplo01))
End Sub


[C#]
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(NombreDeClase));
}


Luego en cada función que necesitemos invocar por medio de Ajax, para hacer llamados asincrónimos al servidor deberá marcar las funciones con el siguiente
atributo:

[VB]
<AjaxPro.AjaxMethod()> _

[C#]
[AjaxPro.AjaxMethod]


Para este ejemplo vamos a hacer una pequeña suma, por eso vamos a crear tres controles, dos textbox y un botón, el resultado lo vamos a imprimir en pantalla, y para obtener el resultado creamos una función del lado del servidor.

<AjaxPro.AjaxMethod()> _
Public Function SumaValores(ByVal valor1 As String, ByVal valor2 As String) As String
Try
Return FormatNumber(CDec(valor1) + CDec(valor2), 2)
Catch ex As Exception
Return "0"
End Try
End Function


Controles


<asp:textbox id="txtValor1" runat="server" Width="100px"></asp:textbox> +<br>
<asp:textbox id="txtValor2" runat="server" Width="100px" ></asp:textbox>
<input id="btnSuma" type="button" value="Resultado" onclick="Ejemplo01.SumaValores(txtValor1.value,txtValor2.value,SumaValores_CallBack)" />
<div id="txtResultado" Width="100px" /></div>


En el JavaScript vamos a hacer el llamado a nuestro servidor

<script type="text/javascript">
function SumaValores_CallBack(response){
if (response.error != null){
alert("Se presentó un error ");
return;
}
target="txtResultado";
document.getElementById(target).innerHTML = response.value;
}
</script>


Podemos notar en el evento OnClick del botón como llamamos a la función SumaValores de la clase Ejemplo01. Igual podríamos solamente invocar al javascript y ahí llamar al servidor, es cuestion de gustos.

Lo que nos daría como resultado final


Con esta misma estructura podríamos hacer llamado a nuestras bases de datos y desplegar luego los datos en pantalla sin tener que refrestar la pantalla. En nuestro proximo ejemplo vamos a demostrar como se hace esto.

Descargar ejemplo AjaxAspNet001.zip
Area de Comentarios
Por h@nz - Fecha: 2006/11/27 11:42 AM
Chevere Roy, ya me despejé una duda de Ajax, con razón no me salía.. je je
Por royrojas - Fecha: 2006/11/27 02:07 PM
excelente, que bueno que te ayudó, conforme pasen los dias voy a seguir publicando otros ejemplos que estoy preparando, y aumentando la dificultad de los mismos...
saludos.
Por Anónimo - Fecha: 2006/12/02 09:49 PM
muy buen ejemplo sobre Ajax solo queria saber su logica y los primeros pasos ahora si comenzare a usarlo ya que como puedo ver se pueden hacer muchas aplicaciones muy buen ejemplo en verdad gracias
Por Anónimo - Fecha: 2006/12/02 09:49 PM
muy buen ejemplo sobre Ajax solo queria saber su logica y los primeros pasos ahora si comenzare a usarlo ya que como puedo ver se pueden hacer muchas aplicaciones muy buen ejemplo en verdad gracias
Por Anónimo - Fecha: 2006/12/07 04:19 PM
ajax me funciona en visual studio 2003?
Por royrojas - Fecha: 2006/12/08 12:07 PM
ajax 2003 funciona con el framework 1.1, este ejemplo esta para el framework 2.0, y la libreria de ajax que utilizamos aqui es para el framework 2.
PERO para que puedas utilizar ajax con el 2003 debes descargar de la direccion indicada aqui, la libreria de ajax para el framework 1.

El dll del Ajax para el framewor 1 lo puedes descargar aqui
http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AjaxPro
Por Anónimo - Fecha: 2006/12/12 06:41 AM
y el deberia programar igual que este ejemplo o debo tener otras consideraciones?
Por royrojas - Fecha: 2006/12/14 11:48 AM
si cambian ciertas cosas pero el mismo sistema te lo muestra como error y te indica por que cambiarlo, no es tan complicado.
Por ajsiles - Fecha: 2006/12/26 10:14 AM
Un ejemplo sencillo y muy explicativo... está muy bueno Peludix...
Pura Vida...
Por Anónimo - Fecha: 2006/12/27 07:16 PM
Segui el ejemplo paso a paso y me sale un error.
Linea 25
Caracter 1
Error. ''ejemplo01'' no esta definido
codigo, 0

que podra ser ?
Por royrojas - Fecha: 2006/12/30 01:05 AM
que version de framework estas utilizando? la 1.1 o la 2?
Por Anónimo - Fecha: 2007/01/17 05:46 PM
Muy didáctico, enhorabuena por el articulo.
Por Anónimo - Fecha: 2007/02/15 12:20 PM
Excelente articulo ya lo implemente en mi proyecto de 2.0 asi como en uno de 1.1
..... tengo una duda haber si me puedes ayudar

Me regresa un dataset y quiero leer su contenido,lo que pude hacer fue esto en Javascript:
Obj.value.tables[0].Rows.length; Obj.value.value.tables[0].Columns.length:
pero me gustaria hacer algo como esto
Obj.value.tables[0].Rows[0].Item[1]
Por Anónimo - Fecha: 2007/05/17 06:33 AM
yo tengo una pregunta la funcion CallBack es de la libreria o se puede utilizar en javascript otras veces!
Gracias de antemano
Por Anónimo - Fecha: 2007/05/22 07:52 PM
Alguien se podria molesta en escribir como es el web.config en vs2003 porque a mi no me funciona.
No devuelve la suma pero no da ningun error
Por Anónimo - Fecha: 2007/07/17 10:58 AM
Sobres Sobres... ta chido tu ejemplo, me gustaria ver el link para chekar ejemplos con mayor dificultad
Por royrojas - Fecha: 2007/09/14 03:34 PM
aqui hay otro ejemplo de ajax con mayor dificultad. usa datagrid o gridview , combo y un details view

http://www.dotnetcr.com/Libreria.aspx?art=108&tag=Aplicacion-Web-To-Do-List-o-Task-List-utilizando-ASPNET-2005-y-Ajax
Por royrojas - Fecha: 2007/09/14 03:34 PM
http://www.dotnetcr.com/Libreria.aspx?art=108
Por Anónimo - Fecha: 2007/10/19 09:38 AM
UFFF, que poder de ejemplo muy completo y muy bien ilustrado... muchas gracias...
Por Anónimo - Fecha: 2007/10/21 04:52 PM
Si no es mucha molestia, como se puede tratar con conjunto de datos como los String[], ya que al momento de utilizar en la parte de javascript (alert(result[0].value)) me da un error de value es null o no es un objeto, muchas gracias de antemano.
Por Anónimo - Fecha: 2007/11/21 09:52 AM
Exelente...con un simple ejemplo demostraste en si lo que es AJAX..gracias...estas publicaciones son las que valen la pena....hoy mismo empiezo a utilizar AJAX ;).....CARTUR
Por Anónimo - Fecha: 2008/08/19 11:14 AM
excelente brother !!! muy bueno, gracias ...
jc
Por royrojas - Fecha: 2010/01/25 08:42 AM
aqui mas ejemplos con ajax http://www.dotnetcr.com/recurso.aspx?id=109&tag=como-utilizar-el-control-listbox-con-ajax-y-aspnet
Por Anónimo - Fecha: 2010/06/11 08:05 PM
tienen mas ejemplos?
Por Anónimo - Fecha: 2010/11/29 05:57 PM
para principiantes pero esta interesante
Por Anónimo - Fecha: 2011/11/01 01:16 PM
HOLA, MUY BUEN EJEMPLO,POR FAVOR CUANDO LE QUIERO TRABAJAR EN WEBFROM QUE ESTAN DENTRO DE MASTERPAGE TIENE ERROR. GRACIAS
Por Anónimo - Fecha: 2012/04/26 01:24 PM
I am more of a front end developer with ieadrmenitte experience on the back end, so please forgive my inability to answer these questions on my own:Could you provide an example or two where this would be useful? Maybe you could discuss the pros and cons of this as opposed to web services or update panels. Would this work with forms? thanks
Por Anónimo - Fecha: 2012/04/27 08:42 AM
1tIHbc , [url=http://xyrsfnduiyjs.com/]xyrsfnduiyjs[/url], [link=http://mokajasefpcn.com/]mokajasefpcn[/link], http://crqcbhfbfnyx.com/
Por Anónimo - Fecha: 2012/04/29 12:16 AM
HdaS10 , [url=http://xhxdhqjinotn.com/]xhxdhqjinotn[/url], [link=http://sibahilvlncb.com/]sibahilvlncb[/link], http://fkislztztmsn.com/
Ingrese su Comentario
Comentario
Para poder votar debe estar registrado en DotNetcr.com
Solo queda registrado el primer voto enviado
Voto


Últimos Recursos
ibarra
dsevic
Eur
jota
juanjoguardiola
Víctor Carbajal
PER 237
MEX 236
CRI 185
COL 116
ESP 104
ARG 87