What Is The Difference Between An Episerver Page and an Episerver Block?

The first concept you need to learn when working with Episerver CMS is Pages and Blocks.  If you have worked with any types of CMS before, then pages are pretty self-explanatory.  A website will be built out of several page types/templates.  A standard website might have a homepage template, a landing page template, a contact us template and a content page template.  Each different template is known in Episerver world as a Page Type.

In Episerver, a page type is represented by a class.  Each page type is a unique class within your web projects solution.  The class will contain a special Episerver attribute, inherit from an Episerver base class and will define a set of custom properties that you will define.

When a content editor creates a page in the Episerver editor, the editor assigns values to the properties that you have defined in the page’s page type/class.  That data is then automatically persisted to the database when the page is saved.

Blocks

Blocks should also be familiar to anyone who has ever used MVC or web forms.  A block is very similar in concept to a partial view in MVC, or, a user control in web forms.  It’s a way of being able to reuse a component throughout your website without having to duplicate your code everywhere it is needed.

For a very simplistic definition of a block, you can think of them as a way of providing reusable components on your website to make it cool.  Some common examples of some stand blocks you will find on most projects include carousels, accordions, text, a link collection or even a form.  Pages will usually define the layout of how a page should look and maybe define some of the content that gets displayed.  Blocks will be responsible for providing the functionality.

When you work with blocks within Episerver there are two flavours, shared blocks and local blocks.

Shared Blocks

A shared block is a block that can be re-used throughout your website.  You can see these blocks in the right-hand side, blocks tree navigation pane.

Local block

A local block is a block that is contained within a single page only.  A local block cannot be reused in other pages and it will not appear in the block tree.

The difference between a shared and a local block

In terms of code, a local block and a shared block are exactly the same.  The difference between local and shared is how you define the block in your page or block.  In Episerver, to create an area on your page (or block) that will allow content editors to dynamically add content, you would define a property called a ContentArea.  I will cover ContentAreas later but in essence, a content area is a collection of blocks.  We can use that collection in our HTML views to render the blocks.

A code snippet of how this would look:

public class MyPage : PageData
{
public virtual ContentArea Block { get; set; }
}

Any blocks that the content editor adds/creates in a content area will be created as a shared block.  A local block is a block that you define specifically in your templates:

public class MyPage : PageData
{
public virtual MyBlock Image { get; set; }
}

As the block definition is not dynamic, e.g not in a content area, it isn’t possible to move ‘MyBlock’ anywhere else outside of MyPage.  This makes it a local block and it will not appear in the block tree.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *