How to create Dynamic CSS blocks from Controller

Question

(searched - found this, this and this - which return CSS from a file or use 3rd party plugings, my needs are simpler). I am not looking to serve a Css from a file

I am building simple CSS blocks on the fly in the ASP controller, and I want to append it to the end of the page & prevent caching since it changes often.

Question: Why does the dynamic CSS block not render in the page/ MVC View call not work, anything I can do to help debug this?

In my ASP MVC razor View @Section:

//Page stuff... at the very bottom of my MVC Razor view
//..
//Append my custom CSS styles
@section stylesSection {
 <styles>
   // is this not correct, why does the browser not load this??
   <link href="@Url.Action("GetDynamicCssBlock", "DynamicCssCtlr")" rel="stylesheet"  type="text/css"  /> //updated with type type="text/css" 
 </styles>
}

My custom Css block Controller which serves the raw CSS content, that

public class DynamicCssCtlr: Controller
{
    public ContentResult GetDynamicCssBlock()
    {
        //string cssBlock = GetCssBodyFromDb(); 
        //simplified...
        string cssBlock = @".pDiv { background-color: yellow; }";
        return Content(cssBlock , "text/css");
    }
}

Is my link/content type wrong, or should this be in the head styles section? why does it not render, is my content type or return type wrong?

You would need to give you section a name (say) `@section styles { ... }` and in the layout file used by this view add `@RenderSection("styles", false)` in the `` — , Jan 23 '17 at 01:36
Hi @StephenMuecke I added that, and also created a dot net fiddle here https://dotnetfiddle.net/FqDclh I also found a small error in my `` i added the _type="text/css"_ — Transformer, Jan 23 '17 at 03:27

score 0 · Accepted Answer · answered Jan 25 '17 at 01:44

I found that the issue: The code returned was inconsistent on what and how it was appended to the results and the view, at the mercy of the helper leveraged. Since it was inconsistent, different tags are emitted/appended (or not). It was left up to the developer to experiment and find out, and the documentation missing or the ASP team did not envision that use.

Either way - I got it to work, and I am sharing my class to help others.

public static class CssFromServer
{

  //Handle both **Dynamic CSS** and Statics CSS files
  internal static IHtmlString ServerCss(this HtmlHelper htmlHelper, bool loadFromfile, string pathToFile)
  {    
   if(loadFromfile)
   {
    /**check valid path is invalid**/
    if(String.IsNullOrEmpty(pathToFile)   
    return null; 

    // take a path that starts with "~" and map it to the filesystem.
    var cssFilePath = HttpContext.Current.Server.MapPath(pathToFile.Trim());
    // load the contents of that file
    try
    {
      var cssText = File.ReadAllText(cssFilePath);
      // I had to do this to get it working          
      return htmlHelper.Raw("<style>\n" + cssText + "\n</style>");
    }
    catch
    {
      // return nothing if we can't read the file for any reason
      return null;
    }
   }     
   //not loading from file
   return htmlHelper.Raw("<style>\n" + CreatMyServerCss(htmlHelper) + "\n</style>");
  }

  //my helper
  internal static IHtmlString CreatMyServerCss(HtmlHelper htmlHelper)
  {
   // build your blocks here 
   return @"testcss { background-color: blak; } ";
  }    
}

You could even use https://stackoverflow.com/questions/4492748/dynamic-css-for-asp-net-mvc . — Tushar, May 03 '19 at 16:47

How to create Dynamic CSS blocks from Controller

1 Answers1