Example 8: New Blocks page

The first thing that is important to know before working with page templates in Dynamicweb, is that they have a connection to the Master template. When parsing the code, it combines the Master and Page template into one. This means that everything we @include in the Master template will also be included in the Page template.

Building a Page, using Blocks and Components, is a straightforward task. 

Let's imagine that we were asked to create a special “WinterPromotion” page template with a unique design.

Then your template should of course start with the following two lines, simply declaring that this is a view model page and is used in the master template: 

C%23
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> @MasterPageFile("Master.cshtml")

Then, to get the Blocks and Components to work plus get code hinting, add the needed references: 

C%23
@using Dynamicweb.Rapido.Blocks.Components.General @using Dynamicweb.Rapido.Blocks

We recommend that you always include the general components, if components should be used. If you need specific Ecommerce or Articles components, you should also add references for those. 

Now, we can start doing all the fun stuff. Start by defining the shelf for the Blocks - the place where we want to put all the associated Blocks. This is done through the @functions to make this specific variable available in the helpers.

C%23
@functions { BlocksPage page = BlocksPage.GetBlockPage("WinterPromotionPage"); }

The name of the BlocksPage should be unique and descriptive in regard to its purpose. Therefore in this case, we name it “WinterPromotionPage”. 

The next thing to do is to create the root Blocks structure. This structure will also give us the extensibility points for later expansion. The easiest way to decide how your structure should be is to use pen and paper and draw your page using simple boxes.

The WinterPromotion page could simply look like Figure 3.1.

Figure 3.1 Page structure draft

This results in a very simple structure: 

  • SaveALotBanner 
  • Content 
  • SignUpForNewsletter 

It’s always a good idea to make a blueprint of the structure before you start coding. When you have a clear view of the components you want to create, you are ready to start.

Let’s start by making the page grid based. So, define a Block for a base row:

C%23
Block pageContainer = new Block { Id = "PageContainer", SortId = 10, BlocksList = new List<Block> { new Block { Id = "PageRow", SortId = 20, Design = new Design { RenderType = RenderType.Row } } } }; page.Add(pageContainer);

To create the full structure we need, simply add a Blockslist to this container Block:

C%23
Block pageContainer = new Block { Id = "PageContainer", SortId = 10, BlocksList = new List<Block> { new Block { Id = "PageRow", SortId = 20, Design = new Design { RenderType = RenderType.Row }, BlocksList = new List<Block> { new Block { Id = "PageSaveALotbanner", SortId = 10, Template = RenderSaveALotBanner(), Design = new Design { RenderType = RenderType.Column, Size = "12" } }, new Block { Id = "PageParagraphs", SortId = 20, Template = RenderParagraphs() }, new Block { Id = "PageSignUpForNewsletter", SortId = 30, Template = RenderSignUpForNewsletterr(), Design = new Design { RenderType = RenderType.Column, Size = "12" } } } } } }; page.Add(pageContainer);

One thing to note here, is that you should avoid creating a Blocks structure dynamically, e.g. by adding Blocks through a loop. This will make the Blocks really hard to extend as you will need to give each Block and ID a number to have unique identifiers. 

Next, we are going to create the three helper methods that we have defined in the structure. You should do this at the bottom of the template.

C%23
@helper RenderSaveALotBanner() { } @helper RenderParagraphs() { @Model.Placeholder("dwcontent", "content", "default:true;sort:1") } @helper RenderSignUpForNewsletter() { }

You can write whatever you want in the helpers, but you should always have a place that renders the paragraphs below the page. That is what the @Model.Placeholder("dwcontent", "content", "default:true;sort:1") code does. 

Now you are almost done. We only need to start the Blocks rendering engine. Simply add this code in the very bottom of the template: 

C%23
@* The @RenderBlockList base helper is included in Components/GridBuilder.cshtml *@ @RenderBlockList(page.BlocksRoot.BlocksList)

If you want to extend this template later on, create an empty Custom__Blocks.cshtml file in a subfolder named “Blocks” and include it in the template like this: 

C%23
@Include("PageBlocks/Page/Custom__Blocks.cshtml")

The include must be set right before the @RenderBlockList(page.BlocksRoot.BlocksList) code. 

For an advanced example of how we implement using Blocks and Components, you can either look at the Master template or the DynamicArticle template.