How does CssClasses and Attribute work?

Question

I think I understood the principle of creating an SXA controller with this topic Here.

But i have some question about :

• @Html.Sxa().Component("MyName", Model.Attributes)

• @Model.CssClasses.Aggregate()

To exert myself, I developed a rendering controller that allows to display a menu according to its datasource and the buttons that it has as child.

And I have this in experience editor :

And this in preview :

So I think this comes from the definition I did not make on Attributes and CssClasses in my model ? Why my menu is different between Experience editor and preview ?

So, my question is : How does CssClasses and Attribute work ? And do I have to deffine them in my repository or elsewhere ?

For info, here is the code of my view :

<div @Html.Sxa().Component("MyMenu", Model.Attributes) >
<div class="component-content @Model.CssClasses.Aggregate()">
    @if (!this.Model.ListeBoutons.Any())
    {
        @Model.MessageIsEmpty
    }
    else
    {
    <ol>
        @foreach (var bouton in Model.ListeBoutons)
        {
            <li>
                <a href="@bouton.Url">@bouton.Label</a>
            </li>
        }
    </ol>
    }
</div>

But i have a error with this code ( System.ArgumentNullException: Value cannot be null. ) because of @Model.CssClasses.Aggregate(). So I removed it to have the previous capture of my menu in Experience Editor.

In advance thank you for your feedback.

Answer 1

Which version of SXA are you using? I'm asking because this <div class="component-content @Model.CssClasses.Aggregate()"> is old piece of code. Since 1.2 you should use @Html.Sxa().Component("MyMenu", Model.Attributes).

"MyName" isn't a name of your component, it's one of CSS class which will be added to the wrapping div.

In SXA we have created separate pipeline which can be used to add additional attributes to the renderings. It's use for example in the Creative Exchange. So the @Html.Sxa().Component helper method beside attributes from Model.Attributes list (you can fill that list in the Controller of your rendering - it's inherited from StandardController) also adds attributes which you decide to add in the processors.

The pipeline is called decorateRendering. An example processor can look like this:

public class AddMyCssClass : RenderingDecorator
{
    public override void Process(RenderingDecoratorArgs args)
    {
        if (YOUR_CUSTOM_CONDITION)
        {
            args.AddAttribute(Foundation.MarkupDecorator.Constants.AttributeNames.Class, "my-custom-class");
        }
    }
}