Archivo de la categoria 'ASP.NET Ajax'

AjaxControlToolkit no carga correctamente los CSS dentro de UpdatePanel

Posteado por jpgarcia on Marzo 27, 2007 en ASP.NET Ajax, AjaxControlToolkit

Si tenemos un control de AjaxControlToolkit que este seteado en el ASPX o ASCX con el atributo visible=”false” y éste se encuentra dentro de un UpdatePanel. Nos encontraremos con el problema que al hacerlo visible, no se cargaran lo estilos y por lo tanto no veremos el formato como debe ser.

En mi caso particular me ha ocurrido con los controles Calendar y Tabs.

Para solucionar este problema debemos añadir en el Page_Load de nuestra página el link a la hoja de estilos al header de nuestra página.

En el caso se utilice MasterPage lo haremos de la siguiente forma:

  1. Añadimos al tag <head> de nuestra página los atributo de runat=”server” y un id, por ejemplo id=”MasterHeader”
  2. En el evento Page_Load ponemos los siguiente
string cssFile = Page.ClientScript.GetWebResourceUrl(typeof(ClientCssResourceAttribute),                      "AjaxControlToolkit.Calendar.Calendar.css");
HtmlLink cssLink = new HtmlLink();
cssLink.Href = cssFile;
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
MasterHeader.Controls.Add(cssLink);

Y si lo utilizamos en una pagina sin Master Page, evitamos el punto 1 y en la ultima linea de código pondremos:

MasterHeader.Controls.Add(cssLink);

Si en vez del Calendar queremos cargar el control Tabs solo tendremos que cambiar en la primera linea la referencia al archivo de estilos.

string cssFile = Page.ClientScript.GetWebResourceUrl(typeof(ClientCssResourceAttribute),
“AjaxControlToolkit.Tabs.Tabs.css“);

ASP.NET Ajax Hands on labs

Posteado por jpgarcia on Febrero 23, 2007 en ASP.NET Ajax

