ASP.NET MVC Modify CSS links via code (runtime/development)? - asp.net

does anyone know of a good way of doing the following, I need to have available via CSS Links up to 5 CSS files in one, this is pretty bad for trips to the server.. but it helps me keep it organized...
At runtime i automatically consolidate and minify all css files into 1 ...
What i was wondering is how to have links to css files in my source at design time and different at runtime??
Is there some special workaround i can do with <% %> tags?
Thanks

You could have one link to the combined file in your HTML and use a build event to combine your separate ones in to the one file. That way, during dev you always see your neat separate files but the designer (and at runtime) will always see the combined file. The designer doesn't care of there is one or 5 files but you do. This way you don't have to do any conditional design-time only logic and your code will be cleaner.

I use if (false) with HtmlHelper extensions to achieve similar effects. It might look like:
<% if (false) { %>
<link href="../content/styles/jquery-ui.css" ...
<link href="../content/styles/site.css" ...
<% } %>
<%= Html.CSS( "jquery-ui.css", "site.css", ... ) %>

You can try the following in your view or master page:
1) Leave the min'ed CSS links in as they are
2) Use this conditional block to include the CSS files directly as needed for design time:
<% if (this.DesignMode) { %>
<link rel="stylesheet" type="text/stylesheet" href="css/styles.css" />
<% } %>

Related

Conditional includes in ASP

We have a number of categories with products in an ASP eCommerce site and, based on the category, would like a particular file to be included. For example, if URL is:
viewPrd.asp?idproduct=6&idcategory=18
then based on idCategory=18 I would like to include:
<!--#include file="menu18.asp"-->
If idCategory=19 then I would like to include:
<!--#include file="menu19.asp"-->
and so on. Any assistance would be appreciated.
I use a script taken from https://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=9796&lngWId=4 (dynamic ASP inclusion)
So after including that script in your code, you just have to write:
myMenu = Request.Querystring("idCategory")
Include("menu"&myMenu&".asp")
Unfortunately, include files are a feature of IIS, not ASP. They are included before the page is sent to the ASP-processor that interprets your ASP code.
For this reason you can't have conditional includes.
The includes are already in place when the ASP code is executed.
To have conditional code in ASP you could use script components (WSC files), which you can include/load conditionally, or use big if...then or case.. constructions inside an include.
More info on the use of WSC's can be found here
As far i know its not possible on a "elegant way", but i suggest you to take a look in those links:
is it possible to issue dynamic include in asp-classic?
https://support.microsoft.com/en-us/kb/192144
Regards.
Yes, its possible. Just leave the include statements outside the <% %> code delimiters.
This is my quick and dirty solution and it works:
<% session("lang") = request.querystring("lang") %>
<%if (session("lang") = "es" or session("lang") = "") then %>
<!--#include file="espanol.asp"-->
<% else %>
<!--#include file="ingles.asp"-->
<% end if %>
<!--#include file="precios.asp"-->
IIS will include the two files, but ASP will use only the file that satisfies the if conditions.

Best way to inject server-side variables/function results into CSS under ASP.NET?

My ASP.NET app has some server-side methods whose results I'd like to inject into my CSS files. For example, rather than hard-code the URL to a logo, I might like to insert a call to MyHelperClass.GetCurrentLogoUrl() in the middle of the CSS file.
If I were writing an ASPX page, I could use code render blocks x (that is, stuff like "<%=MyHelperClass.GetCurrentLogoUrl()%>") in the middle of my HTML markup. It would be nice to do something similar for CSS.
There are some CSS preprocessing frameworks, e.g. dotless, and they seem to have some cool features, but I'm not aware of any of them supporting making C# calls like this.
You could just make an aspx page and link to it when including a stylesheet. You'll miss out on css highlighting though.
<link href="http://domain.com/css.aspx" type="text/css" rel="stylesheet">
This has the potential to generate unnecessary overhead though, especially if most properties you're modifying do not change at runtime. In that case you may want to research TT files which basically generate other files when deployed - in your case, you could have it generate the css with whatever complex logic.
David P's answer to ASP.NET MVC URL auto-resolution in CSS files suggests one approach. If you give your CSS files the .aspx extension and then use a Page directive to tell ASP.NET that it's actually a CSS file, like so
<%# Page Language="C#" ContentType="text/css" %>
then you can write CSS, but also use the normal ASP.NET code render blocks. It feels a little bizarre to name CSS files .aspx, but an initial test suggests this could work.
UPDATE: Props to o.v. for pointing this out even faster than me.
You can inject a classname into the html, something like:
<input type="text" id="myTextBox" cssClass="<%=myClassName%>" />
You can also change the class name in the code behind using the .attributes method.
Add the following into your <head></head> section of your page
<style runat="server" id="cssPhoneResize" type="text/css"></style>
Then from your server-side method:
string logoUrl = "/images/logo2.jpg";
cssPhoneResize.InnerHtml += "#Image{-image: url(" + logoUrl + ");}";
Hope this helps!

