Tuesday, June 3, 2008

CSS Lost on PostBack in ASP.NET

Where oh where has my CSS gone, oh where oh where could it be??? I was recently doing some work on an older application that had been since updated to take advantage of the newer ASP.NET features an techniques. However, in a certain piece of functionality in the application the user would click a "Submit" button, a client side script would be run and then after the PostBack occurred a bunch of CSS would be lost. To fix this problem, make sure that all, of the following is true:

Reference Your CSS Declaritively

First off, make sure that your CSS files are included in your page declaritively in your ASPX page, not via code behind.

Themes:


<pages styleSheetTheme="DefaultTheme">


(web.config)

Don't Use Response.Write("myScriptBlock")

This was actually the problem with the application I was working on. Whenever you write out a piece of code to the client from Code Behind you need to make sure you use the Page.ClientScript functionality ASP.NET provides. Here was the offending piece of code:

Bad Code

string emailScript =



@"<script>window.open('MAILTO:" + to + "?subject=" + subject + "&body=');</script>";


// Send the email to the default email application
Response.Write(emailScript);

Good Code

string emailScript =

@"<script>window.open('MAILTO:" + to + "?subject=" + subject + "&body=');</script>";



// Send the email to the default email application

Page.ClientScript.RegisterStartupScript(this.GetType(), "emailScript", emailScript);



I hope this saves someone else some lost or missing CSS on PostBack headaches.

Aaron
http://www.churchofficeonline.com/

12 comments:

cdosorio said...

thanks, It worked for me

BAzZ said...

BINGO! bloody awesome!

Hugo said...

Aaron, do you know what causes this?.. Im having the same problem but the css dissapears only in IE, not in Firefox.

Replacing with page.clientscript.registerscriptblock didnt help.

Hugo

PatMunits said...

Aaron. Thank you very much.

Your post led me to a solution that I used to resolve an issue with IE and customized jQuery-based accordion menu, which I placed inside an ASP.Net UserControl. My problem was that IE would consistentlt lose CSS applied to jQuery menu upon page submit.

Here's what I did to resolve this:
1. added App_Themes folder to VS project.
2. copied contents of the folder named "base" from jQuery's "themes" directory into the App_Themes folder. The jQuery's "images" subfolder was copied as well.
3. added <pages styleSheetTheme="base"/> to web.config.
4. also had to add runat="server" to the <head> element (of *.aspx pages) to avoid an error on page load
5. copied my own project *.css files into the App_Themes/base folder to sit beside jQuery's file.

I think this way any future updates to jQuery will have a much lesser chances of breaking my stuff, because I didn't have to modify any of the jQuery's own javascript.

Cheers!

Brad said...

Thanks for saving me from a headache.

ralphy said...

Thanks mate! I had a teeny weeny problem, my text box height setting was lost on postback.

florencia said...

I had the bad script code and changed it to the good code and it worked! Thank you so much.

Anonymous said...

wow, this is amazing. i spend few nights without sleep just to figure out what went wrong. I think you should write a book about this!!

Thank you very much for sharing the information!

Anonymous said...

Thanks!!!!

Serj said...

I solved this problem by turning off the smart navigation in the web config. Strange behavior, but after that there was a problem with the scroll bar when the page is in Iframe on Crm 2011 Form.

Anonymous said...

it worked, thank you soooo much

joe said...

Yep that did it! I've 4.5 hours on this bad boy and was having no luck.

Thanks a lot.