Copied to clipboard

Flag this post as spam?

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


  • Elin 45 posts 166 karma points
    Sep 15, 2017 @ 18:29
    Elin
    0

    pass variables to macro or partial views

    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 ?

  • Marcio Goularte 374 posts 1346 karma points
    Sep 15, 2017 @ 20:39
    Marcio Goularte
    100

    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

  • Elin 45 posts 166 karma points
    Feb 27, 2018 @ 19:57
    Elin
    0

    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.

  • Marcio Goularte 374 posts 1346 karma points
    Feb 27, 2018 @ 20:04
    Marcio Goularte
    0

    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();
    
    
    }
    
  • Elin 45 posts 166 karma points
    Feb 27, 2018 @ 20:27
    Elin
    0

    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.

  • Marcio Goularte 374 posts 1346 karma points
    Feb 27, 2018 @ 20:32
    Marcio Goularte
    0

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

    >

  • Elin 45 posts 166 karma points
    Feb 27, 2018 @ 20:44
    Elin
    0

    Now I get this error message

    enter image description here

  • Marcio Goularte 374 posts 1346 karma points
    Feb 28, 2018 @ 03:11
    Marcio Goularte
    1

    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>
    
  • Elin 45 posts 166 karma points
    Feb 28, 2018 @ 13:49
    Elin
    1

    This worked out beautifully.

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

    Cheers.

Please Sign in or register to post replies

Write your reply to:

Draft