.NET Chronicles

Temas relacionados con el desarrollo de aplicaciones con .NET

Octavio Telis

Para empezar a utilizar ASP.NET AJAX con Visual Studio 2005

Hola… ¿qué tal?

Ahora que se ha liberado ASP.NET AJAX 1.0, formalmente conocido como las extensiones de ASP.NET 2.0 y digo formalmente pues ASP.NET AJAX 1.0 al instalarlo se encuentra como un assembly denominado System.Web.Extensions.dll alojado en el Assembly Cache de Windows.

Bueno, continuando con lo primero, ahora que ya se han liberado las extensiones de ASP.NET AJAX creo que no hay escusa alguna para no utilizarlas. Hay varias razones que fácilmente nos convencerán de utilizar ASP.NET AJAX, cada razón que expongo a continuación deja de largo una posible excusa típica.

La primera razón es que está disponible para descarga sin costo alguno, y además, es un archivo bastante pequeño que no representa mucho tiempo de descarga. Se instala de manera sencilla y además instala un par de plantillas para que pueden utilizarse en la generación de proyectos  y páginas web basados en AJAX. Utilizar una de estas plantillas para proyectos o sitios que uno usan ningún componente de las extensiones no representa ningún riesgo de error, sin embargo será necesario que tengas instaladas las extensiones en el host que albergará dicho sitio. El proceso de instalación es simple, sin embargo se deben tener las siguientes consideraciones antes de instalarlo.

                Antes que nada, necesitarás instalar el Service Pack 1 para Visual Studio 2005 para poder instalar las extensiones de AJAX.

Bueno, el service pack instala ya los proyectos web de facto y con las extensiones de AJAX se crearán las plantillas tanto para proyectos Web como para sitios Web, para entender porque Proyecto Web y Sitio Web, bueno, las extensiones de AJAX crearan las plantillas para cada uno de estos pues son distintos, el Proyecto Web tiene un archivo .proj es parte de una solución y la característica más importante; genera una dll de los archivos de código del sitio, asi es, como se hacía en VS.NET 2003, el sitio web, no requiere de un archivo .proj, se carga directo de una carpeta destinada para el sitio y el código se compila según se utiliza, no se genera un dll de todo. Bien, entendidas las principales diferencias entre ambos tipos de plantillas, ahora podemos crear nuestro sitio web basado en AJAX.

Las extensiones de AJAX una vez instaladas dejaran las plantillas (que tanto les he dicho) visibles en la selección de tipos de proyecto de la ventana de Nuevos Proyectos de Visual Studio 2005. Aquí se identifican rápidamente las plantillas para aplicaciones web, de las cuales solo hay que seleccionar las que dicen AJAX Enabled.

Bien, crear una apliación web Ajax Enabled será sencillo con estas plantillas, simplemente hay que elegir un nombre, dar aceptar y listo, la aplicación estará creada. ¿Qué tiene de diferente esta aplicación con las anteriores si se ven idénticas?  Bueno, son idénticas salvo un archivo; el web.config, el cual ahora incluirá la información necesaria para decirle al CLR qué assemblies tomar para interpretar los controles AJAX del servidor, además de otras declaraciones, solo échenle un vistazo. Si ya han visto el archivo web.config generado para una aplicación AJAX Enabled, bueno, será más intuitivo pensar qué se necesita para habilitar un sitio web de ASP.NET 2.0 , bueno, solo se necesita copiar todo lo que esté en un web.config de aplicación AJAX que no esté en la otra, o sea, copiar todo lo que no se tiene en el actual. Por cierto, no olviden verificar que el servidor donde se ejecuta su aplicación web tenga instaladas las extensiones de ASP.NET AJAX porque de otra manera no podrá ejecutarse la aplicación una vez modificado el web.config.

Para comenzar basta agregar a una página el ScriptManager, este control lo encontraran en la barra de controles bajo el nombre de AJAX Extensions, bien, este control nos servirá para administrar el código script generado para los controles, es importante saber que sin este control no podrá utilizarse ninguno otro de los controles de servidor. En la mayoría de los casos, la plantilla agregará un ScriptManager en la primera página web de nuestra aplicación. Como siguiente paso agregaremos un control UpdatePanel, este será el contenedor que relizará las actualizaciones asíncronas de los controles que contenga. Dentro de este panel coloquen algún control que requiera de tiempo para actualizarse, verán qué efecto causa con el servidor. Ahora bien, si lo que se ubica en el UpdatePanel tarda mucho en actualizarse, podemos utilizar un UpdateProgress para mostrar una animación de progreso, veamos la parte del código para generar este control:

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
    <ProgressTemplate>
        <img src=”images/clock.gif” /> Cargando la información…
    </ProgressTemplate>
</asp:UpdateProgress>

