Start from scratch - Step 2 : create the first block in MVC

Here is the second post of my series of post to help you with the first steps in the EPiServer MVC world.
You can find the other post of this series here:

• Step 1 : Create the first page in MVC
• Step 2 : create the first block in MVC

Of course this is very similar to the creation of a page
In place of inheriting from PageType you should inherit from BlockData now. And I have of course always a base class like this I am able to add some common code to all my custom block data. My base class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using EPiServer.Core;

namespace MyNameSpace.BlocksTypes.Base
{
    public class BaseBlockType : BlockData
    {
    }
}

My Class for a richtext bloc:

using System.ComponentModel.DataAnnotations;
using EPiInno.BOL.BlocksTypes.Base;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace MyNamespace.BOL.BlocksTypes
{
    [ContentType(GroupName = SystemTabNames.Content,
        DisplayName = "Richtext block",
        Description = "A richtext block",
        AvailableInEditMode = true,
        Order = 2,
        GUID = "{CF3D7201-9E5F-48C8-B3AF-7BA3BBD7E662}")]
    public class RichTextBlock : BaseBlockType
    {
        [CultureSpecific]
        [Display(
            Name = "The body",
            Description = "The body.",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual XhtmlString Body { get; set; }
    }
}

As in the page type, we need a controller and as always I have a base class for it. Like this I am sure to inherit from everything I need and I can add some extra common code if needed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using EPiServer.Core;
using EPiServer.Web;
using EPiServer.Web.Mvc;

namespace MyNamespace.BOL.Base.Controllers
{
    public class BaseBlockController<T> : ActionControllerBase, IRenderTemplate<T>, IRenderTemplate where T : BlockData
    {
    }
}

The richtext block controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyNamespace.BOL.Base.Controllers;
using MyNamespace.BOL.BlocksTypes;
using MyNamespace.MVC4.ViewModels.Blocks;
using EPiServer;
using EPiServer.Core;
using EPiServer.Framework.DataAnnotations;
using EPiServer.Framework.Web;
using EPiServer.ServiceLocation;
using EPiServer.Web;
using EPiServer.Web.Mvc;
using EPiServer.Web.Routing;

namespace Mynamespace.Controllers.Blocks
{
    [TemplateDescriptor(
        AvailableWithoutTag = true,
        Tags = new[] { RenderingTags.Preview })]
    public class RichTextBlockController : BaseBlockController<RichTextBlock>
    {
        public ActionResult Index(RichTextBlock currentBlock)
        {
            return View("~/Views/Blocks/RichTextBlock/Index.cshtml", currentBlock);
        }
    }
}

You can notice that I have coded the path to the view this is not required but I don't use the path by default because I want to have a separated folder for all my blocks.

And the view for the controller:

@model MyNamespace.BlocksTypes.RichTextBlock

<div class="block richtext_block">
    @Html.PropertyFor(x => x.Body)
</div>

To be able to drop those blocks into the page you need to add a ContentArea field in your page type and display it into the view of this page: First you need to add a field like this into the page:

[Display(
  Name = "Blocks",
  Description = "The blocks",
  GroupName = TabNames.Content,
  Order = 99)]
public virtual ContentArea Blocks { get; set; }

And into the view of this page just render the field with a PropertyFor like this:

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

Read More

Start from scratch - Step 1 : Create the first page in MVC

As I say in my previous post I a complete dummy in EPiServer for the moment but I learn and I want to share those first steps. So I will create a series of post step by step with the different step I have implemented into my project and how I have resole it with EPiServer 7 MVC.
You can find the other post of this series here:

• Step 1 : Create the first page in MVC
• Step 2 : create the first block in MVC

The first logical step is of course the creation of my first page. To do simple I will create a simple content page.
First of all, I need to create my model -> a PageType in EPiServer. A page type is the structure of data into EPiServer (equivalent of the Sitecore template). I have choose to do a base class to put all the fields common to all the pages like the SEO meta data, ...

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

public abstract class BasePageType : PageType
{
 //Add the SEO properties, and all the common properties into this class
 
 [CultureSpecific]
 [Display(Name = "Title",
  Description = "",
  GroupName = TabNames.Content,
  Order = 1)]
 public virtual string MainTitle { get; set; } 
}

And the class corresponding to the content page:

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

[ContentType(GroupName = PageGroupNames.Content,
 DisplayName = "Content Page",
 Description = "A content page",
 AvailableInEditMode = true,
 Order = 2,
 GUID = "{77e347c2-d245-4972-aa65-2e6b6b18c29c}"),
 AvailablePageTypes(Include = new Type[]
  {
   typeof(ContentPageType)
  })]
public class ContentPageType : BasePageType
{ 
 [CultureSpecific]
 [Editable(true)]
 [Display(            
  Name = "Main body",
  Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
  GroupName = SystemTabNames.Content,
  Order = 2)]
 public virtual XhtmlString MainBody { get; set; }
}

First thing here, you see that the philosophy of EPiServer 7 is a code first. So you don't need to go into the admin to create the PageTypes. You can do that through code just by setting some attributes on the class and the fields. I will not explain all the attributes you can put they are pretty clear and here is a link how explain all those attributes: Attributes Used for Content Types
We are in MVC so the second logical step is to create a Controller. Here I also have a base class for all my pages controllers:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using EPiServer.Core;
using EPiServer.Web.Mvc;

public class BasePageController<TP> : PageController<TP> where TP : PageData
{
}

This class just enforce the fact that we inherit from PageController (a EPiServer class) and that the type of the model inherit from PageData. Now I can implement my controller:

using System.Web.Mvc;

public class ContentPageController : BasePageController<BaseContentPageType>
{        
 public ActionResult Index(BaseContentPageType currentPage)
 {
  return View("~/Views/Pages/Contentpage/TwoColumnsIndex.cshtml",currentPage);  
 }
}

The first parameter is not required but I have put it because I prefer to have a subfolder for all the pages into ~/Views/Pages/ and this is not the default conversion in MVC
Ok now we are ready to begin the views. For that I have a main layout which is used for all my pages:

@model MyNamespace.BasePageType

<!DOCTYPE html>
<html lang="@Html.ViewContext.RequestContext.RouteData.Values["lang"]">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="EPiServer CMS Falcon" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>EPiServer MVC Razor Example</title>
</head>
<body>
    @RenderBody()
</body>
</html>

And finally the TwoColumnsIndex.csmthl which inherit from my main layout:

@model MyNamespace.ContentPageType

@{
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<div class="body_content">
    <h1>@Html.PropertyFor(x => x.MainTitle)</h1>
 @Html.PropertyFor(x => x.MainBody, new { CustomTag = "div", CssClass = "body" })
</div>

Ok your first page is finally done. I will try to continue this series of posts with the different steps to create your first website.

Read More

Welcome to Happy-EPi

I have create this blog because I am completely new in the world of EPiServer and I want to share my experiences with you.

I have a lot of challenges because:

• it is the first time I use EPiServer. Normally I use Sitecore you can see my sitecore blog here: http://sitecoreblog.blogspot.be
• I use MVC and I don't have a lot of experience of it yet.
• I use EPiServer 7 which is not yet completely documented especially the MVC version

So my first series of post is clearly for the dummies like me and I hope it could help you to start quicker into the world of EPiServer and become Happy with EPi :-)

Read More