How to create a preview for a block?

johnv

Vote:

The documentation on the episerver website tells you how to create a page, but doesnt tell you how to create a block with its corresponding model and view.

With Alloy, I have tried copying some of the code to create a new block, but have not had much luck yet.

in Models/Blocks I copied "ContactBlock.cs" to MyBlock.cs and removed its fields and added just one, "name". I am not sure what this is - its kind of like a model. Its not a veiw, and not a controller.

in Models/ViewModels I copied "ContactBlockModel.cs" to MyBlockModel.cs with just one property: name. Presumably this is actually the model. As an aside, I tried creating a property of type long, but this gives errors, it only works for sting.

I copied Views/ContactBlock/index.cshtml to Views/MyBlock/index.thml thus:

@model MyBlockModel

<div class="My">
@Model.name
</div>

I can now Create "My" blocks in the CMS editor, and I can drag them to content areas, but they show as "The "MyBlock" can not be displayed.

How do I get the block to display in the CMS Page Editor?

Once I have figured this out, ill try to get it to display "name" on the actual website.

Basially, I am trying to do a "hello world" block. I cant find any documenation/samples of this other than alloy. Alloy is great, but not easy to reverse engineer without documentation.

#224430

Jun 19, 2020 18:30

Tomas Hensrud Gulla

Vote:

If you copy ContactBlock.cs, make sure to create a unique GUID - to not use the same.

You do not need to create a separate model and a controller, if you do not want to. If you are only displaying data as the editor inputs it, you will probably not need it.

Simple example.

Block type definition (also used as the model):

using System.ComponentModel.DataAnnotations;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.Core;

namespace Alloy.Models.Blocks
{
    [SiteContentType(GUID = "176CE440-C869-448B-B2E2-8626D479B368")]
    public class MyBlock : BlockData
    {
        [Display(GroupName = SystemTabNames.Content, Order = 1)]
        [CultureSpecific]
        public virtual string Message { get; set; }
    }
}

Name the view MyBlock.cshtml and place it in /Views/Shared/Blocks

@model Alloy.Models.Blocks.MyBlock

@Html.PropertyFor(x => x.Message)

Check the file /Alloy.Business.Rendering.SiteViewEngine for the definition on where block views are placed.

If you were to create a controller (MyBlockController), and a separate model (MyBlockModel), you could place the view were you initially placed it.

#224432

Edited, Jun 19, 2020 20:50

johnv - Jun 19, 2020 21:37

Nice, this creates a working preview.

johnv - Jun 19, 2020 22:00

Is this MyBlock.cshtml the view for when you are editing in CMS, or the view renders the block on the actual website, or both?
How would I make a different (more elaborate) view for the website?

johnv - Jun 19, 2020 22:16

Out of interest, why would I use "@Html.PropertyFor(x => x.Message)" and not just "@Model.Message"

Tomas Hensrud Gulla - Jun 20, 2020 8:05

Html.PropertyFor() will render a textbox input when the page is displayed in Episerver CMS edit mode, on-page-editing view.

Refer to http://joelabrahamsson.com/how-episervers-html-helper-propertyfor-works/ for futher details.

Try our conversational search powered by Generative AI!

How to create a preview for a block?