Dynamically Generate CSS File from Database in ASP.NET MVC

Dynamically generate CSS file from database in ASP.NET MVC

I think the simplest way would be to add something like the following action method to a controller:

public class CssController : Controller {
    public ActionResult GetCss() {
        StringBuilder sb = new StringBuilder();
        Dictionary<string, string> cssValues = new Dictionary<string, string>();
        // populate dictionary with values from your database
        sb.AppendLine(".myDivClass {");
        foreach (var entry in cssValues) {
            sb.AppendLine(entry.Key + ": " + entry.Value);
        }
        sb.AppendLine("}");
        return Content(sb.ToString(), "text/css");
    }
}

Now in your page you can reference it like so:

<link href="<%: Url.RouteUrl(new { controller=  "CssController", action = "GetCss" }) %>" rel="stylesheet" type="text/css" />

OP EDIT: I made some small changes to the method, but the general premise remains. This is the version I used:

public class CssController : Controller
{
    public ContentResult GetTheme()
    {
        var builder = new StringBuilder();
        IDictionary<string, IDictionary<string, string>> css = new Dictionary<string, IDictionary<string, string>>();

        /* Populate css object from the database */

        foreach (var selector in css)
        {
            builder.Append(selector.Key);
            builder.Append(" { ");
            foreach (var entry in selector.Value)
            {
                builder.Append(string.Format("{0}: {1}; ", entry.Key, entry.Value));
            }
            builder.AppendLine("}");
        }

        return Content(builder.ToString(), "text/css");
    }
}

Dynamically generated Javascript, CSS in ASP.NET MVC

The best solution so far I found for that is the following:

Dynamic Javascript and CSS in ASP.NET MVC using Razor Views

You just create views: CurrentUserOverrides.css.cshtml, ContactViewModel.js.cshtml. This views will contain single HTML block (<script> or <style>), so IntelliSense works fine. Then you create controller that renders that view, trims the root tag and return content with appropriate content type.

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";

How to generate css by database in asp.net..?

If you use asp.net, use inline html. Read here

<div style="font-size: <% Response.Write(i)%>">
        Hello World<br />
</div>

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";

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.

---

Related Topics