pass variables to macro or partial views

Elin 45 posts 166 karma points

Sep 15, 2017 @ 18:29

Hi,

My webpage consist of 7 diffrent types of rows which I split into macros.

I have a macro for each row. Now I've encountered an issue where the variables in my macros need to be in the template, and unfrotunately the macros don't have access to this variables to define my sections.

For example I have var folder = CurrentPage.Children.First(); in my template and I have a foreach which wraps all the row. Now I also need that foreach from the template pass down to the macros in order to render them.

Below is a basic setup of what I have.

My Template

@{
    Layout = "Template.cshtml";

    var backgroundColor = "light-background";
    var backgroundColor2 = "light-background";

    var folder = CurrentPage.Children.First();
}

@section BodyContent {          
    @foreach(var row in folder.Children) {
        @*---------- SECTION 1 START ----------*@
            if (row.DocumentTypeAlias == "row1") {
                @Umbraco.RenderMacro("Row1NestedContent")
            }
        @*---------- SECTION 1 END ----------*@


        @*---------- SECTION 2 START ----------*@
            if (row.DocumentTypeAlias == "row2") {
                @Umbraco.RenderMacro("Row2NestedContent")
            }
        @*---------- SECTION 2 END ----------*@
    }
}

One of my Macros

@*---------- SECTION 1 START ----------*@
    if (row.GetPropertyValue("backgroundColor") == true) {
        backgroundColor = "dark-background";
    }

    <div id="section-1" class="thumb-box4 @backgroundColor">
        <div class="container">
            <p class="title fadeInDown wow">@Umbraco.Field(row, "rowTitle")</p>
            <p class="sub-title fadeInLeft wow">@Umbraco.Field(row, "rowSubtitle")</p>
            <p class="text fadeInRight wow">@Umbraco.Field(row, "rowMainContent")</p>

            <div class="row clearfix">
                <div class="col-sm-4 fadeInLeft wow">
                    @Umbraco.Field(row, "rowLeftText")
                </div><!-- .col-sm-4 -->

                <div class="col-sm-4 fadeInUp wow">
                    <img src="@Umbraco.Media(row.rowImage).Url" alt="Diagram">*@
                </div><!-- .col-sm-4 -->

                <div class="col-sm-4 fadeInRight wow">
                    @Umbraco.Field(row, "rowRightText")
                </div><!-- .col-sm-4 -->
            </div><!-- .row .clearfix -->
        </div><!-- .container -->
    </div> @*-- #@row.Name .thumb-box4 .@backgroundColor --*@
@*---------- SECTION 1 END ----------*@

How can I pass my variables (var backgroundColor, var folder = CurrentPage.Children.First(); and @foreach(var row in folder.Children) ) to my macro or partial views ?

Copy Link

Marcio Goularte 388 posts 1360 karma points

Sep 15, 2017 @ 20:39

Create Parameters in Macro enter image description here

enter image description here

@foreach(var row in folder.Children)
{
  Umbraco.RenderMacro("MyMacro", new { Param=  row.GetPropertyValue("backgroundColor") })
}

https://our.umbraco.org/documentation/reference/templating/Mvc/views#renderingMacros

In the macro access the parameter

Model.MacroParameters["Param"]

Alternatives

You can do the same thing using grid layouts

https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout

https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/configuring-the-grid-layout-datatype

https://edgethreesixty.co.uk/blog/umbraco-document-types-grid-setup-creating-advanced-page-layouts/

Or know Stacked Content. I particularly like it much more than Grid Layouts

https://github.com/umco/umbraco-stacked-content

Copy Link

Elin 45 posts 166 karma points

Feb 27, 2018 @ 19:57

Hi, Marcio,

I know it's been a while since you provided me with the answer to my problem, which worked out beautifully.

I was also wondering do you have any idea how I can my pass my variable from strongly typed to dynamic ?

EX: My template has this variable var folder = Model.Children.First();

and I need to pass it down to my macro which is expecting var folder = CurrentPage.Children.First();. Therefore, it renders nothing.

Copy Link

Marcio Goularte 388 posts 1360 karma points

Feb 27, 2018 @ 20:04

Hi,

In this case you do not need to pass parameters. You have the current content object.

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{

var folder =  Model.Content.Children.First();


}