Este update progress mostrará  una imagen animada gif de un reloj y la leyenda de cargando información hasta que el update panel haya terminado su labor.

Bien, teniendo esto, agreguemos un botón dentro del update panel, debe quedar algo como lo siguiente:

<form id=”form1″ runat=”server”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
    <div>
    <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
        <ContentTemplate>
            <asp:Button ID=”btnPrueba” runat=”server” OnClick=”btnPrueba_Click” Text=”Prueba” />
      <br />
            <asp:Label id=”lblMensaje” runat=”server” Text=””/>
        </ContentTemplate>
    </asp:UpdatePanel>

   
<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
        <ProgressTemplate>
            <img src=”images/clock.gif” /> Cargando la información…
        </ProgressTemplate>
    
</asp:UpdateProgress>
    </div>

</form>

Bueno, ahora en el evento del botón, vamos a colocar algo de código. El código que colocaremos servirá para causar el efecto de retardo del servidor y verán cómo entrará en acción el UpdateProgress sin que la página desaparezca, solo sustituyan la dirección de la imagen, tal vez podría probar con esta dirección: http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif ahora bien, el código sería como sigue, dentro del evento click del botón:

protected void btnPrueba_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(10000);
    lblMensaje.Text = “La información ha sido cargada”;
}

 

Bien, con esto creo que podemos empezar a eperimientar más e investigar más sobre el uso de estos controles. Recuerda que puedes utilizarlos en tus aplicaciones, solo no olvides agregar el ScriptManager y un updatePanel para la información que se va a actualizar.

Bueno, que lo disfruten y hasta la próxima.

Saludos…

Octavio Telis

12 Responses to Para empezar a utilizar ASP.NET AJAX con Visual Studio 2005

  • Hola Octavio!

    Básico lo comentas para iniciarse. Pero me gustaría acotar un detalle, es ideal instalar Visual Studio Service Pack 1, para no tener problemas con el intellsense en la vista del HTML con los controles de ASP.NET Ajax Extensions, pero el SP1 de VS2005 no es necesario para instalar ASP.NET AJAX.

    Ahora si ya se iniciaron en ASP.NET AJAX, y estan pensando en implementar en sitios web existentes, les recomendaría este webCast que dimos la semana pasada: http://geeks.ms/blogs/sergiotarrillo/archive/2007/06/05/15631.aspx.

    Saludos,

  • Qué tal Sergio.

    Bien dices que no es necesario instalar el SP1 de VS, sin embargo, será necesario si quieres AJAX desde proyectos WEB, ya que los proyectos web no vienen de origen con VS2005 (no son lo mismo que sitios WEB), bien, pues para que las plantillas de proyecto web AJAX se instalen bien, es mejor instalar antes el SP1 que instala las mejoras de proyectos web, para que sobre eso se instalen las plantillas de AJAX. Por lo tanto, se vuelve necesaria la instalación del SP1, si es que se quieren utilizar las plantillas de Proyectos WEB de AJAX.

    Gracias por la aclaración.

    Saludos…

    Octavio Telis

  • Jhedson says:

    Cuando instalo el Ajax extension, se desabilita mis plantillas de visual studio… (pry web y visual vasic)

  • Roberto Marcos says:

    Al instalar las extensiones me desaparecen TODAS las plantillas de Visual Basic y Proyectos Web

    Tengo Visual Studio 2005 Sp1, he comprobado que al desinstalar las extensiones , vuelven a aparecer.

    ¿Esto es normal? Creo que no.

    Ya no podre hacer ningun proyecto de otro tipo, pero sin enbargo, me permite abrir los antiguos sin errores.

  • MarceloTheBadKid says:

    Al instalar las extensiones me desaparecen TODAS las plantillas de Visual Basic y Proyectos Web

    Tengo Visual Studio 2005 Sp1, he comprobado que al desinstalar las extensiones , vuelven a aparecer.

    ¿Esto es normal? Creo que no.

    Tengo el mismo problema, encontraron la solucion para este caso? se los agradeceria mucho

  • jasnet says:

    Octavio!
    Pero si quiero cargar en el div o panel como quieras llamar. desde un link que diga …/Default.aspx?Cod=1
    pero sin que recargue la pagina.

  • Paul says:

    Este Contenido Esta muy Bien y funciona Correctamente

  • Juan picaoojales says:

    Pues es que ahora mismo me pica el ojete de la bullanga después de ir al baño a echar unos tolegos pútridos que huelen lo mismo que la meada de un organgután con cáncer sobre una rueda quemada, y claro me pica el ojal. Sabéis alguna clase de Ayax que pueda darme un masajito en el ojal para mo tener que meterme el dedito?

    Gracias, de antemano por sus respuestas

  • Matias says:

    muy buena explicación me gustaria aprender más de los diferentes componentes que ofrece ajax de esta forma sencilla. 10 puntos

  • andlinux says:

    saben e microsoft es un mierda yo apoyo a codigo abierto
    la veradad esque solo es problema tanto en programar como en comprar instaladores es basura……………..
    los verdaderos informaticos programan con codegio abierto como los machos no como los maricones w??????””s
    utiliza: mysql, php, apache, eso te convierte en hombre si no lo eres……ja ja ja ja j auque les duela

  • Ubirajara Erthal says:

    Hola Octavio, Que tal, estoy intentando usar un control para la carga de archivos ajaxToolkit:AsyncFileUpload, pero al utilizar el ScriptManager el control deja de funcionar, es decir, el componente no contiene ningún archivo, la solucion es quitar el ScriptManager pero ya no se disfrutan las ventajas de ajax

  • Jorge says:

    Simple pero entendible… se agradece el esfuerzo.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

