add css stylesheet from macro partial in umbraco 5

Press Ctrl / CMD + C to copy this to your clipboard.

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

0

Add CSS Stylesheet from Macro Partial in Umbraco 5

Razor

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

Copy Link
Mila 60 posts 79 karma points

Mar 21, 2012 @ 19:38

0

Hi Kim,

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

Copy Link
Grant Thomas 291 posts 324 karma points

Mar 21, 2012 @ 20:06
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")
```
Copy Link
Eduardo Rivas 17 posts 37 karma points

Apr 21, 2012 @ 22:39
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?
Copy Link
Rae Melton 10 posts 72 karma points

Jan 20, 2015 @ 22:12

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?

Copy Link
Simon 692 posts 1068 karma points

Apr 17, 2015 @ 23:04

0

Any ideas pls?

Thank you

Copy Link
Arlan 58 posts 184 karma points

May 28, 2015 @ 01:18

0

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

Copy Link

Jakub 10 posts 89 karma points

Aug 15, 2015 @ 12:12

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 :)

Copy Link

Anders 4 posts 74 karma points

Nov 08, 2015 @ 21:49

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

Copy Link
Sumesh KP 34 posts 107 karma points c-trib

Jun 06, 2017 @ 12:36

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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?