Seguimos con la serie de post sobre asp.net ajax. En esta ocasion usaremos las bondades que nos ofrece el Microsoft Ajax Framework asi que empecemos.
Usando capacidades de cliente de ASP.NET AJAX
En este ejercicio revisaremos la parte cliente del Microsoft AJAX Framework, el cual esta contenido en un archivo: MicrosoftAjax.js, es de saber que cuando uno de lado del servidor agrega el ScriptManager, automaticamente se agrega este archivo junto con MicrosoftAjaxWebForms.js.
Nota: Si establece la propiedad EnablePartialRendering = false no se agrega MicrosoftAjaxWebForms.js.
MicrosoftAjaxWebForms.js contiene el Javascript que da soporte al control UpdatePanel
Nota: Si no ha tenido experiencia en Javascript, se recomienda antes de comenzar este ejercicio leer los siguientes post:
http://msdn.microsoft.com/en-us/library/bb288795.aspx
http://msdn.microsoft.com/en-us/library/bb288796.aspx
Tarea 01 - Creacion del formulario y agregando Callbacks a los controles HTML
1. Agregaremos una nueva pagina (Ajax Web Form) a nuestro sitio web ClientMsAjax.aspx
2. Agregaremos un Input (button) HTML. (id=btnCallback, value="Hola MsAjax-Client")
3. Ahora nos ubicaremos en el javascript que se crea automaticamente creado por Visual Studio en un Ajax Web Form:
1: <script type="text/javascript">
2: function pageLoad() { }
3: </script>
4. Crearemos la funcion SayHelloTo con parametros event y context, la cual nos servira para el futuro callback al boton:
1: function sayHelloTo(event, context) {
2: alert("hola " + context + ", has hecho " + event.type + " desde aqui: " + this.id);
3: }
5. Dentro de la funcion pageLoad() añadiremos un evento al boton ya creado utilizando $addHandler. Previamente crearemos el callback correspondiente al evento:
1: var callback = Function.createCallback(sayHelloTo, "Gabo");
2: $addHandler($get("btnCallback"), "click", callback);
6. Adicionalmente agregaremos eventos de inicio y fin de la aplicacion:
1: Sys.Application.add_init(function()
2: { alert('Bienvenido a la demo de asp.net ajax'); });
3: Sys.Application.add_disposing(function() { alert('Hasta pronto.'); });
7. Ahora probaremos nuestra pagina web:
1. Hemos creado un evento para un boton, notese la firma de la funcion <Nombre_de_la_funcion>(event,context), en donde event contiene la informacion del evento y context los datos de parametro ingresado en Function.CreateCallback.
2. Para usar la el framework de Microsoft AJAX, simplemente agregamos el control ScriptManager a nuestro WebForm.
3. Microsoft AJAX tiene un metodo que hace las de document.getElementById() el cual es $get()
4. Para agregar eventos a los controles utilizamos $addHandler.
5. Function.CreateCallback(method, context) crea un metodo al que se le pasa un parametro a la funcion que administra el mismo
Read the rest of this entry »
Recent Comments