Sitecore MVC – The Simplest Page

I’m interested in what Sitecore can do with Mvc out-of-the-box. I want Sitecore to pick up a request, parse the url and find the appropriate item. I want Sitecore to provide me with standard routes, controllers, models and helpers. I want to continue utilizing the existing way Sitecore automatically assembles pages (using devices, layouts, renderings, placeholders). I also want things like page editor, the rules engine and item buckets to just work.

So let’s start with a clean install (7.0 rev 131127). With 7.1 Mvc comes enabled automatically however with 7.0 I have to enabled it. Once enabled I’ll start by create a layout. In this version there is no native Mvc layout. I have to create the layout and then delete the web forms .aspx file that has been created for me. I change the path to point to the view file I’ve created (see below) and leave the model blank.

@using Sitecore.Mvc
<!DOCTYPE html>
<html>
    <head>
        <title>Sitecore Mvc</title>
    </head>
    <body>
        @Html.Sitecore().Placeholder("body")
    </body>
</html>

So we have started gently with a simple page showing a placeholder. Don’t forget the placeholder settings item to get page editor working. However once that is done this all works fine and I get the empty placeholder shaded box displayed. The Helper syntax isn’t exactly pretty but it gets the job done. I could spend some time now implementing my own SitecoreHelper to improve matters but to do this I need to create a new page base type. Not something to worry about yet.

Next up, I’ll add a field to my basic page item template. This will hold the html title. I don’t want the page editor to kick in here so provide the disable web edit parameter.

@Html.Sitecore().Field("title", new { DisableWebEdit = true })

This all feels a bit long winded. Is there a way to make the call more direct? I can move away from the helper and make use of the RenderingModel that Sitecore has provided me. At the same time I’ll push the additional @using Sitecore.Mvc.Presentation into the Views/web.config which will keep the views a little cleaner.

@model RenderingModel
<!DOCTYPE html>
<html>
    <head>
        <title>@Model.Item.Fields["title"]</title>
    </head>
    <body>
        @Html.Sitecore().Placeholder("body")
    </body>
</html>

I’ve lost the renderField pipeline. So going to the model direct only works in this context. However for now I see no reason not to have this option available. It will be interesting as the need arises, should additional code go into the model the helper or the pipeline?

Now we have the basics of a page and placeholder. Let’s create the simplest (but most hard working) of all renderings. That is the rich text content item. I’m going for the view rendering as I have no business or presentation logic to worry about. Unlike the layout there is plenty of support for creating these simple views within the Sitecore content editor and the Rocks studio plug-in. As with the layout the only field I need worry about is making sure the path points to my view. Rocks will even link your .cshtml file with the corresponding item in the master database, keeping the two in sync.

Given my using statements are hidden away in the Web.config, my view is simplicity itself with only a single line of code required.

@Html.Sitecore().Field("Rich Text")

The result is what we would expect. The full page editor experience thanks to the renderField pipeline being run from within the standard Sitecore Helper.

Rich Text Page Editor

So there it is. Using the out-of-the-box MVC features available within Sitecore you really do have everything you need to build a basic static website displaying fields directly from the items selected in the renderings data source. This gives us full page editor experience, MV testing and access to the complete rules engine. In the next post I’ll consider a more realistic example, where we start traversing the content tree to select contextual data and I consider how to start unit testing this business and presentation logic.

Reference
http://www.sitecore.net/Community/Business-Blogs/Technical-Trends/Posts/2012/06/MVC-and-Sitecore-651-Overview.aspx
http://stackoverflow.com/questions/14957541/sitecore-mvc-rendering-type-clarification

This entry was posted in Sitecore, Sitecore MVC and tagged . Bookmark the permalink.

2 Responses to Sitecore MVC – The Simplest Page

  1. Abhishek Shrivastava says:

    Thank you for sharing how to disable Web Editing using MVC helper method..

  2. gothandy says:

    Abhishek, my intention was to enable, not disable Web Editing using MVC!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s