Paseandome por los Blogs de Geeks.ms me he encontrado con este post de Eugenio Estrada Csaky

  • ASP.NET AJAX 1.0 - Hands-On Lab Manual in English
  • ASP.NET AJAX 1.0 - Hands-On Lab binaries
  • ASP.NET AJAX 1.0 - Hands-On Lab slide deck

    También en Alemán y Frances:

  • ASP.NET AJAX 1.0 - Hands-On Lab Manual in German
  • ASP.NET AJAX 1.0 - Hands-On Lab Manual in French

    • Comentario mio:
    Por el momento he llegado hasta el punto 4.3 y parece interesante para el que no haya visto nada de Ajax, y ver lo facil que puede ser convertir una aplicación en AJax Enabled.

    Ademas de la utilización del famoso UpdatePanel, tambien se muestran ejemplos de algunos controles de AjaxControlToolkit y la utilización de llamadas asincronicas a WebServices entre otras cositas…

    ASP.Net AJAX, pero… Problemas de navegación (Back Button)

    Posteado por jpgarcia on Febrero 21, 2007 en ASP.NET Ajax

    Imagino que todos se habrán enfrentado al mismo dilema al comenzar a desarrollar una aplicación Ajax con UpdatePannels.

    Las 2 preguntas más frecuentes son:

    1. ¿Si uso UpdatePannels, pierdo el control de la navegación? , es decir, ¿El usuario nunca podrá volver atras, y la pagina siempre será la misma solo que cambia su contenido?
    2. ¿El usuario no tendrá la posibilidad de acceder en un futuro (Bookmark) a una página que ha sido producto de alguna interacción con Ajax?

    La respuesta es SI, pero NO.

    SI por que al utilizar un UpdatePanel el browser nunca se dará cuenta que estamos mostrando otro contenido por que lo que esta haciendo internamente el UpdatePanel es cambiar el HTML del lado del cliente como todos sabemos.

    y NO, por que existe un tipo llamado Nikhil Kothari que se ha encargado de desarrollar un control para que podamos hacer esto.

    En las versiones anteriores de ASP.NET Ajax (CTP y RC) ya había desarrollado éste control, pero los que lo conociamos estabamos esperando el mismo para la RTM.

    Recien acabo de mirar su Blog y Sorpresa! ya ha publicado en éste post la versión actualizada, que ademas incluye dos controles adicionales:

    • StyledUpdatePanel
    • AnimatedUpdatePanel

    Además pueden ver un video, que por cierto esta hecho con WPF/E, donde se muestra visualmente como funciona el control.

    Espero que esto les sea de utilidad si ya les han criticado sus aplicaciones Ajax por no poder volver atras :)

    ASP.NET Ajax 1.0 Final Release

    Posteado por jpgarcia on Enero 25, 2007 en ASP.NET Ajax

    Ha llegado la hora!, y despues de tener que sufrir con las  Betas y el Release Candite, esperando la versión final, aquí la tenemos recien salida del horno.

    1. ASP.Net Ajax Version 1.0 Final (Gratuita)
    2. El ya conocido AjaxControlToolkit  (Release 10123 Production) el cual soluciona unos 75 bugs reportados por la comunidad y algunos controles nuevos como Calendar, MaskedEdit y los tan esperados Tabs.
    3. El “ASP.NET 2.0 AJAX Futures January CTP” que son nuevas utilidades que aun estan en desarrollo.

    Aquí les dejo los links:

  • ASP.NET AJAX Home Page
  • ASP.NET AJAX Control Toolkit
  • ASP.NET 2.0 AJAX Futures January CTP

    • FCKEditor submite contenido vacío dentro de UpdatePanel en FireFox.

    Posteado por jpgarcia on Diciembre 31, 2006 en ASP.NET Ajax

    En el ultimo proyecto que estoy desarrollando, me encontré con la necesidad de utilizar un edior WYSIWYG  (What you see is what you get) y he optado por FCKEditor. Un completisimo editor, que incluye muchas funcionalidades, entre algunas:

    • Inserción de imagenes, con un Server Browser que permite subir imagenes a nuestra aplicación.
    • Insercion de archivos en flash.
    • Previsualización
    • Posibilidad de maximizar el contenido que estamos editando.
    • Asignacion de archivo de estilos, y previsualización de los mismos en tiempo real.
    • Integración, para ASP.NET, ColdFusion, ASP, Java, PHP y otros…
    • Y muchas cosas mas…

    Pero bueno, vamos al problema que me he encontrado:

    Al insertar este control en un UpdatePanel de ASP.Net Ajax en intentar submitir los cambios en FireFox, se pierden el texto ingreado en el control.

    Para que esto no suceda, como indican en la FCKEditor Wiki debemos registrar un Script en nuestra pagina, y añadir un atributo onclick, en nuestro control que se encarga de enviar los datos.

    Para ello, crearemos un Script y lo guardaremos por ejemplo en /FCKEditor/editor/js/FCKHack.js con las siguientes lineas de código:

    // Some Class
function MyFCKClass()
{
        this.UpdateEditorFormValue = function()
        {
                for ( i = 0; i < parent.frames.length; ++i )
                        if ( parent.frames[i].FCK )
                                parent.frames[i].FCK.UpdateLinkedField();
        }
}
// instantiate the class
var MyFCKObject = new MyFCKClass();

    Luego en nuestra pagina, añadiremenos las siguientes lineas en el Page_Load:

    protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        if (!Page.ClientScript.IsClientScriptBlockRegistered("FCKAjaxHack"))
        {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                "FCKAjaxHack",
                String.Format(@"<script type=""text/javascript"" src='{0}'></script>",
                ResolveUrl("~/FCKEditor/editor/js/FCKHack.js")));
        }
    }
    string sFCKHack = @" if (eval('(typeof(MyFCKObject) != \'undefined\')'))
                    {
                        MyFCKObject.UpdateEditorFormValue(); return true;
                    }
                    else
                    {
                        return true;
                    }";
    cmd.Attributes.Add("onclick", sFCKHack);
}

    Donde cmd  en este caso es el botón que se encarga de submitir la página.

    Fuentes:
    http://forums.asp.net/1513800/ShowThread.aspx#1513800
    http://wiki.fckeditor.net/Troubleshooting#head-c83215c3393542ddc261fb2b7a64b60a41253d76