toggle content on front end pages

Go to solution

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

Cedeste 36 posts 128 karma points

Apr 03, 2023 @ 14:10

Using Umbraco And Getting Started

Umbraco 9

I am trying to build out an alert section that can be toggled on and off for display on the home page.

It's very possible I have it wrong because I'm still learning. But this is what I've done.

I created a property called "hide" with a true/false toggle. When I try to add the hide to the code, it breaks the page.

See code below.

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Web.Common.PublishedModels
@using Umbraco.Cms.Web.Common.Views
@using Umbraco.Cms.Core.Models

@{

    if(.hide ?? false) { return; }

}

<div class="container-fluid" >
    <div class="row justify-content-center pelican-UI-light-bk" style="border-bottom: 10px solid #fe9903;  ">

<div class="col-lg-12" style="background-color: #b00003; text-align: center; padding-top: 15px; padding-bottom: 10px;">
    <h3 style="color: #ffffff; font-weight: bold;">@Model.Value("alertMessage")</h3>
</div>

            </div>


</div>

Any help would be greatly appreciated!

Copy Link

Marc Goodson 2142 posts 14345 karma points MVP 8x c-trib

Apr 03, 2023 @ 15:30
100
Hi Cedeste

There are different approaches to implementing views, using Published Content or Modelsbuilder, it looks like here you are using 'PublishedContent'...

... so I think something like this
```
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Web.Common.PublishedModels
@using Umbraco.Cms.Web.Common.Views
@using Umbraco.Cms.Core.Models


@if(Model.Value<bool>("hide") == false){
<div class="container-fluid" >
    <div class="row justify-content-center pelican-UI-light-bk" style="border-bottom: 10px solid #fe9903;  ">

<div class="col-lg-12" style="background-color: #b00003; text-align: center; padding-top: 15px; padding-bottom: 10px;">
    <h3 style="color: #ffffff; font-weight: bold;">@Model.Value("alertMessage")</h3>
</div>

            </div>


</div>
}
```
Essentially if your new 'true/value' property has property alias 'hide' then you can read it using the PublishedContent approach by
```
@Model.Value<bool>("hide")
```
this reads the value from Umbraco and turns it into a 'bool' which is a boolean value of either true or false, and so you can check if it's false, eg not hidden, and therefore ok to write out the HTML...

regards

Marc
Copy Link
Cedeste 36 posts 128 karma points

Apr 03, 2023 @ 15:36

0

THANK YOU! That worked.

Copy Link
is working on a reply...

Please Sign in or register to post replies