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:
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, ...
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:
Ok now we are ready to begin the views. For that I have a main layout which is used for all my pages:
You can find the other post of this series here:
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 TypesWe 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 MVCOk 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.
