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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With