Prevent ASP.NET themes from auto-adding CSS files

Having to deal with URL rewriting, I decided to programmatically add CSS references rather than relying on the automatic behavior of ASP.NET to add all CSS files within a theme automatically to the <head> of an ASPX page.
I suceeded in adding the CSS file programmatically by using
<link type="text/css" rel="stylesheet" runat="server" id="CssFile" />
and setting the actual URL it in code behind.
My question is:
Is there a way to prevent the ASP.NET "engine" from automatically adding all CSS files into the <head> of my ASPX/master page?
(Of course, I still could go with my own folders and completely drop the App_Themes concept)
You can prevent this feature by adding the following attributes to the Page directive:
<%# Page ... EnableTheming="false" Theme="" StylesheetTheme="" %>
I do not believe you can tell a skin to not include the files within it, that was the killer for us when it came to using them as it referenced all the css files not just the ones we needed and we needed maximum efficiency.
<head runat="server" visible="false" />
<%# Master Language="C#" AutoEventWireup="true" Inherits="Front" Codebehind="Front.master.cs" **EnableTheming="false"** %>
was my solution to getting around the problem.

ASP.NET MVC - CSS Class in a ViewUserControl - The class or CssClass is not defined

I have a <table/> in a ViewUserControl that I have given the tag a class="tblRaised" attribute/value. Visual Studio keeps underlying tblRaised and telling me - The class or CssClass is not defined.
Why is the intellisense engine trying to validate my CSS class names here? Anyone else run into this? Is this a bug? How would intellisense even know where my css file was in a ViewUserControl?
Because the styles are usually included in your view or master page, VS can't find them in your ViewUserControl. If you add something like the following to your ViewUserControl you can get around the issue (and get intellisense) without including the CSS twice.
<% if (false) { %>
<link rel="stylesheet" type="text/css" ...
<% } %>
This will get the intellisense since it can find the stylesheet, but the use of if (false) actually prevents it from being included at runtime.
Typically in the ASP.NET world (not MVC) you'd specify your styles in the master page or your current page. VS then reads all the style information and then tries to help with intellisense to output the class names from your styles onto your aspx page while typing. With MVC it is trying to do the same thing, but it's probably just not finding your files, and throwing up a warning.
Just ignore it for now, I'm sure they are going to try and support that with the 1.0 release.
It's a known bug. Visual Studio IntelliSense is being too helpful. :)
Use this workaround in your user control markup files, it will make VS IntelliSense happy:
<% if (false) { %><link href="../../Content/Css/MyCssDefinitions.css" rel="Stylesheet" type="text/css" /><% } %>

How to stop Visual Studio css intellisense breaking when css is added via a custom control

I have created a simple Asp.Net custom control which automatically combines all the correct stylesheets to send to the client (based on browser type/version/etc).
However, because at design-time the head tag looks something like this...
<head>
<cc:CssControl runat="server" />
</head>
...VS is unable to provide intellisense for css class names. I've tried creating a ControlDesigner for the control that returns some hard-coded <link />'s by overridding GetDesignTimeHtml(), but that didn't seem to help either.
Anyone have any ideas for this?
Thanks,
Simon.
This css intellisense doesn't work in usercontrols.
I have almost tried everything to get it worked.
But you can try it in the user control just like we include jquery intellisense in UserControl. I havent tried it out yet.
<% if (false) { %>
<link rel="Stylesheet" href="style.css" type="text/css" />
<% } %>
I Hope it works

Resources