related links in partial view json - Razor

David Tregoning 63 posts 236 karma points

Feb 19, 2014 @ 16:40

Related links in partial view - JSON

Razor

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?

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 19, 2014 @ 17:04

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 19, 2014 @ 17:23

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

Copy Link

David Tregoning 63 posts 236 karma points

Feb 20, 2014 @ 10:07

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 20, 2014 @ 10:19

Hi David,

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

Jeavon

Copy Link

David Tregoning 63 posts 236 karma points

Feb 20, 2014 @ 10:49

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 20, 2014 @ 10:59

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

heroLinks is the related links picker, correct?

Copy Link

David Tregoning 63 posts 236 karma points

Feb 20, 2014 @ 11:30

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 20, 2014 @ 11:53

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

Copy Link

David Tregoning 63 posts 236 karma points

Feb 20, 2014 @ 12:00

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

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Feb 20, 2014 @ 13:14

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

Copy Link

is working on a reply...

Flag this post as spam?

Related links in partial view - JSON