Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • bh 444 posts 1544 karma points
    Jul 26, 2017 @ 11:54
    bh
    0

    How to Render my Nested Content Widget Template on my Page Template

    How do I add the template for my widget to the template for my page? I'm sorry if I'm not using the correct terminology here. I'll provide the code I'm using and maybe that'll clarify the trouble i'm having...

    The DocType for my widget is called "wLefty", the DocType for my page is called "Demo".

    The template for my Nested Content widget is called wLefty and here is that code...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    var item = Model.GetPropertyValue<IPublishedContent>("wLefty")
}

<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            <img src="@Umbraco.Field(item, "wLeftyImage")" class="xs-img-responsive" />
        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (string.IsNullOrWhiteSpace(@Umbraco.Field(item, "wLeftyCursive")) == false){
                <h3 class="handwritten">@Umbraco.Field(item, "wLeftyCursive")</h3>
            }
            <h2>@Umbraco.Field("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @Umbraco.Field(item, "wLeftyCopy")
            @if (string.IsNullOrWhiteSpace(@Umbraco.Field(item, "wLeftyButtonLink")) == false){
                <div class="abtnContainer center-block"><a href="@Umbraco.Field(item, "wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>

    The template for my page is called Demo (this is where I'm unclear how to add the widget to my page template)...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Page.cshtml";
}

@* the fun starts here *@
<h1>LEFTY</h1>
@* How do I add my wLefty widget here? *@

    Update...I tried this, but nothing go rendered:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Page.cshtml";
}

@* the fun starts here *@
<h1>LEFTY</h1>
@Umbraco.RenderTemplate(1064)
    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 26, 2017 @ 17:40
    Lee Kelleher
    100

    Hi bh,

    Try adding it as a partial...

    @Html.Partial("wLefty")

    Cheers,
    - Lee

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 26, 2017 @ 19:10
    bh
    0

    Thanks @LeeKelleher !

    Got through that...now I've got a new different issue. I'm sorry for being so needy, but this is my first time through this. I think once I get through one, I'll be able to rinse/repeat.

    enter image description here

    Here's my updated wLefty template code... I had to add the second @inherits manually...i'm not sure that part is right...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    var item = Model.GetPropertyValue<IPublishedContent>("wLefty");
}

