Orchard CMS: Conditional CSS Class based on Layer

Question

I am trying to add a css class if I am in a particular layer.

So 2 questions:

1. Is it possible to identify the current layer in a Razor view. Something like:

   if(currentLayer == "TheHomepage") { ... }

2. Is the the right way to approach HTML conditional on layer, or is there a better way to do this in Orchard?

Flutter

Answers are correct, but you seem to have a couple of misunderstandings about layers and widgets. There can be any number of active layers for any given request, not just one, so the "current layer" doesn't really exist, except maybe inside the view code for a widget, as each widget belongs to one layer only. Layers essentially are conditionals: they are like a big if structure around widgets, so if you want to do stuff based on whether a layer is active, just create a widget that does that stuff, and stick it in that layer (which is pretty much Marco's answer) – Distant

Answer 1

If you need to see which layers are currently active, you can do something like this:

@using Orchard.Widgets.Services
@{
    var widgetsService = WorkContext.Resolve<IWidgetsService>();
    var ruleManager = WorkContext.Resolve<IRuleManager>();

    var activeLayerNames = new List<string>();
    foreach (var layer in widgetsService.GetLayers()) {
        try {
            if (ruleManager.Matches(layer.LayerRule)) {
                activeLayers.Add(layer.Name);
            }
        } catch(Exception ex) {
            // Problem occurred during layer rule evaluation.
            // Just treat it as though the layer rule did not match.
        }
    }

    if (activeLayerNames.Contains("TheHomePage")) {
        /* ... Your code here ... */
    }
}

Much of the code above makes more sense in a driver or controller, but if you are working only in the view layer, you can do it this way.

Basil

Answer 2

You can create a widget that includes the needed @{Style.Include} statements and then add it to a layer.

Follow this instructions to create a new Widget using razor code: Creating simple custom Orchard widgets, name the new widget CssIncluder

Then add this view to your theme, you can use the Shape tracing tool if you like:

Widget-CssIncluder.cshtml:

@{
    Model.Metadata.Wrappers.Clear();
    Style.Include("somestyle.css");
}

Finally add the widget to the layer of your choice. Be sure to uncheck the title rendering option to get clean code.

Animate

Answer 3

Based on Katsuyuki's answer, I created an extension method for WorkContext to convert all active layers into css classes.

using Orchard;
using Orchard.Widgets.Services;
using System.Collections.Generic;

namespace KidsMinistryTeam.Theme.Extensions
{
    static public class WorkContextExtensions
    {
        static public IList<string> GetLayerCssClasses(this WorkContext workContext)
        {
            var widgetsService = workContext.Resolve<IWidgetsService>();
            var ruleManager = workContext.Resolve<IRuleManager>();

            var classNames = new List<string>();
            foreach (var layer in widgetsService.GetLayers())
            {
                try
                {
                    if (ruleManager.Matches(layer.LayerRule))
                    {
                        classNames.Add(string.Format("{0}-layer", layer.Name.ToLower())); //add any additional class sanitizing logic here
                    }
                }
                catch
                {
                }
            }

            return classNames;
        }
    }
}

Then by adding it to Model.Classes in my theme's Layout.cshtml I am now able to style based on active layers.

foreach(string className in WorkContext.GetLayerCssClasses())
{
    Model.Classes.Add(className);
}

Flutter