updating models for clean starter kit

MB 273 posts 936 karma points

Jun 09, 2023 @ 12:42

Updating models for Clean Starter Kit

Hey lads,

So... I downloaded the "Clean starter kit" and wanted to add a simple Content Picker to the top image. I add the property and get an error saying that the property don't exist.

Alright, so the model has not updated it looks. So, I head over to https://docs.umbraco.com/umbraco-cms/reference/templating/modelsbuilder/configuration and try it all but I can't access the property.

My property: enter image description here

Looks great, right? So I head over to my VS and I want to extract the property by entering @Model.Link and I get the error:

'PageHeaderViewModel' does not contain a definition for 'Link'

Cool, so I head over to Clean.Core.Models.ViewModels.PageHeaderViewModel and very true, the file is read-only and located in my AppData/local/temp folder.

I have tried everything but I'm completely lost. How in the world do I get my new property to work in my frontend?

PS. I use "ModelsMode": "InMemoryAuto"

Thank you for reading my post.

Copy Link

Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib

Jun 10, 2023 @ 12:47

Hi MB,

try to access the property like this

@Model.Value("propertyname") if you are using inmemory VS does not know about the properties at design time.

Copy Link

MB 273 posts 936 karma points

Jun 18, 2023 @ 11:55

Hey Huw and thank you for reaching out!

I tried using your suggestion but it returns the error:

'PageHeaderViewModel' does not contain a definition for 'Value' and the best extension method overload 'HtmlHelperValueExtensions.Value(IHtmlHelper, string)' requires a receiver of type 'IHtmlHelper'

I have no idea how to update the PageHeaderViewModel. My file looks like this:

    @inherits UmbracoViewPage<Clean.Core.Models.ViewModels.PageHeaderViewModel>

@{
    string mainImageUrl = Model.HasBackgroundImage ? Model.BackgroundImage.GetCropUrl(1903, 628) : "/media/f01jqvmq/2.jpg";
}

<header class="masthead" style="background-image: url('@mainImageUrl')">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-12">
                <div class="site-heading">
                        <h1>@(!string.IsNullOrWhiteSpace(Model.Title) ? Model.Title : Model.Name)</h1>

>>>>   TRYING TO ADD LINK HERE <<<<
      @Model.Value("Link")

                            @if (Model.HasSubtitle)
                            {
                                <h2 class="subheading">@Model.Subtitle</h2>
                            }
                    </div>
            </div>
        </div>
    </div>
</header>

Copy Link

Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib

Jun 18, 2023 @ 12:41

Hi MB,

I have not used the starter kit I'm afraid, but you could get it working by changing your View so that is not strongly typed, something like the following

@using Umbraco.Cms.Core.Models
@inherits UmbracoViewPage

@{
    string mainImageUrl = Model.Value("BackgroundImage") != null ? Model.Value<Image>("BackgroundImage").GetCropUrl(1903, 628) : "/media/f01jqvmq/2.jpg";
    var linkUrl = Model.Value<Link>("Link").Url;
    var linkText = Model.Value<Link>("Link").Name;
}

<header class="masthead" style="background-image: url('@mainImageUrl')">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-12">
                <div class="site-heading">
                    <h1>@(!string.IsNullOrWhiteSpace(Model.Value<string>("Title")) ? Model.Value<string>("Title") : Model.Name)</h1>

                    >>>>   TRYING TO ADD LINK HERE <<<<
                    <a href="@linkUrl">@linkText</a>

                    @if (Model.Value("Subtitle") != null)
                    {
                        <h2 class="subheading">@Model.Value("Subtitle")</h2>
                    }
                </div>
            </div>
        </div>
    </div>
</header>

Copy Link

David Jazbec 23 posts 145 karma points

Jun 19, 2023 @ 08:19

I was also exploring the Clean Starter kit yesterday, i wanted to add an extra Image to a header.

For me the simplest solution was to create my own CustomPageHeaderViewModelclass which inherits from the PageHeaderViewModel. In my custom Viewmodel i declare my new Properties that i need.

Then insted of passing the original Viewmodel to a PartialView i now pass in my Custom Viewmodel. So the Properties are now there.

Im really new to umbraco, so i dont know if there is a better way to do this.

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.

Flag this post as spam?

Updating models for Clean Starter Kit