<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            <img src="@Umbraco.Field(item, "wLeftyImage")" class="xs-img-responsive" />
        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (!string.IsNullOrEmpty(@Umbraco.Field(item, "wLeftyCursive").ToString()) == false){
                <h3 class="handwritten">@Umbraco.Field(item, "wLeftyCursive")</h3>
            }
            <h2>@Umbraco.Field("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @Umbraco.Field(item, "wLeftyCopy")
            @if (string.IsNullOrEmpty(@Umbraco.Field(item, "wLeftyButtonLink").ToString()) == false){
                <div class="abtnContainer center-block"><a href="@Umbraco.Field(item, "wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>
    Copy Link
  • bh 444 posts 1544 karma points
    Jul 26, 2017 @ 19:18
    bh
    0

    Tried this on my page template...

    @Html.Partial("wLefty", CurrentPage)

    ...and got this dandy error message. enter image description here

    ...i'm so lost...

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 26, 2017 @ 19:33
    Lee Kelleher
    0

    Hi bh,

    I'm replying on my mobile, so please excuse any typos or abruptness - totally friendliness intended :-)

    In your partial, remove the 2nd @inherits line, there should only be 1 and the 1st line is fine.

    Next, when getting the value from Nested Content, try this...

    Model.Content.GetPropertValue<IEnumerable<IPublishedContent>>("wLefty")

    The IEnumerable but means you'll be getting back a list of items, rather than a standalone item.

    Hopefully that should sort the other issue too.

    Cheers,
    - Lee

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 26, 2017 @ 20:38
    bh
    0

    @LeeKelleher thank you so much for sticking with me!

    New error message based on the changes you recommended.

    enter image description here

    In case that image is hard to read... it says

    Compiler Error Message: CS1061: 'Umbraco.Web.PublishedContentModels.WLefty' does not contain a definition for 'GetPropertValue' and no extension method 'GetPropertValue' accepting a first argument of type 'Umbraco.Web.PublishedContentModels.WLefty' could be found (are you missing a using directive or an assembly reference?)

    Here's my updated Nested Content widget code...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    var item = Model.Content.GetPropertValue<IEnumerable<IPublishedContent>>("wLefty");
}

<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            <img src="@Umbraco.Field(item, "wLeftyImage")" class="xs-img-responsive" />
        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (!string.IsNullOrEmpty(@Umbraco.Field(item, "wLeftyCursive").ToString()) == false){
                <h3 class="handwritten">@Umbraco.Field(item, "wLeftyCursive")</h3>
            }
            <h2>@Umbraco.Field("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @Umbraco.Field(item, "wLeftyCopy")
            @if (string.IsNullOrEmpty(@Umbraco.Field(item, "wLeftyButtonLink").ToString()) == false){
                <div class="abtnContainer center-block"><a href="@Umbraco.Field(item, "wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>
    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 26, 2017 @ 20:40
    Lee Kelleher
    0

    Ah, sorry, my bad. Remove the .Content bit.

    Model.GetPropertValue(...)
    Copy Link
  • bh 444 posts 1544 karma points
    Jul 26, 2017 @ 20:52
    bh
    0

    @LeeKelleher thanks again! It ended up being a typo in the previous post...Property was missing a y. Model.Content was correct.

    So...new/different error message unfortunately...

    enter image description here

    In case the image is hard to read...it says...

    Compiler Error Message: CS1502: The best overloaded method match for 'Umbraco.Web.UmbracoHelper.Field(string, string, string, string, string, bool, bool, bool, Umbraco.Web.RenderFieldCaseType, Umbraco.Web.RenderFieldEncodingType, bool, bool, string)' has some invalid arguments

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 26, 2017 @ 21:02
    Lee Kelleher
    0

    Oops! I didn't notice the typo either (I'm still on my mobile).

    I generally don't use the Umbraco.Field much, so not sure why that error is happening.

    I'd go with something like this...

    @item.GetPropertyValue("wLeftyImage")

    If the property value is from a media picker, then you'll need to get the URL from the media node.

    @item.GetPropertyValue<IEnumerable<IPublishedContent>>("wLeftyImage").Url

    (I know, it's a mouthful, right?!)

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 12:30
    bh
    0

    @LeeKelleher I greatly appreciate your patience!

    New error message...my apologies...

    enter image description here

    CS1502: The best overloaded method match for 'System.Tuple.Create

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 12:32
    Lee Kelleher
    0

    It's...

    .Url

    The uppercase was an autocorrect from my phone.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 12:35
    bh
    0

    .Url still gives same error message.

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 12:41
    Lee Kelleher
    0

    Hmm, I'm not sure what property "wLeftyImage" value has.

    Could try...

    @item.GetPropertyValue("wLeftyImage")

    See what that does. But I'm in guesswork territory now.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 12:47
    bh
    0

    @LeeKelleher wLeftyImage is a mediaPicker...here's the docType for wLefty...

    enter image description here

    switching to...

    @item.GetPropertyValue("wLeftyImage")

    produced this error... enter image description here

    here's the latest wLefty template code...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    var item = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("wLefty");

}

<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            <img src="@item.GetPropertyValue("wLeftyImage")" class="xs-img-responsive" />
            @*@item.GetPropertyValue<IEnumerable<IPublishedContent>>("wLeftyImage").Url*@
        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (!string.IsNullOrEmpty(@item.GetPropertyValue("wLeftyCursive").ToString()) == false){
                <h3 class="handwritten">@item.GetPropertyValue("wLeftyCursive")</h3>
            }
            <h2>@Umbraco.Field("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @Umbraco.Field(item, "wLeftyCopy")
            @if (string.IsNullOrEmpty(@item.GetPropertyValue("wLeftyButtonLink").ToString()) == false){
                <div class="abtnContainer center-block"><a href="@item.GetPropertyValue("wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>
    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 12:53
    bh
    0 
    @CurrentPage.GetCropUrl("wLeftyImage", "1200x800")

    that seemed to resolve the issue on the wLeftyImage line...

    now the same error on the next property value...the one for wLeftyCursive...I tried <IEnumberable<IPublishedContent> that didn't help

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 14:54
    Lee Kelleher
    0

    Ah, I didn't fully read your code snippet, I'd assumed there was some kind of loop happening ... I blame being on my mobile and the lack of colorized syntax in the code snippets! ;-) ;-)

    OK, so will your Nested Content property only contain 1 item, or would it contain many?

    If it's only ever 1 item, then change line 5 to...

    var item = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("wLefty").First();

    As Nested Content is expecting to give you a list of items, but you only want the first one.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 16:14
    bh
    0

    I cannot thank you enough for hanging with me @LeeKelleher !

    New error message... enter image description here

    Here's my wLefty template code...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    @*var item = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("wLefty");*@
    var item = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("wLefty").First();

}

<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            <img src="@item.GetPropertyValue("wLeftyImage")" class="xs-img-responsive" />
            @*@CurrentPage.GetCropUrl("wLeftyImage", "1200x800")*@
            @*@item.GetPropertyValue<IEnumerable<IPublishedContent>>("wLeftyImage").Url*@
        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (!string.IsNullOrEmpty(@item.GetPropertyValue("wLeftyCursive").ToString()) == false){
                <h3 class="handwritten">@item.GetPropertyValue("wLeftyCursive")</h3>
            }
            <h2>@Umbraco.Field("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @Umbraco.Field(item, "wLeftyCopy")
            @if (string.IsNullOrEmpty(@item.GetPropertyValue("wLeftyButtonLink").ToString()) == false){
                <div class="abtnContainer center-block"><a href="@item.GetPropertyValue("wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>

    Here's my Demo page template code...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Page.cshtml";
}

@* the fun starts here *@
<h1>LEFTY</h1>
@Html.Partial("wLefty")


<h1>RIGHTY</h1>
@Html.Partial("wRighty")
    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 16:23
    Lee Kelleher
    0

    Hmm... I'm not overly familiar with how the models-builder stuff works. I'd suggest changing the @inherits line from...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.WLefty>

    to...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    It's all trial & error :-)

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 16:42
    bh
    0

    enter image description here

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 16:44
    Lee Kelleher
    0

    Try changing it to .FirstOrDefault() ... like I say it's going to be a lot of trial & error.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 16:46
    bh
    0

    Same error. I don't mind trial/error as long as you have the appetite for it. I've got to get this to work, and you know far better than I!

    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Jul 27, 2017 @ 16:49
    Lee Kelleher
    0

    Hmmm... guessing that the value for "wLefty" property is empty? You'll need to add some error checking around it.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 27, 2017 @ 16:59
    bh
    0

    "The value for 'wLefty' property is empty"...

    Do you mean by that, that I have not populated the "wLefty" property values on my Demo page?

    Two screenshots below... enter image description here

    enter image description here

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 28, 2017 @ 13:05
    bh
    0

    @LeeKelleher any ideas? is there anyone else I should direct my question to? I figured you're the man since you worked on Nested Content. I really appreciate your help/patience!

    Copy Link
  • Sven Geusens 169 posts 881 karma points c-trib
    Jul 28, 2017 @ 13:23
    Sven Geusens
    3

    I wouldn't mind taking a look at it with teamviewer to quickly resolve everything and be able to swap between code / umbraco and what is rendered.

    This way I can also explain what I'm doing.

    Hit me on twitter @Migaroez to sort out the details if you are interested.

    Copy Link
  • bh 444 posts 1544 karma points
    Jul 28, 2017 @ 15:05
    bh
    0

    @SvenGeusens I cannot thank you enough for jumping on a screenshare to help me sort this out!!! @LeeKelleher thank you for your patience and help! You both helped me more than I deserve. Thank you!

    For the sake of sharing the final solution...

    Here's my widget template:

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<IEnumerable<IPublishedContent>>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = null;
    var item = Model.FirstOrDefault();
    if(item == null)
    {return;}
    var image = item.GetPropertyValue<IPublishedContent>("wLeftyImage");
}
<div class="clearfix"></div>  
<div class="row-fluid clearfix noPadding rowMargin">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 nopadding lefty-container">
        <div class="col-xs-12 col-sm-10 col-sm-offset-2 nopadding lefty-background">
            @if(image != null)
            {
                <img src="@image.GetCropUrl(cropAlias:"1200x800")" class="xs-img-responsive" />
            }

        </div>
       <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0 col-lg-4 lefty-page">
            @if (!string.IsNullOrEmpty(@item.GetPropertyValue("wLeftyCursive").ToString()) == false){
                <h3 class="handwritten">@item.GetPropertyValue("wLeftyCursive")</h3>
            }
            <h2>@item.GetPropertyValue("wLeftyTitle")</h2>
            <div class="BGhr-container"><div class="BGhr">&nbsp;</div></div>
            @item.GetPropertyValue("wLeftyCopy")
            @if (@item.HasValue("wLeftyButtonLink")){
                <div class="abtnContainer center-block"><a href="@item.GetPropertyValue("wLeftyButtonLink")" class="aBtn allcaps">Button<i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            }
        </div>
    </div>
</div>

    Here's my page template:

        @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{    Layout = "Page.cshtml"; }

    @* the fun starts here *@
 <h1>LEFTY</h1> @Html.Partial("wLefty",Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("lefty"))
    Copy Link
  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Aug 01, 2017 @ 11:22
    Lee Kelleher
    0

    Thanks for picking this up Sven! #h5yr

    @bh - glad you got there in the end. (I've been moving house over the past week - offline over the weekend - finally got my office unpacked today)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft