Specifying .aspx on the end of a css file? - asp.net

When working on web apps in ASP.NET, what is the reason for specifying a file as stylesheet.css.aspx rather than just plain stylesheet.css? I have seen this done in various web apps.
The web designer mentioned something about how it's a .NET thing and storing a global variable for the ASPX page but I didn't really understand, nor know the full story.
This is done at my work for a large web app with different sites for different countries. This makes me wonder, when would I make separate web apps for separate countries as opposed to one web app serving different languages? Is there a performance, architectural or other technical reason for doing so? I can think of several non tech reasons (e.g. SEO considerations).

Probably the stylesheet is not static and is dynamically generated on the server.
This technique can be used to provide a different style sheet by considering several parameters (such as user theme selection or something).
Clarification: While you can map .css extension in IIS to be handled by ASP.NET. It has two problems:
Static CSS files will also get handed down to ASP.NET runtime, which will cause a small performance loss.
In many shared hosting environments, you don't have any control on IIS handler mappings.
Web browsers don't care (at least, they shouldn't care) about the extension or anything else about the URL. The only thing they should care about is the Content-Type header. It should be set to text/css; otherwise some of them may complain.

A stylesheet is just a text file - you can specify any file extension you want as long as your <link> matches. In other words this will work:
<link type="text/css" rel="stylesheet" href="style.foobar"/>
as long as your stylesheet has that name. I can't think of any reason for naming the stylesheet with a .aspx extension as it is misleading and confusing. [Other posts have good explanations for why this might be used.]

