enhancement · module

How to mix renderings with sublayouts on a Sitecore MVC layout

One day, I asked my beloved Sitecore team: “Guys, what would we do when we have a Sitecore 8 project and it’s in Sitecore Webforms on the table? The client wants to revamp some parts on the current websites.”

The feedback: it’s a good chance for us to slightly switch to Sitecore MVC implementation. We’re on the same page for:

You all know that I’m a lazy developer. As usual, I create a Sitecore package so that I can play with it on every single Sitecore project.

How to install it

Use SIM to setup a new Sitecore 8 instance successfully, you would see something like the image below. Sitecore item is /sitecore/content/Home whose layout is in webforms so we have a chance to switch it to MVC one

  • srahp_0.png
  • access /sitecore/content/Home and open the menu Presentation \ Details then click on FINAL LAYOUT tab, you would see something like this:
    • srahp_4

Download the module SublayoutRenderingAndHybridPlaceholder as a Sitecore package on Sitecore Marketplace or on Gitlab then install it to your Sitecore instance via Installation Wizard.

Note: the module above goes with ASP.NET MVC 5.2 so we are NOT able to play it with Sitecore 8.0 (must recompile it with ASP.NET MVC 5.1), check out Sitecore compatibility table

How to use it

For a better practice, we should perform some enhancements:

  1. in your Sitecore website folder, rename \App_Config\Include\LiveMode.config.example to \App_Config\Include\LiveMode.config in order to enable live mode, so that data is read directly from the master database, thereby bypassing the need to publish
  2. add an identical text to the ones below in your Sitecore website folder:
    • \layouts\Sample Sublayout.ascx
      • copy / paste < div >This is Sample Sublayout</ div >
      • srahp_5.png
    • \layouts\Sample Inner Sublayout.ascx
      • copy / paste < div >This is Sample Inner Sublayout</ div >
      • srahp_6.png
    • \xsl\sample rendering.xslt
      • copy / paste <  div >This is Sample Rendering</ div >
      • srahp_7.png
  3. Sitecore default page would render Sample Sublayout + Sample Inner Sublayout + Sample Rendering
    • srahp_8.png

Switching to MVC layout

  1. download MvcLayout.cshtml then copy / paste it to \Views\Shared of your Sitecore website folder
  2. access /sitecore/layout/Layouts/Sample Layout and update Path field to /Views/Shared/MvcLayout.cshtml
    • srahp_1

Creating Sublayout Rendering for injecting sublayouts to MVC layout

  1. create a new Sitecore View Rendering:
    • item name: Sublayout Rendering
    • path: /Views/Shared/SublayoutRendering.cshtml
    • srahp_2
  2. open \App_Config\Include\z.Vhs.SublayoutRenderingAndHybridPlaceholder.config then update the value of Vhs.SublayoutRenderingAndHybridPlaceholder.SublayoutRenderingId to item id of Sitecore view rendering created above
    • srahp_3
  3. Sitecore default page would render only Sample Sublayout due to webforms placeholder doesn’t work on Sitecore Mvc layout
    • srahp_9.png
  4. at this time, Hybrid Placeholder should step in for supporting Sitecore MVC implementation

Using Hybrid Placeholder

  • open \layouts\Sample Sublayout.ascx
    • add <%@ Register TagPrefix=”sc” Namespace=”Vhs.SublayoutRenderingAndHybridPlaceholder.WebControls” Assembly=”Vhs.SublayoutRenderingAndHybridPlaceholder” %>
    • update <sc:Placeholder /> to <sc:HybridPlaceholder />
    • srahp_10
  • Sitecore default page would render Sample Sublayout + Sample Inner Sublayout
    • srahp_11.png
  • open \layouts\Sample Inner Sublayout.ascx
    • add <%@ Register TagPrefix=”sc” Namespace=”Vhs.SublayoutRenderingAndHybridPlaceholder.WebControls” Assembly=”Vhs.SublayoutRenderingAndHybridPlaceholder” %>
    • update <sc:Placeholder /> to <sc:HybridPlaceholder />
    • srahp_12.png
  • Sitecore default page would render Sample Sublayout + Sample Inner Sublayout + Sample Rendering without any issues
    • srahp_8
  • so far so good 😀

Note

We can render a specific sublayout on a rendering (Razor file) like this @Html.RenderSitecoreSubLayout(“/layouts/Sample Sublayout.ascx”)


Not Good Enough? Please feel free to download the source code and add your own enhancements if necessary.


Got issues?

Please send your issues (with screenshots if possible) to viet.hoang.sitecore@gmail.com so that I have a chance to understand your problem and be able to suggest the solution.

Happy Sitecore Coding!

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.