CODEWITHSUNDEEP
c#asp.netcss
Tarik
Tarik

Reputation: 81711

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=""" +   ResolveUrl("~/Resources/Styles/MainMaster/MainDesign.css") + @""" type=""text/css"" rel=""stylesheet"" />" });
cssFiles.Add(new Literal() { Text = @"<link href=""" + 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.

Upvotes: 25

Views: 48725

Answers (4)

Tarik
Tarik

Reputation: 81711

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=""" + 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.

Upvotes: 44

J. Horn
J. Horn

Reputation: 81

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.

Upvotes: 4

Igor De Ruitz
Igor De Ruitz

Reputation: 21

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

Upvotes: 2

Kay
Kay

Reputation: 712

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.

Upvotes: 5

Related Questions