How to create a hello world page.

johnv

Vote:

Unfortuatnely, there seem to be no tutorials for creating hello world pages and blocks.

I have now figured out how to create blocks, with their optional models and partial views by copying "contentBlock" form Alloy.

The next problem is how to create a new page, with its own templates etc.

E.g. if I just wanted to output this:

<head>
</head>
<body>
hello from block 1
hello from block 2
</body>

I have a block which can render a message. Now I need a page to put the blocks on.

So I would guess I need some or all of the following:

1) a page template view. This is the thing which will have something like:

<head>
</head>
<body>
@contentGoesHere
</body>

2) a page controller. This will do nothing except render the index action.

3) a page model. This will contain a single content area.

4) anything else?

The next problem is where to put the above files, and what they should contain.

If we look at alloys simplest page, "contact us". it is of type "standard page"

Searching for how standard page was implemented, we see a view in

/Views/StandardPage/index.cshtml

@using DxcAlloy
@model PageViewModel<StandardPage>

@{ Layout = "~/Views/Shared/Layouts/_LeftNavigation.cshtml"; }

<h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
<p class="introduction" @Html.EditAttributes(x => x.CurrentPage.MetaDescription)>@Model.CurrentPage.MetaDescription</p>
<div class="row">
    <div class="span8 clearfix" @Html.EditAttributes(x => x.CurrentPage.MainBody)>
        @Html.DisplayFor(m => m.CurrentPage.MainBody)
    </div>
</div>
@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row", Tag = Global.ContentAreaTags.TwoThirdsWidth })

This is a start. It contains only the body part - the Heading, nav and content. Where is the outer part defined? the <head> for example?

Under Models/Pages we have

namespace DxcAlloy.Models.Pages
{
    /// <summary>
    /// Used for the pages mainly consisting of manually created content such as text, images, and blocks
    /// </summary>
    [SiteContentType(GUID = "9CCC8A41-5C8C-4BE0-8E73-520FF3DE8267")]
    [SiteImageUrl(Global.StaticGraphicsFolderPath + "page-type-thumbnail-standard.png")]
    public class StandardPage : SitePageData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 310)]
        [CultureSpecific]
        public virtual XhtmlString MainBody { get; set; }

        [Display(
            GroupName = SystemTabNames.Content,
            Order = 320)]
        public virtual ContentArea MainContentArea { get; set; }
    }
}

This is pretty straight forward, it defines two properites,t he main body and the content Area. The other pages properties are defined in SitePageData.

So thats the models covered I think.

Controllers

Under /Controllers we can see some block controllers, which is odd as most blocks wont have controllers, but I cant see a page controller for "Contact us" nor for "SitePageData" nor "Standard Page". could it be using "DefaultPageController"?

Default page controller looks like this:

namespace DxcAlloy.Controllers
{
    [TemplateDescriptor(Inherited = true)]
    public class DefaultPageController : PageControllerBase<SitePageData>
    {
        public ViewResult Index(SitePageData currentPage)
        {
            var model = CreateModel(currentPage);
            return View(string.Format("~/Views/{0}/Index.cshtml", currentPage.GetOriginalType().Name), model);
        }

        private static IPageViewModel<SitePageData> CreateModel(SitePageData page)
        {
            var type = typeof(PageViewModel<>).MakeGenericType(page.GetOriginalType());
            return Activator.CreateInstance(type, page) as IPageViewModel<SitePageData>;
        }
    }
}

This in herits from PageControllerBase, which has the login stuff and a strange section "modifyLAout" which just hides the header and footer, for no apparent reason.

Next we need to figure out how to create the most basic of views for a new page:

Views

As we noted, /Views/StandardPage/index.cshtml is missing most of the markup.

There is no "DefaultPage" nor "BasePage", so where is this defined? Where is the overall master tempage which renders most of the html?

By searcing all files, I found Views/Shared/Layouts/_Root.cshtml.

Where is this defined? how can I define that my page should use a different root view (or no root view if I want to hard code it in my page).

#224459

Edited, Jun 20, 2020 10:06

Ravindra S. Rathore

Vote:

Hi,

You can refer my blog post -

http://www.ravindrarathore.com/blog/2019/03/14/adding-a-start-page-episerver-for-beginners.html

#224461

Jun 20, 2020 12:02

Tomas Hensrud Gulla

Vote:

I will just jump in, trying to answer some of your questions.

- Q: Where is <head> defined?
- A: \Alloy\Views\Shared\Layouts\_Root.cshtml

- Q: Where is it defines that the _Root.cshtml mentioned above is used?
- A: \Alloy\Views\_viewstart.cshtml

- Q: How can I define that my page should use a different root view (or no root view)?
- A: Add a _viewstart.cshtml to the folder, or simply set the Layout in your view (in the same way as in _viewstart.cshtml).

- Q: Controller for "Standard Page" etc?
- A: The comment for DefaultPageController says: "Concrete controller that handles all page types that don't have their own specific controllers". Set a breakpoint to verify.

#224508

Edited, Jun 22, 2020 6:47

Tomas Hensrud Gulla

Vote:

It's not that complicated, to create a new page type.

New page type definition, can also be used as the model:

using EPiServer.Core;

namespace Alloy.Models.Pages
{
    [SiteContentType(GUID = "F336C153-137B-4D55-AD95-5F5BB3F7CEFC")]
    public class NewPage : SitePageData
    {
        public virtual ContentArea MyContentArea { get; set; }
    }
}

And then, your view, placed in \Alloy\Views\NewPage\Index.cshtml

@model PageViewModel<NewPage>
@Html.PropertyFor(x => x.CurrentPage.MyContentArea)

Then, that's it! You have a start, and can work from there...

#224510

Edited, Jun 22, 2020 6:56

Try our conversational search powered by Generative AI!