Copied to clipboard

Flag this post as spam?

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


  • Anders Brohus 193 posts 474 karma points
    Dec 31, 2014 @ 12:08
    Anders Brohus
    0

    From Scripting Files to Partial View problems

    Hi!

    I need some help after i choose to upgrade to Umbraco 7.2.1, because the scripting files are gone! So i have to convert them into a Partial View Macro, but i really got some big problems..

    Because my Navigation Macro is not working 100% anymore :/

    This is my navigation scripting file

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @{ 
        @*Get the root of the website *@
        var root = Model.AncestorOrSelf(1);
    }
    
    <ul class="nav navbar-nav">
        <li class="@Model.IsEqual(root, "active", "")"><a href="/">Home</a></li>
    
        @foreach(var page in root.Children.Where("Visible"))
        { 
            if(page.Children.Where("Visible").Count() > 0)
            {
                <li class="@page.IsAncestorOrSelf(Model, "active", "")">
                    <a href="@page.Url">@page.Name</a>
                </li>
            }
            else
            {
                <li class="@page.IsAncestorOrSelf(Model, "active", "")">
                    <a href="@page.Url">@page.Name</a>
                </li>
            }
        }
    </ul>
    

    And it makes my menu and sets a class (active) on the li if it's on the right page.

    BUT when i tried to convert it into a Partial View then it stopped setting active on the li elements, it works on the "Home" Element but not the ones that are generated :/

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{ 
        @*Get the root of the website *@
        var root = CurrentPage.AncestorOrSelf(1);
    }
    
    <ul class="nav navbar-nav">
        <li class="@CurrentPage.IsEqual(root, "active", "")"><a href="/">Home</a></li>
    
        @foreach(var page in root.Children.Where("Visible"))
        { 
            if(page.Children.Where("Visible").Count() > 0)
            {
                <li class="@page.IsAncestorOrSelf(Model, "active", "")">
                    <a href="@page.Url">@page.Name</a>
                </li>
            }
            else
            {
                <li class="@page.IsAncestorOrSelf(Model, "active", "")">
                    <a href="@page.Url">@page.Name</a>
                </li>
            }
        }
    </ul>
    

    Second problem is i can't figure out to get images from the Media Picker out in the macro! :/

    Because i got this macro for my "News", where it takes out all the "NewsPosts", and display them with image and all but i wont work.. :/

    My scripting file that works..

    @inherits umbraco.MacroEngines.DynamicNodeContext
    
    @{
        @*Make Query to find all nodes with Alias "NewsPost" *@
        var selection = Model.AncestorOrSelf().Descendants("NewsPost").Where("Visible");
    }
    @if(selection.Any()){
    
        @* OrderBy() takes the property to sort by and optinoally order desc/asc *@
        foreach (var page in selection.OrderBy("CreateDate desc"))
        {
            <div class="col-md-4 NewsPost">
                <article>
                @if (page.newsImage != "")
                {<a href="@page.Url"><div class="NewsImage"><img src="@Model.MediaById(page.newsImage).umbracoFile" alt="@page.title"/></div></a>}
                else
                {
                    <div style="width:350px; height:233px;"></div>
                }
                    <a href="@page.Url"><h2 style="margin-top:2px">@page.title</h2></a>
                    <small>@page.CreateDate.ToString("dd MMMM yyyy") - @page.CreateDate.ToString("H:mm") </small>
                    <div class="ShortText">
                        @(Library.Truncate(Library.StripHtml(page.bodyText), 300, true))
                    </div>
                    <br />
                    <b><a href="@page.Url"> @Dictionary.ReadMore &#8594;</a></b>
                </article>
            </div>
        }
    }
    

    And i can't get it to work even when the image is not there... It's driving me crazy that i can't get it to work xD

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Dec 31, 2014 @ 12:36
    Dennis Aaen
    0

    Hi Anders,

    I would try to help you. For the script for the navigation I think that you only are missing a very small part, so instead of Model you need to use CurrentPage. like this

    @inheritsUmbraco.Web.Macros.PartialViewMacroPage
    @{
       
    @*Get the root of the website *@
       
    var root = CurrentPage.AncestorOrSelf(1);
    }

    <ul class="nav navbar-nav">
       
    <li class="@CurrentPage.IsEqual(root, "active", "")"><a href="/">Home</a></li>

       
    @foreach(var page in root.Children.Where("Visible"))
       
    {
           
    if(page.Children.Where("Visible").Count()>0)
           
    {
               
    <li class="@page.IsAncestorOrSelf(CurrentPage, "active", "")">
                   
    <a href="@page.Url">@page.Name</a>
               
    </li>
           
    }
           
    else
           
    {
               
    <li class="@page.IsAncestorOrSelf(CurrentPage, "active", "")">
                   
    <a href="@page.Url">@page.Name</a>
                </
    li>
           
    }
       
    }
    </ul>

    For the next code snippet about the media picker, then you could try this.I have made my changes bold

    @inheritsUmbraco.Web.Macros.PartialViewMacroPage
    @{
        @*Make Query to find all nodes with Alias "NewsPost" *@
        var selection = CurrentPage.AncestorOrSelf().Descendants("NewsPost").Where("Visible");
    }
    @if(selection.Any()){

        @* OrderBy() takes the property to sort by and optinoally order desc/asc *@
        foreach (var page in selection.OrderBy("CreateDate desc"))
        {
            <div class="col-md-4 NewsPost">
                <article>
                @if (page.newsImage != "")
                {<a href="@page.Url"><div class="NewsImage">
                    var dynamicMediaItem = Umbraco.Media(page.newsImage);
                    <img src="@dynamicMediaItem.umbracoFile" alt="@page.title"/></div></a>}
                else
                {
                    <div style="width:350px; height:233px;"></div>
                }
                    <a href="@page.Url"><h2 style="margin-top:2px">@page.title</h2></a>
                    <small>@page.CreateDate.ToString("dd MMMM yyyy") - @page.CreateDate.ToString("H:mm") </small>
                    <div class="ShortText">
                        @(Umbraco.Truncate(Umbraco.StripHtml(page.bodyText), 300, true))
                    </div>
                    <br />
                    <b><a href="@page.Url">@Umbraco.GetDictionaryValue("ReadMore") &#8594;</a></b>
                </article>
            </div>
        }
    }

    As you can see I made so change to your could. Try to see the documentation for the Media picker here. http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker Only focus on the strongly typed and dynmic, I use this syntaxs if you only need one image, but in Umbraco 7 you can add multiple images to the the media picker see here: http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/Built-in-Property-Editors-v7/Media-Picker

    Next this is the old Library method in MVC this is replaced by @Umbraco take a look here: http://our.umbraco.org/documentation/Reference/Querying/UmbracoHelper/#Truncate%28stringhtmlintlengthbooladdElipsis%29

    The last thing is the dictonary in MVC you need to call your dictionary like [email protected](string key) Where the string key is the name of your dictionary item, and this name must be unqiue.

    Hope this helps,

    /Dennis

  • Anders Brohus 193 posts 474 karma points
    Dec 31, 2014 @ 13:14
    Anders Brohus
    0

    Thanks Dennis!

    Now my navigation works... I just tried Model to CurrentPage yesterday, but yeah.. Maybe it was an error another place them :P

    But i still get the "Error loading Partial View script (file: ~/Views/MacroPartials/List News Posts.cshtml)" on the news post, but i figured out that the image is still causing problems because when i remove the If Else statements it's working now! :D

    And it should have been proofed so that if there is no image then it just makes an empty div :/

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Dec 31, 2014 @ 14:04
    Dennis Aaen
    0

    Hi Anders,

    I think I found what the problem is. The first thing is that I missing the space between @inherits and  Umbraco.Web.Macros.PartialViewMacroPage in the first line, so instead of

    @inheritsUmbraco.Web.Macros.PartialViewMacroPage

    Change it to:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    And I have missing a small thing, when you are in HTML you need to start the Razor engine again and the way you doing this is by @, so try this code new code.

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
        @*Make Query to find all nodes with Alias "NewsPost" *@
        var selection = CurrentPage.AncestorOrSelf().Descendants("NewsPost").Where("Visible");
    }
    @if(selection.Any()){

        @* OrderBy() takes the property to sort by and optinoally order desc/asc *@
        foreach (var page in selection.OrderBy("CreateDate desc"))
        {
            <div class="col-md-4 NewsPost">
                <article>
                @if (page.newsImage != ""){
                    <a href="@page.Url"><div class="NewsImage">
                        @{
                            var dynamicMediaItem = Umbraco.Media(page.newsImage);
                        }
                    <img src="@dynamicMediaItem.umbracoFile" alt="@page.title"/></div></a>}
                else
                {
                    <div style="width:350px; height:233px;"></div>
                }
                    <a href="@page.Url"><h2 style="margin-top:2px">@page.title</h2></a>
                    <small>@page.CreateDate.ToString("dd MMMM yyyy") - @page.CreateDate.ToString("H:mm") </small>
                    <div class="ShortText">
                        @(Umbraco.Truncate(Umbraco.StripHtml(page.bodyText), 300, true))
                    </div>
                    <br />
                    <b><a href="@page.Url">@Umbraco.GetDictionaryValue("ReadMore") &#8594;</a></b>
                </article>
            </div>
        }
    }

    Again I have made the changes bold so you can see what is changed.

    Hope this helps,

    /Dennis

  • Anders Brohus 193 posts 474 karma points
    Dec 31, 2014 @ 14:26
    Anders Brohus
    0

    Hi Dennis

    I found out of that pretty quick, i just looked at it :)

    It just still gives me errors!?!

    That's why i hate Partial Views... I have working examples of scripting files that handles it without any problems, so i just cant figure out whats wrong... They should have removed XLST instead of Scripting files :-'(

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Dec 31, 2014 @ 14:47
    Dennis Aaen
    100

    Hi Anders,

    I think I have made a working example code for you.

    Try this code an see if it works.

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    @{
        @*Make Query to find all nodes with Alias "NewsPost" *@
        var selection = CurrentPage.AncestorOrSelf().Descendants("umbNewsItem").Where("Visible");
    }
    @if(selection.Any()){

        @* OrderBy() takes the property to sort by and optinoally order desc/asc *@
        foreach (var page in selection.OrderBy("CreateDate desc"))
        {
            <div class="col-md-4 NewsPost">
                <article>
               
                @if (page.HasValue("newsImage")){                                        
                    var dynamicMediaItem = Umbraco.Media(page.newsImage);
                    <a href="@page.Url"><div class="NewsImage">
                    <img src="@dynamicMediaItem.umbracoFile" alt="@page.title"/>
                    </div></a>
                }else{
                    <div style="width:350px; height:233px;"></div>

                }
               
               
                <a href="@page.Url"><h2 style="margin-top:2px">@page.title</h2></a>
                    <small>@page.CreateDate.ToString("dd MMMM yyyy") - @page.CreateDate.ToString("H:mm") </small>
                    <div class="ShortText">
                        @(Umbraco.Truncate(Umbraco.StripHtml(page.bodyText), 300, true))
                    </div>
                    <br />
                    <b><a href="@page.Url">@Umbraco.GetDictionaryValue("ReadMore") &#8594;</a></b>

                </article>
            </div>
        }
    }

    The way you can test if a field has a value in MVC is like @CurrentPage.HasValue("propertyAlias")

    Hope this helps,

    /Dennis

  • Anders Brohus 193 posts 474 karma points
    Dec 31, 2014 @ 15:22
    Anders Brohus
    0

    Yey it's working now, after i changed a little! :D

    Thanks you so much, now i just need some styling :P

    Happy New Year! :)

  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Dec 31, 2014 @ 15:35
    Dennis Aaen
    0

    Hi Anders,

    Glad that I could help you, and happy new year to you too.

    /Dennis

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies