UpdatePanel and CSS
The ASP.net AJAX UpdatePanel control in RTM unfortunately does not have a CssClass property. A CSS property may be nice to pretty up the UpdatePanel but in my case, I was hoping to use it to set the CSS "visibility" property of an UpdatePanel when the page loads. One could do it using javascript alone but the hide command normally fires when the page load completes which causes the user to catch a glimpse of the element being hidden.
- A quick hack which works in some cases is to define a CSS ID selector for the UpdatePanel. So if I needed to hide an UpdatePanel with ID UpdatePanel1 when my page loads, I would add something like this to the top of my Page or UserControl:
<style type="text/css">
#<%=UpdatePanel1.ClientID%> {
visibility: hidden;
position: absolute;
}
</style>
- A better way is to enclose the UpdatePanel in some other tag and set its style like so:
<div id="foo" style="visibility: hidden; position: absolute">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
- Eilon's has an example of how to create a custom UpdatePanel control which adds the CssClass property. If you use the control in your project, Eilon suggests creating a tag-mapping entry to avoid changing any existing pages that already have <asp:UpdatePanel> tags like so:
<tagMapping>
...
...
<add tagType="System.Web.UI.UpdatePanel" mappedTagType="LeftSlipper.CustomUpdatePanel"/></tagMapping>
- Nikhil has also written a StyledUpdatePanel that exposes a CSS property.