.NET Chronicles
  • Eventos del Teclado en WPF July 22, 2015
      Hola ¿qué tal? En esta ocasión como como continuidad a lo que previamente había escrito sobre los eventos del teclado en Windows Forms, haré un artículo sobre el uso de los eventos del teclado en WPF, así es en Windows Presentation Foundation. No es desconocido por muchos que el nuevo estándar de desarrollo de […]
  • Programación Orientada a Objetos (Introducción) May 14, 2014
    Hola qué tal… Aquí les dejo este video sobre la programación orientada a objetos, a manera de preámbulo a los siguientes videos, con las bases de la programación en C# y otra línea con algunas utilerías. Saludos… Octavio Telis
  • Capítulo piloto del la versión en video de .NET Chronicles May 6, 2014
    Hola qué tal??? Pues en esta ocasión estoy compartiendo con ustedes la liga de un video piloto, con el que pretendo comunicar un poco más sobre las tecnologías .NET y los lenguajes de Programación. En esta ocasión será con la presentación de C#, en un capitulo titulado “Te presento a C#”, espero que sea de […]
  • Validación de datos de entrada con enlace a datos en WPF May 27, 2012
    Tweet Hola, qué tal. Ya que he venido hablando del enlace a datos en WPF en las publicaciones anteriores, bien convendría considerar el uso del Binding para validar datos, hemos tocado ya algunos puntos necesarios para escribir esta funcionalidad. En las publicaciones anteriores vimos ya como enlazar los datos, además, cómo convertir los datos, ahora, […]
  • Uso de la propiedad Visibility con valores booleanos en WPF May 25, 2012
    Tweet    Hola que tal. En esta ocasión quiero compartir con ustedes una manera para utilizar la propiedad Visibility con un valor bool. Te preguntarás “¿Y qué sentido tiene eso?”, bien, el detalles está en que en ocasiones se requiere que la visibilidad de un control de la interfaz de usuario responda a un valor […]
  • Conversión de Valores con Enlace a Datos May 24, 2012
    Tweet     Hola que tal. En el diseño de aplicaciones con WPF tendremos muchas ventajas en cuanto a la interfaz de usuario se refiere, dado que es un modelo muy flexible, nos permite dar formato y estilo a la apariencia de la interfaz de usuario, logrando aplicaciones más agradables, vistosas y que mejoran por mucho […]
  • Mostrar archivos de imagen en WPF utilizando enlace a datos. May 23, 2012
    Tweet Holal Qué tal. Continuando con el ejemplo del post anterior (http://bit.ly/oh0m9k), referente al manejo de imágenes en WPF, ejemplificaremos el manejo de las imágenes de la misma manera pero, esta vez, utilizando enlace a datos y la clase Binding. Antes, tenemos que hablar un poco de lo que es el enlace a datos con […]
  • Mostrar archivos de imagen en WPF August 26, 2011
    Hola Qué Tal… En esta ocasión quiero comenzar una serie de artículos sobre el manejo de archivos de imágenes con .NET. En esta primera parte voy a tratar la manera de cargar un archivo de imagen en un contenedor de imagen, en este caso usaré WPF y el control Image que viene incluido en el […]
  • Comparar dos DataTables según sus DataRows August 23, 2011
    Hola que tal. En ocasiones es necesario comparar el contenido de dos DataTable para determinar qué registros (DataRow) están en una y en otra no. Supongamos tenemos dos DataTable; dt1 y dt2, ambas con el mismo esquema. La tabla dt2 contiene más registros que la taba dt1, por lo que deseamos saber qué registros de […]
  • Arquitectura – Definición de un Data Access Component (con un ejemplo) Parte 3 May 14, 2010
    Hola Qué Tal? En esta ocasión, no he dejado pasar tanto tiempo para terminar la trilogía del uso de Data Access Component con un ejemplo. Bien, pues en este artículo veremos el uso del componente ya creado, cómo extenderemos la funcionalidad del componente y cómo lo aplicamos en la interfaz de usuario. Primeramente, debemos crear […]