Creating Episerver Blocks out of standard C# Classes

Daniel Stuessy

Vote:

Hi,

We're trying to integrate external components into Episerver blocks. Below is an example of this with standard classes.
Do we have to write custom adapters for each component class to convert them into Episerver blocks, or is there a way to do that with Episerver out of the box?

[ContentType(DisplayName = "Carousel", GUID = "23c1b825-0ddf-47b1-a30c-735e1b88d8ad", Description = "")]
    public class CarouselBlock : BlockData
    {
        public virtual Carousel Carousel { get; set; }
    }

   public class Carousel
    {
        public List Items { get; set; }
        public int StartIndex { get; set; }
    }

   public class CarouselItem
    {
        // Map to image?
        public string Url { get; set; }

       // Map to link?
        public string Link { get; set; }
    }

Executing the code above gives us the following error:

Type 'Models.Blocks.Carousel' could not be mapped to a PropertyDefinitionType

Thanks!

#180539

Jul 13, 2017 15:43

David Knipe

Vote:

Hi Daniel

You may want to take a look at the PropertyList: https://world.episerver.com/blogs/per-magne-skuseth/dates/2015/11/trying-out-propertylistt/

An alternative approach is to define the carosel item as a block which is added to the carosel block in a content area. You can see a (non production) example of this in the Alloy Demo Kit: https://github.com/episerver/AlloyDemoKit/blob/master/src/AlloyDemoKit/Models/Blocks/CarouselBlock.cs

David

#180541

Edited, Jul 13, 2017 15:57

Daniel Stuessy

Vote:

Hi David,

Thanks for responding!

To provide you with some context, we're working on a series of UI components as a seperate project which we're tyring to use in Episerver.

I'm afraid that as a result, the classes we're trying to use are in a seperate assembly without a reference to Episerver so we can't use the EditorDescriptor attributes on these classes.

Is there any other method of telling Episerver how to use these classes (ViewModels)?

#180542

Jul 13, 2017 16:25

David Knipe

Vote:

I assume you have some control over the views? In that case you can use a view model to emit the exact poco class you need in the view and wire up the Episerver properties using the methods suggested and a controller for the carousel block.

#180544

Jul 13, 2017 17:36

Daniel Stuessy

Vote:

Yeah we do have control over the views for the blocks. Im not sure I follow what you are saying here though. Could you expand on that a bit more? Can we achieve this in a programatic way outside of the classes?

Thanks

#180546

Jul 13, 2017 19:20

David Knipe

Vote:

I imagine you'd write a custom controller for your carousel block. That controller would return your Carosel class (as defined in your original post) as the view model. The view model itself would be constructed by mapping the properties from the CaroseBlock type to your Carosel type.

Psedo code for the Index method of the controller would look like this:

public override ActionResult Index(CarouselBlock currentBlock)
{
var model = new Carousel // as described by you above
{
Items = // your Carosel items
startindex = // start index
};

return PartialView("Carousel", model);
}

you can then then construct your Carosel in the view using your populated Carosel class (which I assume is coming from your external project and cannot be changed)

#180547

Jul 13, 2017 19:49