updating models for clean starter kit

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

MB 273 posts 936 karma points

Jun 09, 2023 @ 12:42

0

Updating models for Clean Starter Kit

Using Umbraco And Getting Started

Umbraco 9

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:

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 1740 posts 6102 karma points MVP c-trib

Jun 10, 2023 @ 12:47

0

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 1740 posts 6102 karma points MVP 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 17 posts 127 karma points

Jun 19, 2023 @ 08:19

0

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...

Please Sign in or register to post replies

Flag this post as spam?