Adding StyleSheets Programmatically in Asp.Net

I want to add StyleSheets programmatically in the head section but one of the examples I saw seemed to need to many lines of code to add just one style sheet even though I may need a lot:

Example Code:

HtmlLink css = new HtmlLink();
css.Href = "css/fancyforms.css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
Page.Header.Controls.Add(css);

I also use Page.Header.RenderControl() method but it didn’t work either. Object null something error was thrown.

I also used Page.Header.InnerHtml and InnerText += "<link .... "/> things but they threw the Literal error which is I think common error.

I used this code :

List<Literal> cssFiles = new List<Literal>();
cssFiles.Add(new Literal() { Text = @"<link href=""" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" +   ResolveUrl("~/Resources/Styles/MainMaster/MainDesign.css") + @""" type=""text/css"" rel=""stylesheet"" />" });
cssFiles.Add(new Literal() { Text = @"<link href=""" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" + ResolveUrl("~/Resources/Styles/MainMaster/MainLayout.css") + @""" type=""text/css"" rel=""stylesheet"" />" });
AddStyleRange(cssFiles);

private void AddStyleRange(List<Literal> cssFiles)
{
   foreach (Literal item in cssFiles)
   {
     this.Header.Controls.Add(item);
   }
}

It worked at first but when I change the pages it stopped working.

I am using Master Page and I am writing these codes on Master.cs file and also some people recommended to use this.Header instead of Page.Header but when I built it throws an error which says I cannot declare that like this.

It shouldn’t be that hard to add many styles.

It is getting complicated.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Okay, here is the solution I am currently using :

I created a helper class :

using System.Web.UI;
using System.Web.UI.WebControls;

namespace BusinessLogic.Helper
{
    public class CssAdder
    {
        public static void AddCss(string path, Page page)
        {
            Literal cssFile = new Literal() { Text = @"<link href=""" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" + page.ResolveUrl(path) + @""" type=""text/css"" rel=""stylesheet"" />" };
            page.Header.Controls.Add(cssFile);
        }
    }
}

and then through this helper class, all I have to do is :

CssAdder.AddCss("~/Resources/Styles/MainMaster/MainDesign.css", this.Page);
CssAdder.AddCss("~/Resources/Styles/MainMaster/MainLayout.css", this.Page);
CssAdder.AddCss("~/Resources/Styles/Controls/RightMainMenu.css", this.Page);
//...

So I can add as much as I want with one line of simple code.

It also works with Masterpage and content page relationships.

Hope it helps.

P.S: I don’t know the performance difference between this and other solutions but it looks more elegant and easy to consume.

Method 2

I’ll paste the thing which worked for me:

HtmlLink link = new HtmlLink();
//Add appropriate attributes
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
link.Href = "/Resources/CSS/NewStyles.css";
link.Attributes.Add("media", "screen, projection");
//add it to page head section
this.Page.Header.Controls.Add(link);

Even I searched a lot on this, I’d to add a overriding style sheet when a button is clicked. I used the above code and it worked perfectly to me.

Method 3

I define a generic HTML <link> and set the href attribute programmatically.

For example, in the page <head> I have:

<link id="cssStyle" runat="server" rel="stylesheet" type="text/css" />.

Then in Page_Load set the Href property of cssStyle:

cssStyle.Href = "path/to/Styles.css";

Seems a bit cleaner with the upside of having the design control over placing the <link> in the desired order.

Method 4

I went a step over, I wanted a method that makes me impossible to add include duplicates, something like ClientScriptManager.RegisterClientScriptInclude().
The solution is to give an ID to the control added in the Header section.

if (!String.IsNullOrEmpty(Key))
     if (Page.Header.FindControl(Key) != null) return;

HtmlLink link = new HtmlLink();
if (!String.IsNullOrEmpty(Key)) link.ID = Key;
link.Href = StyleUrl; 
link.Attributes.Add("type", "text/css"); 
link.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(link);

For the complete article I wrote: http://www.idea-r.it/Blog.aspx?Article=49

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating