advice when using models builder

Paul Griffiths 370 posts 1021 karma points

Apr 11, 2017 @ 08:47

Advice when using models builder with partials

Hi,

I have just started having a play with models builder and I was wondering if anyone could help with a some questions I have to ensure i am understanding and following best practices

Setup

I have a homepage doc type and on the homepage template (view) i have an about section partial.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.HomePage>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@using Umbraco.Web.PublishedContentModels;

@{
    Layout = "Layout.cshtml";
    var aboutModel = Model.Content.Descendant<AboutSection>();
}

<!--render partials for each section on the home page-->
@{
if (aboutModel != null)
{
    Html.RenderPartial("HomePage/AboutSection", aboutModel);
} 
}

then my partial looks as follows

@inherits Umbraco.Web.Mvc.UmbracoViewPage<AboutSection>
@using Newtonsoft.Json.Linq
@using Umbraco.Web.Models
@using Umbraco.Web.PublishedContentModels;

<div id="who-we-are" class="who-we-are-main-block">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="section">
                    <h3 class="section-heading">@(Model.Heading ?? Model.Name)</h3>
                    @Model.MainContent
                </div>        
            </div>
            <div class="col-md-4 hidden-sm">
                <div class="who-we-are-img">
                    @{
                        var test1 = Model.Image.GetCropUrl("800x540");
                        var test2 = Model.GetCropUrl("image", "800x540");
                        var test3 = Model.Image.Crops.First(x => x.Alias == "800x540");
                        var test4 = Model.Image.Src + Model.Image.GetCropUrl("800x540");
                        var test5 = Model.Image;
                    }
                    <img src="@(Model.Image != null ? Model.Image.GetCropUrl("800x540") : "placeholder.jpg")" class="img-responsive" title="@Model.Name" alt="@Model.Name">
                    <img src="@(Model.Image != null ? Model.GetCropUrl("image", "800x540") : "placeholder.jpg")" class="img-responsive" title="@Model.Name" alt="@Model.Name">
                    <img src="@(Model.Image != null ? Model.Image.Src + Model.Image.GetCropUrl("800x540") : "placeholder.jpg")" class="img-responsive" title="@Model.Name" alt="@Model.Name">
                </div>
            </div>
        </div>
    </div>
</div>

My first question is, is the way that i am using partials with models builder the correct approach e.g. using var aboutModel = Model.Content.Descendant

Secondly before I started using models builder I used to retrieve a crop Url using the following syntax

@Model.Content.GetCropUrl("image", "800x540")

On the aboutSection document type i have declared a image cropper property (alias image) and as you can see in my code above (var test) i have been attempted to retrieve the crop Url from that strongly typed property. The only way i can get it is by using the following but i am passing in "image", is there a better way?

var test2 = Model.GetCropUrl("image", "328x407");

Lastly, before models builder i used the hasValue method a lot so that i can include fallbacks e.g.

@(whyUsPage.HasValue("image") ? whyUsPage.GetCropUrl("image", "800x540") : imgFallback)

How can i use this with strongly typed properties e.g.

 @(Model.HasValue(Model.Image) ? Model.GetCropUrl("image", "800x540") : imgFallback)

I was expecting to see something like Model.Image.Value or something similar? I been getting around this by using != null (which is the same right?)

@Model.Name

Any advice would be great, it would really help clear some things up :)

Thanks Paul

Copy Link

Mike Sinnott 3 posts 94 karma points

Apr 11, 2017 @ 19:02

Hi Paul,

From what I have been told, for your first question, that is the correct way of doing it. Call Descendant but strongly typing it to what you want.

var partialModel = Model.Content.Descendant<StronglyTypedModel>();

For your second question, I'd say using:

Model.GetCropUrl("image", "328x407");

Would be the way I'd go about it or alternatively doing it this way:

var image = Umbraco.TypedMedia(Model.Image);
<img src="@image.GetCropUrl("328x407")" />

Depends on which you prefer, the second way you are keeping it strongly typed but it's an extra line of code in your view.

Maybe there is a better way of doing this all together!

For your third point, using != null is okay and is the same as .HasValue(). However, you can use alternative extension methods like so:

@siteSettings.CanonicalUrl.IsNullOrWhiteSpace() ? @siteSettings.CanonicalUrl : "http://www.mysiteurl.co.uk";

Being honest, there isn't much difference except the above is also check for "" and " ", as well as null.

I think it is just down to personal preference. The .HasValue() extension method was useful while using dynamic properties and it returned an Object rather than a Type. Seeing as you can now use strongly typed models, normal null/value checking should be fine I guess.

I do stand to be corrected on all of the above if someone with more knowledge would like to add their 2 cents!

Cheers, Mike

Copy Link

Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib

Apr 11, 2017 @ 19:08

My first question is, is the way that i am using partials with models builder the correct approach e.g. using var aboutModel = Model.Content.Descendant(); in the homepage and passing the model through?

Yep, looks exactly right to me. You can pass a model to a partial, and that's the way to do it.

One tip - you can add namespaces to the web.config in your /Views/ folder (not your main web.config). So you can add in:

<add namespace="Umbraco.Web.PublishedContentModels" />

That way you don't need to keep adding it to every view or partial.

Copy Link

Paul Griffiths 370 posts 1021 karma points

Apr 12, 2017 @ 14:37

Hi both,

Thanks for the responses, it would appear that my understanding is not to far away!

Really appreciate you both taking the time out to provide detailed information!

Many thanks Paul

Copy Link

is working on a reply...

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.

Continue discussion

Flag this post as spam?

Advice when using models builder with partials