Megan Perry-Thibault (Customer) asked a question.

May 28, 2026 at 6:32 PM
How do the Html.StyleSheet and Html.Script helper tags work?

I know how to use both of them, so that is not what I am asking. What I specifically need to know is how they function (or I guess how their is code written) as I need to create custom helper tags that do similar things for a specific project. (Ie take an input then inject into a specific Html.Section).

 

[But also this would be so much easier if '@Section' worked. Please make a way to include this SF].

  • 4 answers
  • 119 views

  • Jonathan Read (Progress Software)

    Can you expand a bit more on the project goals? What do you mean "take and input and inject it"? Input from what and where? Are the included sections not enough "top", "bottom", "head"?

  • Megan Perry-Thibault (Customer)

    What I need to be able to do is replicate the Script and StyleSheet helpers to work with direct code rather than a linked sheet.

     

    In other words: My goal is to create something that works like this: @CustomHelpers.Css(".one-off-class{font-size:2rem}", "head") that can be used the same @Html.StyleSheet(Url.Content("/stylesheeturl.css"), "head").

     

    The intention being to add them to a specific widget view as @CustomHelpers.Css(@Model.Item.Fields.Css, "head") and @CustomHelpers.Js(@Model.Item.Fields.Js, "bottom") (the same way you can include the Script & StyleSheet helpers) where the Fields are generated from the content item which we added fields to called Css and Js.

     

    We need this to keep styles and scripts coupled with the HTML code that uses them as the code is for HTML5 graphics. Simply including them in the view as <style>@Model.Item.Fields.Css</style> and <script>@Model.Item.Fields.Js</script> is invalid markup (and not ADA compliant which is the whole reason we are having to create HTML5 graphics in the first place rather than continue using flat image banners).

  • Jonathan Read (Progress Software)

    I would take a look at how the Script/Style widgets work since it allows you to do this kind of behavior or writing JS/CSS and injecting it into the page either inline, body, or head.

     

    here is how the style widget does it when "head" is selected in the widget properties.

    https://github.com/Sitefinity/feather-widgets/blob/master/Telerik.Sitefinity.Frontend.InlineClientAssets/Mvc/Controllers/StyleSheetController.cs#L144

     

    Script, Styles, Embed widgets:

    https://github.com/Sitefinity/feather-widgets/tree/master/Telerik.Sitefinity.Frontend.InlineClientAssets

  • Megan Perry-Thibault (Customer)

    Ok, so after two weeks of beating my face into a wall, I have figured out there is a much simpler way to inject code into the head section.

     

    I wrote the following helper:

    1. public static void InsertCss(string Css)
    2. {
    3. var CssMarkup = "<style>" + Css + "</style>";
    4. var page = HttpContext.Current.Handler.GetPageHandler();
    5.  
    6. page.Header.Controls.Add(new LiteralControl(CssMarkup));
    7.  
    8. }

    Which functionally in the widget view is:

    1. if (!string.IsNullOrEmpty(Model.Item.Fields.Style))
    2. {
    3. var style = Model.Item.Fields.Style;
    4. DFSHelper.InsertCss(style);
    5. }

    And viola my CSS is now showing up as <style>[field input]</style> in the header where it needs to.

     

    Now I just need to figure out how to kick Js to the end of <body></body>.