Load Content from Blocks in Episerver CMS.

In this article, we will cover how to Load Content from Blocks on the page in Episerver CMS.

We will Load Blocks Content and display them on the page in Episerver CMS using ContentArea and ContentReference

In Episerver CMS, Blocks are nothing but a Partial View (Shared Content) that can be used across pages.

HomePage.cs

Create a Model Class named HomePage.cs inside Models/Pages Folder and replace the code given below.

In this example, we have created two input properties i.e ContentArea and ContentReference.It accepts two types of Blocks.

Please change the type of Blocks that you have already created in your application.

In the content area, we can select multiple Blocks and a single Block in ContentReference

using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using HpBlogs.Models.Blocks;
using System.ComponentModel.DataAnnotations;
 
namespace HpBlogs.Models.Pages
{
    [ContentType(DisplayName = "HomePage", GUID = "3b09891e-37ae-46d4-bb62-6dba1adeb166", Description = "Home Page")]
    public class HomePage : PageData
    {
        [Display(Name = "Related Links - ContentArea", GroupName = SystemTabNames.Content, Order = 1)]
        [AllowedTypes(new[] { typeof(QuickLinks), typeof(SocialLink) })]   // ADD ALL ALLOWED BLOCKS TYPE
        public virtual ContentArea RelatedLinks_ContentArea { get; set; }
 
        [Display(Name = "Related Links - ContentReference", GroupName = SystemTabNames.Content, Order = 2)]
        [AllowedTypes(new[] { typeof(QuickLinks), typeof(SocialLink) })]   // ADD ALL ALLOWED BLOCKS TYPE
        public virtual ContentReference RelatedLinks_ContentReference { get; set; }
    }
}

HomePageController.cs

Create a Controller Class named HomePageController.cs inside Controllers Folder and replace the code given below.

using EPiServer.Web.Mvc;
using HpBlogs.Models.Pages;
using System.Web.Mvc;
 
namespace HpBlogs.Controllers
{
    public class HomePageController : PageController<HomePage>
    {
        public ActionResult Index(HomePage currentPage)
        {
            return View(currentPage);
        }
    }
}

Index.cshtml

Create a View named Index.cshtml inside Views/HomePage Folder and replace the code given below.

Here we will see how to access the selected Blocks and Load the content from them.

Please change the type of Blocks that you have already created and allowed in HomePage.cs Model Class.

@model HpBlogs.Models.Pages.HomePage
@using EPiServer.Core
@using HpBlogs.Models.Blocks
@using EPiServer
@using EPiServer.ServiceLocation
 
@{
 
    IContentRepository rep = ServiceLocator.Current.GetInstance<IContentRepository>();
 
    //LOAD FROM CONTENTAREA
 
    if (Model.RelatedLinks_ContentArea != null)
    {
        foreach (var obj in Model.RelatedLinks_ContentArea.Items)
        {
            var item = rep.Get<IContent>(obj.ContentGuid);
 
            string title = string.Empty;
            string subtitle = string.Empty;
 
            if (((BlockData)item).GetType().BaseType.Equals(typeof(QuickLinks)))
            {
                title = ((QuickLinks)item).Title;
                subtitle = ((QuickLinks)item).SubTitle;
 
            }
            else if (((BlockData)item).GetType().BaseType.Equals(typeof(SocialLink)))
            {
                title = ((SocialLink)item).Text;
            }
            // ADD CONDITION FOR ALL ALLOWED BLOCKS TYPE
 
            <div class="column mb-sm-3 col-md-3">
                <h5>@title</h5>
                <span>@subtitle</span>
            </div>
        }
    }
 
    //LOAD FROM CONTENTREFERENCE
 
    if (Model.RelatedLinks_ContentReference != null)
    {
        var item = rep.Get<IContent>(Model.RelatedLinks_ContentReference);
 
        string title = string.Empty;
        string subtitle = string.Empty;
 
        if (((BlockData)item).GetType().BaseType.Equals(typeof(QuickLinks)))
        {
            title = ((QuickLinks)item).Title;
            subtitle = ((QuickLinks)item).SubTitle;
 
        }
        else if (((BlockData)item).GetType().BaseType.Equals(typeof(SocialLink)))
        {
            title = ((SocialLink)item).Text;
        }
        // ADD CONDITION FOR ALL ALLOWED BLOCKS TYPE
 
        <div class="column mb-sm-3 col-md-3">
            <h5>@title</h5>
            <span>@subtitle</span>
        </div>
    }
}

Please check this blog to see how to - Create Blocks