As mentioned, its to allow the server to process it as an aspx file. It will spit out css I'm sure, but will allow you to do processing server-side.
In the example you gave, if you have the same html content for different regions (perhaps translated, but the same structure), then by having a dynamic css file you can swap out, say, background images. Generally this is considered to be a bad idea, as you should be adding different class names to the html elements to solve this problem.
Another common reason for doing this is to avoid duplication of color definitions. Technically, you can avoid this also by using class names, but it becomes rather annoying. Most people want to have something like:
define sitebordercolor #999;
define sitebackgroundcolor #fff;
and then in their CSS, be able to do:
.foo { border: 1px solid #sitebordercolor; background-color: #sitebackgroundcolor; }
However, CSS doesn't let you do that. So, by using ASPX files, you can achieve the same result:
.foo { border: 1px solid <%=sitebordercolor %>; background-color: <%=sitebackgroundcolor %>; }

If you name a stylesheet .aspx, it will be processed by the ASP.Net engine rather than simply served as a text file.
Once you're in .Net, you are free to write your CSS on the fly. I'd prefer parameterized css.aspx though, since browser want to cache CSS files.

Stylesheets are usually static text files, there's no reason for giving one an .aspx extension unless they are being dynamically generated.

Mehrdad's answer is spot on with regards to the CSS files - that's how we enable dynamic colours on a number of our sites - have the colour defined by a query string, enable page caching varying by that query string, and there you go.
In response to the architecture part of this question:
Whilst SEO considerations would recommend that localised content is often served from a local server and domain (i.e. French content on a .fr domain for example) this often isn't possible.
In terms of maintenance, it's easier to maintain one web site rather than multiple - so you would build it once, take advantage of the framework features to enable localisation (resource files, etc), and then you can either deploy that to one location or multiple as you see fit.

Related

Combine web server controls web and script resources (axd files)

I know there are lots of similar questions like this in the web, but I haven't got to one working solution after searching for these last 2 days. Some threads are outdated, others solutions don't work, others are too complicated to manage, so... Yes, another question about resources.axd files in asp.net projects.
I'm starting to build a set of server controls and embedding some resources. After building my controls and dragging them into pages, each individual resource is requested by the browser in the form of an .axd script. I understand the part where the ScriptManager manages these scripts and they're not ready to use, for instance, in Bundles in some sort of .Include("*.axd").
I tried some of the combine/minify/compress/gzip/icecreamOnTop packages out there but couldn't manage none of them to work.
I tried the StriptManager CompositeScript approach and the ScriptResources.axd are indeed combined, the response is successful (code 200), but in the end the scripts don't work. Example: I included the jQuery lib in that composite script and then tried to use it in the page - didn't work. I must say I didn't reference () the composite script anywhere because I didn't understand how to do it. If I set the path, then a 404 was returned (found the 1024 byte limit threads, etc...) and all the requests to the WebResources.axd would still remain.
I would prefer not to write an HttpHandler myself.
Also tried to download the AjaxToolkit and tried the ToolkitScriptManager which combines scripts, but that added ~4seconds to my page load. No, thanks.
My question is: what is the current approach regarding this matter in .net 4.5?
I will have lots of resources and would like to combine them. All js and css files in the final website project are bundled, but how to 'bundle' the axd files?
Here's a little example which will make the following requests:
Click here to view image
I know I can set the AjaxFrameworkMode to Disabled and will only have the 2 first WebResources.axd requests in this example, but what about when I have 10 css files embedded in my controls?
Any working solution would be much appreciated.
Many thanks
I managed to implement something that suits my case. More of a work around than a proper combining solution, but works and that's good enough for now.
All my controls extend a base class which has a property called ProcessResources. By default this property is set to true. That means that JS and CSS resources will be registered and each control has everything to work as standalone (axd resources will be generated). When set to false, no resource is registered and no axd files are generated.
The base class also has a static method that receives a destination path as a parameter and copies all the JS and CSS resources to that folder (if they don't exist or have been modified). This method returns a collection of all the needed resources for the control to work.
This way, on Application_Start, I can do something like:
myJsBundle.Inlude(ServerControlA.GetResources("~/ExternalResources", RESOURCES.JAVASCRIPT));
Then just need to set the ProcessResources flag to false (each control or web.config). All resources are now bundled and no axd files are generated.

Google Fonts CSS Include

Hey,
Since Google Fonts came out, I have had this question in mind. First see this below:
<link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'>
Here Google is linking to an external CSS file that doesn't have a file extension (.css)! Then Google also has another feature that if you want to inlude another font to this then just add the "|" sign and type the font name. How do you do this? Using Javascript, PHP or something?
Help is appreciated!
Thanks :)
The extension of a file does not have to mean anything at all about the contents of said file. It is merely a convention (one that Windows, for instance, uses to the point of making it seem like a requirement).
Any dynamic 'file' on a web site can return what ever kind of content it wants, any time it wants. The extension means nothing - aside from expected convention.
That URL could be a directory named css with a default 'document' that is a script, which handles the parameters to decide what content to give. Or, it could be a literal file named css which does the same thing. Or, it could not be a file or folder at all, instead merely part of a routing mechanism, which calls a controller based on the URL, and passes the parameters in.
Web servers return information in the response indicating what the MIME Type of the return value is, and the browser determines what to do with it based on that - not based on the extension of the file.
Yes, they have to be doing some sort of server-side processing when this URL is requested
http://fonts.googleapis.com/css
The querystring is parsed, and a text stream is returned with the CSS output. Allowing the user to add additional font families to the CSS is pretty trivial, as the server is just spitting back what you append to the query string.
You could do this in PHP or ASP.Net (and many others), but there is no indication of the underlying technology from Google's URL.
The easiest way to do this yourself would be to create a folder on your web server called "css", and then have a default script in there that does the processing. The URL could basically be almost identical to the Google url.

Generating dynamic CSS

What is the best way to handle style that that is user-customized? Just as an example of the result I'm looking for, this would suffice:
body {
color: {{ user.profile.text_color }};
}
However, serving CSS as a view seems like it would cause a significant amount of overhead in a file that is constantly requested, so this is probably not a good solution.
The user does not have access to the CSS files and we must assume that they have no web development knowledge.
However, serving CSS as a view seems like it would cause a significant amount of overhead in a file that is constantly requested, so this is probably not a good solution.
And what if you would generate that CSS once?
Default CSS is: /common/css.css
Member customize CSS, now <link /> elements points to /user-specific/123.css?ts=123123123. 123 is of course an identifier of the member, and ts parameter contains a timestamp - a date of last CSS modification
Make sure that your CSS generator sets proper HTTP headers responsible for client-side caching
User browser request a CSS file - server replies with simple 304 Not Modified header - there is no need for any script execution or contents download
When member modifies his CSS then you just update ts - once again just a single request is needed
Do the CSS dynamically via a view as normal, but use aggressive caching so that it loads quickly.
You can try django mediagenerato, actually I read this Q and I was searching for solution like you, then I found that Django-mediagenerator
I didn't tried it yet but it seams to be a solution.

Multi-lingual static content in ASP.NET

Is there a simple way of making the static content of an .aspx page multi-lingual? Resource files are nice for controls but it's quite hard and annoying to write big chunks of html in them. Any easier ways?
Make properties in resources files and use them, .NET automatically finds the correct resource file, also just make sure so that the property name is same in all the resource files, so it will replace the property value in .aspx page with the value in the resource file.
Don't code html markup in resource file, have the html markup in the .aspx page itself, just get the essential values from resource files.
Just to reiterate what Mahesh said: do NOT put markup in the resource files, just put the static content into them.
If you need to serve different views based on culture, consider doing something else. For example, if you're using MVC you could write a view engine that return the correct markup for each culture.
#ciscoheat what you say is correct, LOCALIZE control is the right thing to use for big chunk of data.

Preferred method for linking to stylesheets from a UserControl?

We primarily use an ASP.NET environment at work. Right now I'm building an application which uses "Modules", which is just a UserControl, with its' Javascript right in the control, and a link element to the stylesheet for that control. I want to keep it modular, and would like the style of this control to be independent from the markup/javascript.
So I'm wondering what the preferred method of doing this is? Obviously if I didn't want the "theme" functionality I'm after, I could just use style tags at the top of the control. Right now I have a link element, as I said, and this isn't proper I don't think.
Does anyone have any preferred methods, and if so, what and why?
I considered ASP.NET themes briefly, but the idea of these controls are a little different, I think.
It's basically a shopping cart system. I don't want to get into it all, but we are using a really neat security system, and we don't want to use a premade shopping cart. I'm developing a set of controls that can be dropped on a page, for instance in SiteFinity (which is the CMS system we use) or for any other project we might have. Normally I would compile these into a DLL so we get ACTUAL controls we can drag & drop from the toolbox, then I could use internal "generic" styling and allow for any additive styling someone might want, as well as supplying a few fancier styles as well.
This is the first time I've ever done this, or really the first time anyone in our shop has done this either so I'm kind of figuring it out as I go. I might be pretty far off-base, but hopefully I'm not.
Right, the idea for this is to have a "theme", which is really just a CSS file and a jQuery template. I have them named the same, and have a Theme property on the usercontrol to set it.
When these controls are finalized, I might refactor the javascript to a RegisterScriptBlock on the code-behind, but for now they just in script tags on the control itself.
What prompted this question was DebugBar for IE, giving me warnings that link elements are not allowed inside a div. I don't much care, but after thinking about it, I had no idea how to link to the css file without doing that. I considered very briefly having an 'empty' link tag on the master and then setting THAT in the code behind on Page_Load of the UserControl, but that just seems like ass.
I could use #import I guess but I think link tags are preferred, correct?
It sounds like you're rolling your own theme engine... why not use ASP.NET Themes?
If you're determined to do it yourself, here's some code from the CssFriendly project that may be of interest to you. (I think it should be ok to post the code as long as I cite where it's from.) The .css files are flagged as Embedded Resource and the code below is used to include them as needed.
string filePath = page.ClientScript.GetWebResourceUrl(type, css);
// if filePath is not empty, embedded CSS exists -- register it
if (!String.IsNullOrEmpty(filePath))
{
if (!Helpers.HeadContainsLinkHref(page, filePath))
{
HtmlLink link = new HtmlLink();
link.Href = page.ResolveUrl(filePath);
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
page.Header.Controls.Add(link);
}
}
I think what you're supposed to do is use Page.RegisterScriptBlock to register your script blocks. Best-case you shouldn't have them inline in your ascx inside script blocks. This isn't always possible, but theoretically it's the best way.
Ideally your styles should be separate from your markup as well. Your controls can have classes and IDs, but your style is based on your application and not your controls. Controls can theoretically be used in other applications where you might want a different style.
It depends on how big your app is, and whether or not it's dependent on Themes elsewhere, IMHO.
If you're using a .skin file, or if the majority of the app is also plugged into the theme, you might as well go with the theme.
But if it's just a few styles you need, you're better off to set the stylesheet manually, keep your css file external (inline styles are a PITA and defeat one of the core purposes of css).
In either case, don't forget to set the CssClass attribute on your controls.
To be proper I would have an import.css file - structure the naming of the classes to follow your controls, and import the styles within the header of the document.
If you have a module called "30DayPricingCalc" then you could name the classes/id's:
30DayPricingCalc.css
.30daypricingcalc_main_content
{
...
}
Also if you haven't I would setup a list of generic reusable styles to save you room. Since elements will allow multiple classes per object.
Also, link tags matter a lot less now than they used to. we're well past support for IE5 generation browsers and IE6 supports the #import tag.
Cheers!

Resources