One day, I asked my beloved Sitecore team: “Guys, what would we do when we have a Sitecore 8 project on the table and it’s in Sitecore Webforms? 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:
- no longer Sitecore webforms layout for the new page items
- keep some current Sitecore sublayouts as are if it takes much effort to replace them to Sitecore renderings. To do that, we find out some very good references (that’s why I love Sitecore community so much):
- https://blog.horizontalintegration.com/2015/09/15/mixing-sublayout-with-rendering-webforms-with-mvc-request/
- http://bisstalk.blogspot.ch/2014/10/sitecore-sublayouts-rendering-on.html
- https://oddeven.ch/blog/rendering-sublayouts-in-sitecore-mvc/
- https://github.com/BissTalk/SitecoreSynergy
- Thanks Joseph Bissol
- for the case a new Sitecore rendering which must be added to a Sitecore webforms placeholder inside an existing Sitecore sublayout, we create a new web control – let’s say Sitecore hybrid placeholder – in order to be able to add both Sitecore View Renderings and Sitecore Sublayouts to it (Thanks Khoa Truong – my colleague – for implementing it)
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
- access /sitecore/content/Home and open the menu Presentation \ Details then click on FINAL LAYOUT tab, you would see something like this:
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:
- 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
- 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 >
- \layouts\Sample Inner Sublayout.ascx
- copy / paste < div >This is Sample Inner Sublayout</ div >
- \xsl\sample rendering.xslt
- copy / paste < div >This is Sample Rendering</ div >
- \layouts\Sample Sublayout.ascx
- Sitecore default page would render Sample Sublayout + Sample Inner Sublayout + Sample Rendering
Switching to MVC layout
- download MvcLayout.cshtml then copy / paste it to \Views\Shared of your Sitecore website folder
- access /sitecore/layout/Layouts/Sample Layout and update Path field to /Views/Shared/MvcLayout.cshtml
Creating Sublayout Rendering for injecting sublayouts to MVC layout
- create a new Sitecore View Rendering:
- item name: Sublayout Rendering
- path: /Views/Shared/SublayoutRendering.cshtml
- 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
- Sitecore default page would render only Sample Sublayout due to webforms placeholder doesn’t work on Sitecore Mvc layout
- 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 />
- Sitecore default page would render Sample Sublayout + Sample Inner Sublayout
- open \layouts\Sample Inner Sublayout.ascx
- add <%@ Register TagPrefix=”sc” Namespace=”Vhs.SublayoutRenderingAndHybridPlaceholder.WebControls” Assembly=”Vhs.SublayoutRenderingAndHybridPlaceholder” %>
- update <sc:Placeholder /> to <sc:HybridPlaceholder />
- Sitecore default page would render Sample Sublayout + Sample Inner Sublayout + Sample Rendering without any issues
- 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!