Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding StyleSheets Programmatically in Asp.Net

Tags:

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.

like image 594
Tarik Avatar asked May 31 '10 10:05

Tarik


People also ask

How do I refer CSS files in ASPX?

Drag and drop css below header file->then go to downloaded css template and open that template -> right click on the template and click the option "view page source" -> copy the template body code-> open the master page -> paste the template body code within the body of master page.

What is StyleSheet in asp net?

Style sheet is a set of characteristics to external functionality(formating features) of a tag. Style sheets consist of a number of rules that define how various web page elements should be displayed. Style sheet can be classified into 3 types. Inline style sheet.


3 Answers

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.

like image 126
Tarik Avatar answered Nov 24 '22 01:11

Tarik


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.

like image 32
Kay Avatar answered Nov 23 '22 23:11

Kay


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.

like image 27
J. Horn Avatar answered Nov 24 '22 01:11

J. Horn