updating models for clean starter kit

MB 273 posts 936 karma points

Jun 09, 2023 @ 12:42

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 1929 posts 6717 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 1929 posts 6717 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 22 posts 144 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...

Flag this post as spam?

Updating models for Clean Starter Kit