In today's tutorial, you will learn all about Episerver blocks. Most website will be made up of several page templates. Within each pages, it is likely that a number of reusable components exist. Some examples of re-usable components may include:

  • Call To Action
  • Carousel
  • Contact Form
  • Text Block
  • Image Block
  • Accordion
  • Banner
  • Tab
  • Promo

Within Episerver these re-usable components are called blocks. If you come from a WinForms background, a block can be thought of as something similar to a user control. A block contains a view and a number of related properties.

The benefit of using a block is that it reduce the amount of duplicate code in your project.  Say you have a homepage and a listing page.  At the top of each page you have an advertising banner.  Instead of having to write the banner code twice in two different areas, you can create one banner block and two 'Content Areas' on each page and drop the same banner block in both, or, create two different ones.  

To create a banner block for example, you would define a class called Banner, define some properties like an image, a link and some alt text, create a view for it and off you go.

Being able to define grouped functionality into a single file makes content editors jobs a lot easier and gives them a lot more creative control as it allows them to create their own page layouts..  well, if the business decides this is what they want.

Content Areas

To allow content editors to add blocks to a page, a content area needs to be defined on that page.  This can be done using the following code snippet:

Shared Block

Blocks are no pages, blocks are reusable components across your website and when you create a block you can use it in multiple locations if you want.  From my experience, I tend to favor creating a new block when I need it but every project is different.  If you don't want a block to be re-used, you can set AvailableInEditMode attribute on the class definition to false.  

The Code

Below defines all the code you need for a block:

If you read my page type introduction (link at top of page) you may already see that the attributes available to a block are the same for a page type, so I will not go over them again.

Using a block type as a page type property

As well as using a ContentArea you can also use a block directly on a page type.  Think of it this way, a content area allows you to drag and drop any number of blocks in any order you want.  If you define a block explicitly, you are forcing the page to add it.

Constructor or Constructorless

After you have defined your block type, you will need to decide if you want to display your block as a partial, or if you will give the block its own responsibility of rending itself by creating a view model, controller and view.  If you look in the alloy samples site you should be able to both type of example.

How do you feel about blocks, good or a bad thing? Leave your opinions in the comment section below.