Custom Components

If you want to allow a Blazor component to be picked in the admin using the Custom Component Picker then it must implement

public interface ICustomContentComponent
{
    string Name { get; }
    Models.Content? Content { get; set; } // must be set as [Parameter]
}

Custom Component Picker

Example of using this below, this is the contact form in the starter kit.

Note the use of @rendermode InteractiveServer in the component. It's important to remember that the front end is .NET MVC, if you want interactivity in your component then you need to set a RenderMode to InteractiveServer and you must have the Blazor .js script in your Layout

<script src="_framework/blazor.server.js"></script>

@using System.ComponentModel.DataAnnotations
@implements ZauberCMS.Core.Content.Interfaces.ICustomContentComponent
@rendermode InteractiveServer

<div class="pt-2">
@if (Sent)
{
    <div class="alert alert-primary" role="alert">
        Contact form sent
    </div>
}
else
{
    <EditForm Model="ContactModel" OnValidSubmit="Submit" FormName="ContactForm">
        <DataAnnotationsValidator />
        @*<ValidationSummary />*@
        <div class="row g-3">
            <div class="col">
                <label class="form-label">Name</label>
                <InputText @bind-Value="ContactModel!.Name" DisplayName="Name" class="form-control"/>
                <ValidationMessage For="@(() => ContactModel.Name)" class="text-danger"/>
            </div>
            <div class="col">
                <label class="form-label">Email</label>
                <InputText @bind-Value="ContactModel!.Email" DisplayName="Email" class="form-control"/>
                <ValidationMessage For="@(() => ContactModel.Email)" class="text-danger"/>
            </div>
            <div class="col-12">
                <label class="form-label">Message</label>
                <InputTextArea @bind-Value="ContactModel!.Message" DisplayName="Message" class="form-control"/>
                <ValidationMessage For="@(() => ContactModel.Message)" class="text-danger"/>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </div>
    </EditForm>
}
</div>

@code {
    public string Name => "Contact Form";
    
    [Parameter] public Content? Content { get; set; }
    
    private ContactFormModel? ContactModel { get; set; }
    
    private bool Sent { get; set; }

    protected override void OnInitialized() => ContactModel ??= new ContactFormModel();

    private void Submit()
    {
        Sent = true;
    }
    
    public class ContactFormModel
    {
        [Required] 
        public string Name { get; set; } = string.Empty;
        
        [Required]
        [EmailAddress]
        public string Email { get; set; } = string.Empty;
        
        [Required] 
        public string Message { get; set; } = string.Empty;
    }
}