Copied to clipboard

Flag this post as spam?

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


  • JessicaGUA 11 posts 122 karma points
    Jul 23, 2024 @ 05:22
    JessicaGUA
    0

    How to code with Umbraco and Razor pages ?

    Hi all,

    I'm having a hard time understanding the best way to code something clean with Umbraco. By that, I mean that a lot of code is in my templates which is not the cleanest work ever...

    For example, my file "department.cshtml" starts with :

    @using System.Runtime.InteropServices.JavaScript
    

    @using Umbraco.Cms.Web.Common.PublishedModels; @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage @{ Layout = "master.cshtml"; ViewBag.Title = Model.Value("title");

    IPublishedContent? mediaItem = Model.Value<IPublishedContent>("planImage");
    string imageUrl = null;
    if (mediaItem != null)
    {
        imageUrl = mediaItem.Url();
    }
    
    string? modelGuid = Model.Key.ToString();
    
    IPublishedContent? team = Umbraco
        .Content(Guid.Parse(modelGuid))?
        .ChildrenOfType("people")?
        .FirstOrDefault(x => x.IsVisible());
    string? teamGuid = team?.Key.ToString();
    IEnumerable<IPublishedContent>? teamMembers = null;
    IEnumerable<IPublishedContent>? managers = null;
    
    if (teamGuid != null) {
        teamMembers = Umbraco.Content(Guid.Parse(teamGuid))?
            .ChildrenOfType("person")?
            .Where(x => x.IsVisible())
            .Where(x => x.Value("manager")?.ToString() == "False")
            .OrderBy(x => x.Value("lastName"));
    
        managers = Umbraco.Content(Guid.Parse(teamGuid))?
            .ChildrenOfType("person")?
            .Where(x => x.IsVisible())
            .Where(x => x.Value("manager")?.ToString() == "True")
            .OrderBy(x => x.Value("lastName"));
    }
    

    All this code would normally go to the file code-behind "department.cs" attached to my Razor page. But, if I try to use this way, I can't use some code for Umbraco like :

    Umbraco
        .Content(Guid.Parse(modelGuid))?
        .ChildrenOfType("people")?
        .FirstOrDefault(x => x.IsVisible());
    

    How can I do this ?

    Thank you all in advance for your time and patience.

    Disclaimer : I'm a baby dev currently doing her first project ever, sorry if all of this sounds stupid, I'm learning. ☺

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jul 24, 2024 @ 08:44
    Huw Reddick
    0

    Umbraco uses the MVC pattern so there are no codebehind files in it's view templates, code is placed in the view itself.

  • JessicaGUA 11 posts 122 karma points
    Jul 24, 2024 @ 12:46
    JessicaGUA
    0

    Hi,

    Thanks for the reply ! So is it usual to have like 50 lines of code in my template ? I am a bit confused because it looks like a mess to me 😁

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Jul 24, 2024 @ 09:08
    Marc Love (uSkinned.net)
    0

    However you can take your code away from the partial views using View Components.

    This is a technique I would use for more complicated logic.

    https://docs.umbraco.com/umbraco-cms/v/13.latest-lts/reference/templating/mvc/viewcomponents

  • JessicaGUA 11 posts 122 karma points
    Jul 24, 2024 @ 12:48
    JessicaGUA
    0

    Hi Marc !

    Thanks for the reply and the documentation, it all still seems confusing to me but I will definitely look more into it.

    You said "for the partial views" but does it work for the "normal" Views ?

    I don't really know how to clean my Views... I have sometimes around 100 lines of code in my template...

    Thanks again. ☺

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jul 24, 2024 @ 13:06
    Huw Reddick
    0

    You should also maybe look into using a rendermvccontroller to hijack the default renderring, you could then put your logic into the controller and pass a custom viewmodel to the view

    https://docs.umbraco.com/umbraco-cms/v/13.latest-lts/reference/routing/custom-controllers

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Jul 25, 2024 @ 10:09
    Marc Love (uSkinned.net)
    0

    Hi Jessica,

    When you create a new Document Type you have the option of creating a Template along with it. You would normally choose the template option if your Document Type represents a page. This will create a View in your ~/Views folder.

    Partial Views can then be used to reduce the code in your main Template. Partial Views are often used to hold code that may be repeated across your main Templates. This way you dont need to replicate code over and over again if it is common to different pages of your site.

    For example a common use case is to put the logic behind your site navigation within a partial view. You would then add this partial view to each page template (View) so that you are not replicating this code. You can read more about partial views here:

    https://docs.umbraco.com/umbraco-cms/v/13.latest-lts/reference/templating/mvc/partial-views

    Cheers,

    Marc

  • npack 51 posts 297 karma points
    Sep 11, 2024 @ 17:11
    npack
    0

    I would second Huw Reddick's suggestion of using a hijacking controller. This lets me create a new view-model class that contains my page properties PLUS some extra properties that get populated by code.

    Then you can read from that new model class your template instead. The key to all this is creating a hijacking controller named the same as your page. That controller can run code, instantiate your custom view model and populate it. I think this is all explained with examples in the link he provided.

Please Sign in or register to post replies

Write your reply to:

Draft