Load CSS Dynamically in ASP.NET

Dynamically adding a CSS file from an ASP.NET Server Control

Here's how you would normally add a CSS programatically:

protected void Page_Init(object sender, EventArgs e)
{
    var link = new HtmlLink();
    link.Href = "~/styles/main.css";
    link.Attributes.Add("rel", "stylesheet");
    link.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(link);
}

You might need to put a runat="server" in the head tag:

<head runat="server">
    <title>Add CSS example</title>
</head>

Loading css dynamically in ASP.NET

Option 1:

You can add runat="server" attribute in your css link and set href value from code behind file where you can dynamically set it.

Option 2:

HtmlLink link = new HtmlLink();
link.Attributes["href"] = filename;
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
Page.Header.Controls.Add(link);

Load css dynamically in asp.net?

A good approach for a WebForms-only project is to link to an .ashx handler in your page instead of a static CSS file:

<link rel="stylesheet" type="text/css" href="DynamicStyles.ashx" />

Then create the handler (add a 'Generic Handler' item from Visual Studio) and within it you can load the CSS from a database or wherever. Just make sure you set the content type correctly in the handler, so that browsers recognise the response as a valid stylesheet:

context.Response.ContentType = "text/css";

Load css dynamically in asp.net?

A good approach for a WebForms-only project is to link to an .ashx handler in your page instead of a static CSS file:

<link rel="stylesheet" type="text/css" href="DynamicStyles.ashx" />

context.Response.ContentType = "text/css";

ASP.Net MVC 4 Load css File dynamically

You could have a query string parameter that sets whichStyleFlavor:

@{
    string whichStyleFlavor = "1";
    ... some logic to check what they requested and change whichStyleFlavor
}

@Styles.Render("~/Content/style" + whichStyleFlavor + ".css")

Or you can do it on the client, by switching the CSS tag.

From here:

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}

How to dynamically add links to CSS and Javascript files in ASP.NET Core

I'm assuming the CSS files that are selected are persisted via a database by your CMS, and rather than having a static list of CSS ids, you're actually pull the info from a database. In that scenario, your best bet is a view component:

public class CustomCssViewComponent : ViewComponent
{
    private readonly MyContext _context;

    public CustomCssViewComponent(MyContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var ids = // pull in the ids from your context;
        return View(ids); 
    }
}

Now, you're essentially just passing in the ids as the model for the view backing this view component. So, go ahead and create that view at Views/Shared/Components/CustomCss/Default.cshtml:

@model List<int>
<link href="/css/customCss_@(String.Join("_", Model)).css" rel="stylesheet" />

Finally, in your layout or wherever you want this included:

@await Component.InvokeAsync("CustomCss")

Rinse and repeat with your custom JS. You can probably handle your custom HTML the same way, but you may also consider using custom tag helpers.

Dynamically loading CSS elements in asp.net

You can include an extra CSS file that points to an ASPX page:

<link rel="stylesheet" type="text/css" href="/CustomStyles.aspx" />

Then in CustomStyles.aspx change the default content-type:

Response.Clear()
Response.ContentType = "text/css"

Then just start outputting your styles:

Response.Write("#awesome-button{color:" & ColorFromDatabase & ";}"

Make sure that this file is included after the other styles so that it takes precedence. You might want to also throw an !IMPORTANT in there, too.

Response.Write("#awesome-button{color:" & ColorFromDatabase & " !IMPORTANT;}"

Adding CSS at runtime to an ASP.net master page.

You can put on the top of the masterpage on aspnet literal and construct the link in the pageload of the masterpage that way you could put a css there

<asp:Literal ID="Css" runat="Server" />

Then on the page load

var cssfilename  = GetCssFromDatabase();
Literal.Text = "<link rel=\"stylesheet\" media=\"all\" " + cssfilename  + "\" />";

Load CSS Dynamically in ASP.NET

Dynamically adding a CSS file from an ASP.NET Server Control

Loading css dynamically in ASP.NET

Load css dynamically in asp.net?

Load css dynamically in asp.net?

ASP.Net MVC 4 Load css File dynamically

How to dynamically add links to CSS and Javascript files in ASP.NET Core

Dynamically loading CSS elements in asp.net

Adding CSS at runtime to an ASP.net master page.

Related Topics

Leave a reply