Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kim Skotte Larsen 5 posts 25 karma points
    Mar 14, 2012 @ 19:37
    Kim Skotte Larsen
    0

    Add CSS Stylesheet from Macro Partial in Umbraco 5

    Hi,

     

    I'm trying to create a macro partial in Umbraco 5, and add css stylessheets and javascripts to the <head> element from the macro partial.

    I have tried to add a @RenderSection("head", required: false) in my layout template, and add a

    @section head

    {

    <link rel="stylesheet" href="@Url.Content("~/Content/Styles/article.css")" type="text/css" />

    }

    to my macro partial, but the above codesnippet does not get added to the rendered page.

     

    Does any one have a solution to my problem or some kind of workarround?

     

    /Kim

  • Mila 60 posts 79 karma points
    Mar 21, 2012 @ 19:38
    Mila
    0

    Hi Kim,

    have you tried to use a tag <head> instead @section head?

  • Grant Thomas 291 posts 323 karma points
    Mar 21, 2012 @ 20:06
    Grant Thomas
    0

    Just to be clear, are you using a Partial or a Macro Partial?

    If you're using a Partial then your setup should look like this:

    Partial:

    @inherits RenderViewPage
    @using Umbraco.Cms.Web;
    <link rel="stylesheet" href="/content/styles/article.css" type="text/css"/>

    Template:

    @inherits RenderViewPage
    @using System.Web.Mvc.Html;
    @using Umbraco.Cms.Web;

    <html>
      <head>
        @Html.Partial("nameOfPartial")
      </head>
      ..and so on..
    </html>

    If you're using a Macro Partial, then you should have a corresponding Macro, such that your Macro Partial is the same as your Partial, and the Macro has the Macro Partial selected as the 'Partial View'. Then the only real difference is in your Template, which instead of 'Html.Partial' would be:

    @Umbraco.RenderMacro("nameOfMacro")
  • Eduardo Rivas 17 posts 37 karma points
    Apr 21, 2012 @ 22:39
    Eduardo Rivas
    0

    I have the same issue as the OP. It seems that when using Partial Views, sections can be defined and populated without issue, but with Macros it's another story. This is what I've got: 

    Macro: myMacro

    Macro Partial: /Views/Umbraco/MacroPartials/myMacro.cshtml

    In the main Layout:

    <!DOCTYPE html>
    <html lang="en"> 
    <head>
         @RenderSection("Stylesheets", required: false)
         @RenderSection("Scripts", required: false)
    </head>
    <body>
    @Umbraco.RenderMacro("myMacro")
    And so on...
    </body>
    </html>

    In the Macro Partial

     

    @inherits PartialViewMacroPage
    @using Umbraco.Cms.Web
    @using Umbraco.Cms.Web.Macros
    @using Umbraco.Framework

    @section Stylesheets {
    <link rel="stylesheet" href="/some.css" type="text/css" media="screen" />
    }
    @section Scripts {
    <script type="text/javascript" src="/someScript.js"></script>
    }
    More stuff here... 

    However, when the page is rendered, the stylesheet and the script are not included. The rest of the Macro works fine. Is this a bug, or a known limitation of Macros? Does it mean we have to use Partial Views every time we want to populate sections?

     

  • Rae Melton 10 posts 72 karma points
    Jan 20, 2015 @ 22:12
    Rae Melton
    0

    I'm currently developing in Umbraco 7 and haven't been able to find any solution to this issue either.

    I have Partial View Macros that I'm using as widgets (event calendars, etc.). It would be really nice to be able include stylesheets in the <head> section of my template from the Macro (or javascript files in the footer). I really want the Macro to be independent and be able to be dropped in a template without any additional configuration (including external stylesheets and javascript files in the parent templates that include the macro).

    Is there any way to accomplish this without directly including the styles and/or javascript directly in the macro where it will get printed out at inefficient locations in the HTML?

  • Simon 687 posts 1062 karma points
    Apr 17, 2015 @ 23:04
    Simon
    0

    Any ideas pls?

    Thank you

  • Arlan 58 posts 184 karma points
    May 28, 2015 @ 01:18
    Arlan
    0

    I run into the same problem, hopefully someone can chime in

  • Jakub 10 posts 89 karma points
    Aug 15, 2015 @ 12:12
    Jakub
    2

    Hi, the problem is because of ASP.NET pipeline. It looks like this: template -> page -> macro/partials. The page state is the last where we are able to use @section. I suppose that the only solution for now, is just adding css / js and others manually to the page not to the partial view. (In pure ASP.NET Razor in partial views, @section does not work too. So it's not the fault of Umbraco)

    Hello agin guys. I found a way to solve our problem. We just need this Html helper:

    HtmlExtensions.cs

    public class Resource
    {
        public string Expression { get; set; }
        public string Section { get; set; }
    }
    
    public static class HtmlExtensions
    {
    
        public static MvcHtmlString AddResource(this HtmlHelper html, List<Resource> resources)
        {
            foreach (var resource in resources)
            {
                AddResource(html, new Resource() { Expression = resource.Expression, Section = resource.Section});
            }
    
            return MvcHtmlString.Empty;
        }
    
        public static MvcHtmlString AddResource(this HtmlHelper html, Resource resource)
        {
            var resources = html.ViewContext.HttpContext.Items[resource.Section] as List<Resource>;
            if (resources != null)
            {
                resources.Add(new Resource() { Expression = resource.Expression });
            }
            else
            {
                resources = new List<Resource>()
                {
                    new Resource() { Expression = resource.Expression }
                }; 
            }
    
            html.ViewContext.HttpContext.Items[resource.Section] = resources;
    
            return MvcHtmlString.Empty;
        }
    
        public static MvcHtmlString RenderSection(this HtmlHelper html, string section)
        {
            var resources = html.ViewContext.HttpContext.Items[section] as List<Resource>;
    
            if (resources == null)
            {
                return MvcHtmlString.Empty;
            }
    
            string resourcestring = resources.Aggregate("", (current, resource) => current + (" " + resource.Expression + "\n"));
    
            return new MvcHtmlString(resourcestring);
        }
    }
    

    USAGE

    ---> Somewhere in partial (for multi scripts):

    @Html.AddResource(new List<Resource>(){
    new Resource() { Expression = "<css>", Section = "css"},
    new Resource() { Expression = "<Script>", Section = "js"}})
    

    or (for single script):

    @Html.AddResource(new Resource() { Expression = "<css>", Section = "css" })
    

    And usage in layout file:

    @Html.RenderSection("css")
    

    It's all, tested and it works great :)

  • Anders 4 posts 74 karma points
    Nov 08, 2015 @ 21:49
    Anders
    0

    Hi Jakub

    To me this is helpfull. How will i be able on adding @Html.RenderSection("css") into tag?

    When adding into head tag only styles form one of my macropartials is added. ?

    Thanks

  • Sumesh KP 24 posts 93 karma points
    Jun 06, 2017 @ 12:36
    Sumesh KP
    0

    I had a situation to call the @section in the Macro partial. Jakub's solution solved my issue. My Umbraco version is 7.2.

    Thanks Jakub

Please Sign in or register to post replies

Write your reply to:

Draft