Copied to clipboard

Flag this post as spam?

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


  • David Tregoning 63 posts 236 karma points
    Feb 19, 2014 @ 16:40
    David Tregoning
    0

    Related links in partial view - JSON

    I am trying to create a hero Carousel on the home page of my site. I have created a separate document type for the hero slides called 'Hero' that contains a 'Related links' property called heroLinks.

    I have set up my site (via a Multinode Treepicker data type) so that my home page can select a number of these hero document types via a property called heroCarousel.

    I have then created a 'heroWidget' partial view (see below) that I call on my home page template (which contains the Jquery to animate the Carousel) to render the heros as slide and this all works fine.

    However I can't seem to get the related links to render on the page despite looking at various examples on the forum.

    @inherits UmbracoTemplatePage
    <div class="Photo-Carousel">
        <ul class="slides">
        @{
            if (CurrentPage.HasValue("heroCarousel"))
            {
            var heroListValue = Model.Content.GetPropertyValue<string>("heroCarousel");
            var heroList = heroListValue.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
            var heroCollection = Umbraco.TypedContent(heroList).Where(x => x != null);
            foreach (var item in heroCollection)
            {
                var heroId = item.Id;
                dynamic heroNode = new umbraco.MacroEngines.DynamicNode(heroId);
                var heroBackground = heroNode.GetPropertyValue("heroBackground");           
                var heroTitle = heroNode.GetPropertyValue("heroTitle");
                var heroText = heroNode.GetPropertyValue("heroText");
                var heroLinks = heroNode.GetPropertyValue("heroLinks");
                <li>
                    <img src="@Umbraco.Media(heroBackground.ToString()).Url" border="0" alt="@heroTitle" />
                    <div class="heroContainer">
                        <div class="heroTitle">@heroTitle</div>
                        <div class="heroContent">@heroText</div>
                        <div class="heroLinks">
                        @{
                        if(@heroLinks.ToString() != string.Empty){
                            @heroLinks
                        }
                        </div>
                    </div>
                </li>
            }       
        }
        </ul>
    </div>
    

    This results in the heroLinks div area having the following for the hero document type that has a related link:

    [ { "caption": "Go to TFL.gov", "link": "http://tfl.gov.uk", "newWindow": true, "edit": false, "isInternal": false, "type": "external", "title": "Go to TFL.gov" } ]
    

    But where there are no related links the results is

    [ ]
    

    I have tried code such as HasValue, but to no avail. I was not sure if this was because my partial view has to call a property (multinode treepicker) that in turn gets a content page and it is the related links property I am trying to read.

    Can anybody assist in spliting the JSON result of the related links data and render it correctly within my partial view?

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 19, 2014 @ 17:04
    Jeavon Leopold
    1

    Hi David,

    I would go with this:

    @inherits UmbracoTemplatePage
    @using Newtonsoft.Json.Linq
    @{      
        if (Model.Content.HasValue("heroCarousel") && Model.Content.GetPropertyValue<string>("heroCarousel").Length > 2)
        {
            <ul>
                @foreach (var item in Model.Content.GetPropertyValue<JArray>("heroCarousel"))
                {
                    var linkUrl = (item.Value<bool>("isInternal")) ? Umbraco.NiceUrl(item.Value<int>("internal")) : item.Value<string>("link");
                    var linkTarget = item.Value<bool>("newWindow") ? "_blank" : null;
                    <li><a href="@linkUrl" target="@linkTarget">@(item.Value<string>("caption"))</a></li>
                }
            </ul>
        }
    }  
    

    I wrote this snippet for the documentation here, there is also a example using dynamics (CurrentPage) there.

    Jeavon

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 19, 2014 @ 17:23
    Jeavon Leopold
    0

    I think your complete script might be like this:

    @inherits UmbracoTemplatePage
    @using Newtonsoft.Json.Linq
    @{      
        if (Model.Content.HasValue("heroCarousel") && Model.Content.GetPropertyValue<string>("heroCarousel").Length > 2)
        {
        <div class="Photo-Carousel">
        <ul class="slides">                                        
            @{
                var relatedLinksIds = Model.Content.GetPropertyValue<JArray>("heroCarousel").Select(item => item.Value<int>("internal")).ToList().Where(x => x != 0);
                var heroCollection = Umbraco.TypedContent(relatedLinksIds);
                foreach (var item in heroCollection)
                {
                    var heroBackground = Umbraco.TypedMedia(item.GetPropertyValue<int>("heroBackground"));                      
                    var heroTitle = item.GetPropertyValue("heroTitle");
                    var heroText = item.GetPropertyValue("heroText");
                    var heroLinks = item.GetPropertyValue<string>("heroLinks");                        
                    <li>
                        @if (heroBackground != null)
                        {
                            <img src="@heroBackground.Url" border="0" alt="@heroTitle" />
                        }
                        <div class="heroContainer">
                            <div class="heroTitle">@heroTitle</div>
                            <div class="heroContent">@heroText</div>
                            <div class="heroLinks">
                                @if (!string.IsNullOrEmpty(heroLinks))
                                {
                                    @heroLinks
                                }
                            </div>
                        </div>                       
                    </li>                           
                }
            }                
        </ul>
        </div>
        }
    }  
    
  • David Tregoning 63 posts 236 karma points
    Feb 20, 2014 @ 10:07
    David Tregoning
    0

    Thanks for the quick response Jeavon, however I don't think I explained myself correctly. The area I am having issue with is the content of:

    var heroLinks = item.GetPropertyValue<string>("heroLinks");

    By rendering this out on to the page (within the <div class="heroLinks">) I see the following:

    [ { "caption": "Go to TFL.gov", "link": "http://tfl.gov.uk", "newWindow": true, "edit": false, "isInternal": false, "type": "external", "title": "Go to TFL.gov" }, { "caption": "Google", "link": "1382", "newWindow": false, "internal": "1382", "edit": false, "isInternal": true, "iternalName": "Our Vision", "type": "internal", "title": "Google" } ]
    

    or if I look at the source I see:

    <div class="heroLinks">
    [
      {
        "caption": "Go to TFL.gov",
        "link": "http://tfl.gov.uk",
        "newWindow": true,
        quot;edit": false,
        "isInternal": false,
        "type": "external",
        "title": "Go to TFL.gov"
      },
      {
        "caption": "Google",
        "link": "1382",
        "newWindow": false,
        "internal": "1382",
        "edit": false,
        "isInternal": true,
        "iternalName": "Our Vision",
        "type": "internal",
        "title": "Google"
      }
    ]
    </div>
    

    I tried to adapte your first example using:

    <div class="heroLinks">@{
                    if (heroLinks.HasValue("heroCarousel") && heroLinks.GetPropertyValue<string>("heroCarousel").Length > 2)
    {
        <ul>
            @foreach (var link in heroLinks.GetPropertyValue<JArray>("heroCarousel"))
            {
                var linkUrl = (link.Value<bool>("isInternal")) ? Umbraco.NiceUrl(link.Value<int>("internal")) : link.Value<string>("link");
                var linkTarget = link.Value<bool>("newWindow") ? "_blank" : null;
                <li><a href="@linkUrl" target="@linkTarget">@(link.Value<string>("caption"))</a></li>
            }
        </ul>
    }
    }           </div>
    

    But this threw up a "'string' does not contain a definition for 'HasValue'" error

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 20, 2014 @ 10:19
    Jeavon Leopold
    0

    Hi David,

    I understand, did you try the complete script I posted above?

    Jeavon

  • David Tregoning 63 posts 236 karma points
    Feb 20, 2014 @ 10:49
    David Tregoning
    0

    Sorry Jeavon, yes I did and it returned the following error:

    enter image description here

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 20, 2014 @ 10:59
    Jeavon Leopold
    0

    Ah I think I might have confused myself, heroCarousel is of what type of picker (multinode etc)?

    heroLinks is the related links picker, correct?

  • David Tregoning 63 posts 236 karma points
    Feb 20, 2014 @ 11:30
    David Tregoning
    0

    Correct, my 'heroCarousel' is a multinode tree picker, this picks 1+ of my 'hero' document type items. The 'hero' document type has properties such as:

    • heroTitle (Textstring)
    • heroText (Textstring)
    • heroBackground (Media Picker)
    • heroLinks (Related Links)

    I can get the title, text and background fine and create my carousel but the related links I am struggling with

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 20, 2014 @ 11:53
    Jeavon Leopold
    100

    Ok, I think I got it:

    @{
        if (Model.Content.HasValue("heroCarousel"))
        {
            <div class="Photo-Carousel">
                <ul class="slides">
                    @{
                        var heroListValue = Model.Content.GetPropertyValue<string>("heroCarousel");
                        var heroList = heroListValue.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
                        var heroCollection = Umbraco.TypedContent(heroList).Where(x => x != null);
                        foreach (var item in heroCollection)
                        {
                            var heroBackground = Umbraco.TypedMedia(item.GetPropertyValue<int>("heroBackground"));
                            var heroTitle = item.GetPropertyValue("heroTitle");
                            var heroText = item.GetPropertyValue("heroText");
                            var heroLinks = item.GetPropertyValue<JArray>("heroLinks");
                            <li>
                                @if (heroBackground != null)
                                {
                                    <img src="@heroBackground.Url" border="0" alt="@heroTitle" />
                                }
                                <div class="heroContainer">
                                    <div class="heroTitle">@heroTitle</div>
                                    <div class="heroContent">@heroText</div>
                                    <div class="heroLinks">
                                        @if (heroLinks.Any())
                                        {
                                            <ul>
                                                @foreach (var linkItem in heroLinks)
                                                {
                                                    var linkUrl = (linkItem.Value<bool>("isInternal")) ? Umbraco.NiceUrl(linkItem.Value<int>("internal")) : linkItem.Value<string>("link");
                                                    var linkTarget = linkItem.Value<bool>("newWindow") ? "_blank" : null;
                                                    <li><a href="@linkUrl" target="@linkTarget">@(linkItem.Value<string>("caption"))</a></li>
                                                }
                                            </ul>
                                        }
                                    </div>
                                </div>                       
                            </li>
                        }
                    }
                </ul>
            </div>
        }
    }
    
  • David Tregoning 63 posts 236 karma points
    Feb 20, 2014 @ 12:00
    David Tregoning
    1

    Thats awesome - works a treat, thank you very much for your help Jeavon

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Feb 20, 2014 @ 13:14
    Jeavon Leopold
    0

    You're welcome! Glad it's all working now :-)

Please Sign in or register to post replies

Write your reply to:

Draft