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 thoughts on “Para empezar a utilizar ASP.NET AJAX con Visual Studio 2005”

  1. 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,

  2. 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

  3. 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.

  4. 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

  5. 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.

  6. 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

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

  8. 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

  9. 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

Leave a Reply

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


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>