Copied to clipboard

Flag this post as spam?

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


  • Paul Griffiths 334 posts 933 karma points
    Apr 11, 2017 @ 08:47
    Paul Griffiths
    0

    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

  • Mike Sinnott 3 posts 94 karma points
    Apr 11, 2017 @ 19:02
    Mike Sinnott
    100

    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

  • Dan Diplo 1470 posts 5676 karma points MVP 3x c-trib
    Apr 11, 2017 @ 19:08
    Dan Diplo
    1

    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.

  • Paul Griffiths 334 posts 933 karma points
    Apr 12, 2017 @ 14:37
    Paul Griffiths
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft