AjaxControlToolkit no carga correctamente los CSS dentro de UpdatePanel
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:
- Añadimos al tag <head> de nuestra página los atributo de runat=”server” y un id, por ejemplo id=”MasterHeader”
- 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“);
Juan Pablo Garcia Blog