Blog posts by Kristian Elmholt Kjær2018-05-19T12:31:00.0000000Zhttps://world.optimizely.com/blogs/kristian-elmholt-kjar/Optimizely WorldCustom View Locations for Pages, Blocks and more<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Background</h2>
<p>In a typical Episerver, or MVC Applicaton for that matter, the Views specified in a Controller are resolved by paths defined in the System.Web.Mvc.RazorViewEngine.</p>
<p>The paths for Views are:</p>
<ul>
<li><span>"~/Views/{1}/{0}.cshtml"</span></li>
<li><span>"~/Views/Shared/{0}.cshtml"</span></li>
</ul>
<p>In Episerver Page Controllers, we need to specify an Index-method with the Page-type as method parameter, like this:</p>
<pre class="language-csharp"><code>public class StartPageController : PageController<StartPage>
{
public ActionResult Index(StartPage currentPage)
{
return View(currentPage);
}
}</code></pre>
<p>If we take a look at the paths above, the name of the Controller (except -"Controller") will be used at "{1}", and the name of the Action is used at "{0}", meaning default View path for our Controller above will be:</p>
<ul>
<li><span>"~/Views/StartPage/Index.cshtml"</span></li>
</ul>
<h2><span>Flooding of "Index.cshtml" files</span></h2>
<p>If you like me, use ReSharper and namely the "Navigation -> Search Everywhere/Go to Type" function to navigate/find your Views files, the amount of Index.cshtml files you'd end up - by default - becomes annoying. You probably already know this, but the files and folders in your Website project, will be something like this:</p>
<ul>
<li>Views
<ul>
<li>StartPage
<ul>
<li>Index.cshtml</li>
</ul>
</li>
<li>LandingPage
<ul>
<li>Index.cshtml</li>
</ul>
</li>
<li>CasePage
<ul>
<li>Index.cshtml</li>
</ul>
</li>
<li>ArticlePage
<ul>
<li>Index.cshtml</li>
</ul>
</li>
<li>Etc. etc.</li>
</ul>
</li>
</ul>
<p>Thankfully, we can make up for that!</p>
<h2>Creating a custom ViewEngine</h2>
<p>Go ahead and create a new class that inherits System.Web.Mvc.RazorViewEngine. Like this:</p>
<pre class="language-csharp"><code>public class EpiserverViewEngine : System.Web.Mvc.RazorViewEngine
{
}</code></pre>
<p>To define your own paths for Views (Pages and Catalog-nodes) and PartialViews (Blocks, Partials), add a constructor and set the value of ViewLocationFormats and PartialViewLocationFormats. Like this:</p>
<pre class="language-csharp"><code>public class EpiserverViewEngine : System.Web.Mvc.RazorViewEngine
{
public EpiserverViewEngine()
{
var partialViewLocations = new[]
{
"~/Views/Blocks/{1}.cshtml",
"~/Views/Shared/{0}.cshtml",
"~/Views/Blocks/{1}/{0}.cshtml",
"~/Views/Shared/{1}/{0}.cshtml"
};
var viewLocations = new[]
{
"~/Views/Pages/{1}.cshtml",
"~/Views/Nodes/{1}.cshtml",
"~/Views/Catalog/{1}.cshtml",
"~/Views/Pages/{1}/{0}.cshtml",
"~/Views/Nodes/{1}/{0}.cshtml",
"~/Views/Catalog/{1}/{0}.cshtml"
};
PartialViewLocationFormats = partialViewLocations;
ViewLocationFormats = viewLocations;
}
}</code></pre>
<p>The above paths are the ones I use, and it gives much more flexibility. </p>
<h3>Potential problem</h3>
<p>I've seen other examples of this where the paths above, are all set to the ViewLocationFormats property - and that includes both Views and PartialViews. This results in Episerver/MVC potentially resolving PartialViews as regular Views. And as we know, a PartialView should not be rendered with a Layout, which also includes model inheriting being a requirement.</p>
<p>I was trying to render a ContentArea in which I had inserted a Block of mine, and that resulted in an exception with the message:</p>
<p><strong>The model item passed into the dictionary is of type 'EPiServer.Core.ContentArea', but this dictionary requires a model item of type 'Namespace.IPageViewModel<T>'</strong></p>
<p>It took me quite some time debugging why this became a problem suddenly. When it finally struck me, that the PartialView belonging to my Block was being resolved as a regular View. So talk about a eureka-experience!</p>
<h2>Register your ViewEngine</h2>
<p>To register your new EpiserverViewEngine, create an InitializationModule - like this:</p>
<pre class="language-csharp"><code>[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ViewEngineInitializationModule : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
System.Web.Mvc.ViewEngines.Engines.Add(new EpiserverViewEngine());
}
public void Uninitialize(InitializationEngine context) {}
}</code></pre>
<p>You are now ready to use it. You can leave your StartPageController (example above), and use paths like these instead:</p>
<ul>
<li>Views/
<ul>
<li>Pages/
<ul>
<li>StartPage.cshtml</li>
<li>LandingPage.cshtml</li>
<li>CasePage.cshtml</li>
<li>ArticlePage/ <em>(Folder to bundle stuff together)</em>
<ul>
<li>Index.cshtml</li>
<li>_MyArticlePagePartial.cshtml</li>
</ul>
</li>
</ul>
</li>
<li>Blocks/
<ul>
<li>NewsletterBlock.cshtml</li>
<li>TeaserBlock.cshtml</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Feel free to use this, modify it and happy coding!</p>
<p>/Kristian</p>
</body>
</html>2018-05-19T12:31:00.0000000ZBlog post