In this example we will replace the Everything is on sale block you created during example 1 with a Button component instead of the Template parameter and a helper method (Figure 1.3).

Figure 1.1 Block getting replaced with a component

Here’s how:

  • Open the /MasterBlocks/Custom__Blocks.cshml template
  • Open the /components documentation for your solution – www.yoursolution.url/components
  • Define a new block and use a component instead of a template to create a button, e.g.:
Block salesHeader2 = new Block { Id = "SalesHeader2", SortId = 42, Component = new Button { ButtonType = ButtonType.Button, Title = "Everything is on sale - use your money today!", Link = "/Default.aspx?ID=52", CssClass = "btn--full" } }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, salesHeader2);

In this example, I use a Button component with a number of properties; a title, a link to the products page, and a Base css class to make it full width, emulating the look of the previous SalesHeader block. I then add it to the MasterHeader extensibility point.

The result is almost identical to the original header (Figure 2.2) – to make it completely identical, with font size and button height, you could create a custom CSS class in the Ignite CSS project and use that on the component in addition to the Base class.


Figure 2.1 The component-based block