Sitecore MVC For Beginners – Part 1 – Getting Started

In recent times Sitecore MVC has gain much popularity & it has become a standard choice now.
With every new Sitecore release, this is becoming more popular & powerful.

I get more & more requests to write about Sitecore MVC so here it is, a blog series about Getting Started with Sitecore MVC for beginners like me.

In this blog series we will create a demo website while learning basics of Sitecore MVC.
For this blog series I’m using Sitecore 8.1 update 3 [SC81rev160519] but this tutorial should work for Sitecore 8+ versions.

In this part of the blog series, we will install a blank instance of the Sitecore & create a Sitecore MVC Layout to print “Hello Sitecore MVC!!!”.

Let’s start with installing the fresh Sitecore.
I will encourage you to use SIM for installing Sitecore.

I named my website (or Sitecore instance) as MVCDemo.

If I navigate to http://mvcdemo/ URL in any browser, this is how our default website looks like :

default

Nothing fancy yet just what usual clean Sitecore website’s home page look like.

Let’s start with saying Hello to Sitecore MVC.
For this I’m going to create a new MVC Layout.
If you haven’t login to the Sitecore shell website yet, it’s time to do it.
Hit the /sitecore/login after the website’s domain, in my case it is:
http://mvcdemo/sitecore/login

Provide the user name & password here to login.

After the successful login you should the below screen:

sc_desktop

As you can see Sitecore has a Window style Start button (in bottom let corner), let’s Open the Start Menu & click the Content Editor option.

click_content_editor

Clicking this should open the Content Editor with Content Tree in the left-side.
This is how my content tree look like in clean Sitecore:

content-tree-in-left

Creating Our MVC Layout (Sitecore Layout):
If the term Sitecore Layout is new to you, I would strongly recommend you read this document before moving ahead.

To create our new Sitecore MVC Layout, I’m going to open (expand) the Layout folder item from the Content Tree.

After expanding we see below folders under the Layout folder item:

 

layout-folder-expanding

As a standard practice, we will be creating our MVC Layout under Layouts folder item.
Let’s expand the Layouts folder item & create a new folder item called MVCDemo.
Again creating our custom folder is recommended as this separates our Sitecore Layout(s), from default Sitecore Layouts.

Now right click on the MVCDemo folder item &  from insert options, click Add a new MVC Layout option:

mvc-layout

This will open a wizard to create the MVC Layout item.

layout-wizard

Let’s name our MVC Layout “Main” & click next in the wizard.
In the next screen, choose the MVCDemo folder & click Next:

layout-item-location
After we click Next, we need to choose the file location (under the web root) for our MVC Layout.

You can choose to simply click Next or you can do as I did before clicking the Next, navigate to the View folder in the website root & create a physical folder and name it MVCDemo.

Under this MVCDemo folder I created another folder called Layouts.
Now comeback to the wizard & refresh the Views folder (by collapsing & expending again) & you should see the MVCDemo folder & if you expand it you should see the Layouts folder as well:

layout-file-location

Choose the Layouts folder here, click Create button & let wizard do the rest.
If everything goes right (it should be), & you see the below screen click Close to make wizard disappear.

wizard-close

We should see Main layout inside the Sitecore under Layout folder item as well as we should see Main.cshtml file [razor file -we will use this to write HTML & few lines of code] under the Webroot/Views/MVCDemo/Layouts folder.

Before going ahead let’s save & publish the Main layout in Sitecore.

We will now assign this MVC Layout (named Main) to the Home item.
Let’s navigate to the Home item & open it’s Presentation Details.
As we can see in below image this is how default Presentation Details of Home item look like:

sc_mvc_pt_1

We need to change the Layout of the Home item & for this select the newly created Main layout in the Layout.

There are many other rendering (or Sublayouts) assigned to the Home item, let just leave them for now.
After changing the Layout, close the Presentation Details & Save and publish the Home item.

Let’s see how our change will affect our homepage.

Open our website’s homepage (the only page we have as of now) in browser & you should just see the page title [Sitecore Experience Platform] instead of the default page we were seeing earlier.

Did we break anything?
Well, No, we did not break anything but since our new Layout is applied which is almost plain as of now, we see nothing but the page title.

Why do we see page title, if we haven’t code for it?
If you open the Main.cshtml with any text editor (I’m using Notepad++),  you should see content below:

@using Sitecore.Mvc
@* @using Sitecore.Mvc.Analytics.Extensions *@
@{
Layout = null;
}
<!DOCTYPE html>
<html>
    <head>
        <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
        @* @Html.Sitecore().VisitorIdentification() *@
    </head>
    <body>
<h1>@Html.Sitecore().Field("title")</h1>
<div>
            @Html.Sitecore().Placeholder("main")</div>
</body>
</html>

When we create the Sitecore MVC Layout, Sitecore provide us the basic scaffolding & example to render fields.

<h1>@Html.Sitecore().Field("title")</h1>

The above line is responsible for rendering the content of Title field from Home item.

We also get one Sitecore placeholder (don’t worry if you don’t know what Sitecore placeholder is) called main, where we can add other Sublayouts/Renderings.

Next we will print the “Hello Sitecore MVC!!!” on the page.
Go back to the Home item in Sitecore & update the content of the Title field to “Hello Sitecore MVC!!!“.

sc_mvc_hello_sc

Save and publish the Home item.
Refresh the home page in browser.

Do you see the “Hello Sitecore MVC!!!” ?

Hello Sitecore MVC !!!

That’s all for today, in next post we will setup Visual Studio solution for Sitecore MVC.

Please share your feedback in comments below.