Views

Normal .Net Razor Views are used to display the content from your content types to the front end user of your website. A content type could have many content views, which in turn allows the user to select different Views (Think templates) to render their content. All Views must inherit from ZauberViewPage<T> to show in the Allowed Views selection on a content type (More about this below)

Content Views On A Content Type

Allowed Views On A Content Type

Content Views Selection On Content

As you can see, on content, the user can only select a one View from whatever Content Views you have allowed them to choose from (See above)

Content View Dropdown

Views

Just like a normal MVC project, all Views go into the Views folder in the root of your project. The folder convention works exactly like a normal MVC project. The only difference is by default, Content views are looked for in the root of the Views folder if you have not created a Controller (Route Hi-Jacking).

ZauberViewPage<T>

Any View that you want to use for your Content must inherit from ZauberViewPage<T>, where T by default would be 'Content' as Content is passed by default into the View.

@inherits ZauberCMS.Core.Rendering.ZauberViewPage<ZauberCMS.Core.Content.Models.Content>

This will allow you to use @Model in the View and get data from the Content model (Or Model of your choice). If you want to use a custom model, then you need to add a controller (Route Hi-Jacking).

Example

The below example is the Home View from the starter site

@using ZauberCMS.Core.Extensions
@inherits ZauberCMS.Core.Rendering.ZauberViewPage<ZauberCMS.Web.Home.Models.HomeViewModel>

<header class="masthead" style="background-image: url('@(Model.HeaderImage?.Url)')">
    <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-10 col-lg-8 col-xl-7">
                <div class="site-heading">
                    <h1>@(Model.GetValue<string>("Heading"))</h1>
                    <span class="subheading">@(Model.GetValue<string>("SubHeading"))</span>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container px-4 px-lg-5">

    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            @Html.Raw(Model.GetValue<string>("Content") ?? string.Empty)
            <hr class="my-4"/>
            @foreach (var post in Model.BlogPosts)
            {
                @await Component.InvokeAsync("BlogPostPreview", new { post })
                <hr class="my-4"/>
            }
        </div>
    </div>
</div>

Querying Data