Copy Link

Elin 45 posts 166 karma points

Feb 27, 2018 @ 20:27

The reason why I need to pass parameters because I'm calling out a foreach in my template file, adding the var folder will also force me to add that foreach which will result in having that section rendered twice.

This is what I currently have in my template:

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using umbraco.cms.businesslogic.web;

@{
     Layout = "Template.cshtml";

     var folder = Model.Children.First();
}

@foreach(var row in folder.Children) {
     <div class="row clearfix">
          @Umbraco.RenderMacro("CheckIconBulletList", new {checkIconParam = row })
     </div>
}

and this is what I have in my Macro:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{
    var myParam = CurrentPage.MacroParameters["checkIconParam"];
}

<div class="col-sm-6">
    @{
        var checkIconList = myParam.GetPropertyValue<IEnumerable<IPublishedContent>>("checkIconFields");
        for (int i = 0; i < checkIconList.Count; i++) {
            if (checkIconList[i].DocumentTypeAlias != "mainContent") {
                if (i % 2 == 2) {
                    @*foreach (var item in checkIconList) {*@
                        <div class="icon-box-list cf content-list left-column-list text-right fadeInLeft wow">
                            <p class="sub-title custom">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_bulletTitle") <span class="text">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_BulletDescription")</span></p>
                        </div><!-- .icon-box-list .cf .content-list .left-column-list .text-right -->
                    @*}*@
                }
            }
        }
    }
</div><!-- .col-sm-6 -->

and the Macro renders nothing.

Copy Link

Marcio Goularte 388 posts 1360 karma points

Feb 27, 2018 @ 20:32

Create a numeric parameter enter image description here

@foreach(var row in folder.Children) {
     <div class="row clearfix">
          @Umbraco.RenderMacro("CheckIconList", new {Id = row.Id })
     </div>
}

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{
    var id = Convert.ToInt32(Model.MacroParameters["Id"]);

   var content = Umbraco.TypedContent(id);
}

<div class="col-sm-6">
    @{
        var checkIconList = content.GetPropertyValue<IEnumerable<IPublishedContent>>("checkIconFields"); // is nested content????
        for (int i = 0; i < checkIconList.Count; i++) {
            if (checkIconList[i].DocumentTypeAlias != "mainContent") {
                if (i % 2 == 2) {
                    @*foreach (var item in checkIconList) {*@
                        <div class="icon-box-list cf content-list left-column-list text-right fadeInLeft wow">
                            <p class="sub-title custom">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_bulletTitle") <span class="text">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_BulletDescription")</span></p>
                        </div><!-- .icon-box-list .cf .content-list .left-column-list .text-right -->
                    @*}*@
                }
            }
        }
    }
</div><!-- .col-sm-6 --

>

Copy Link

Elin 45 posts 166 karma points

Feb 27, 2018 @ 20:44

Now I get this error message

enter image description here

Copy Link

Marcio Goularte 388 posts 1360 karma points

Feb 28, 2018 @ 03:11

try this:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{
    var id = Convert.ToInt32(Model.MacroParameters["Id"]);

    var content = Umbraco.TypedContent(id);
}

<div class="col-sm-6">
    @{
        var checkIconList = content.GetPropertyValue<List<IPublishedContent>>("checkIconFields"); // is nested content????

        if (checkIconList.Any())
        {
            for (int i = 0; i < checkIconList.Count; i++)
            {
                if (checkIconList[i].DocumentTypeAlias != "mainContent")
                {
                    if (i % 2 == 2)
                    {
                        @*foreach (var item in checkIconList) {*@
                        <div class="icon-box-list cf content-list left-column-list text-right fadeInLeft wow">
                            <p class="sub-title custom">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_bulletTitle") <span class="text">@Umbraco.Field(checkIconList[i], "nestedCheckIcon_BulletDescription")</span></p>
                        </div><!-- .icon-box-list .cf .content-list .left-column-list .text-right -->
                        @*}*@
                    }
                }
            }
        }
    }
</div>

Copy Link

Elin 45 posts 166 karma points

Feb 28, 2018 @ 13:49

This worked out beautifully.

Thanks for the help figuring that out, I appreciate it.

Cheers.

Copy Link

is working on a reply...

Flag this post as spam?

pass variables to macro or partial views