Now that we have Sitecore running, we can start creating our site.
With a normal MVC site, the controller and method name would be part of your site's URL. But because this is a Sitecore site, we don’t want this same routing. So we will have to edit the configured routing in App_Start/RouteConfig.cs. Change the Default route to this:
routes.MapRoute(
name: "Default",
url: "musicstore_api/{controller}/{action}/{id}",
defaults: new { id = UrlParameter.Optional }
);
Creating the homepage
Create a HomeController under the Controllers folder of you Web project(this controller probably already exists because it was created when you created the MVC Web project).
Then add(or replace) a method called Index, which returns a simple view showing a string:
public ActionResult Index()
{
return View(model: "This is the homepage");
}
And create a View for the method we just created under Views/Home
The homepage will still show a default Sitecore page, but if we go to /musicstore_api/Home/Index we will see the result of our newly created controller and method. This is the URL which Sitecore will also use under water to show the result of a created component.
Before we can add this component to a page on our site, we’ll have to add a placeholder to our view so that we can actually add components to the pages.
Open or create the _Layout.cshtml under Views/Shared and edit it to look like the following:
@using Sitecore.Mvc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
</head>
<body>
<div id="main">
@Html.Sitecore().Placeholder("main")
</div>
</body>
</html>
Now build your solution and open the Content Editor in Sitecore.
First we will add a new Layout to Sitecore. Go to /Sitecore/Layout/Layouts and create a new Layout item. The path in this item should be “/views/Shared/_Layout.cshtml”. We will use this Layout for all the pages of the site.
Image may be NSFW.
Clik here to view.
Next, we will need to create a component/rendering before we can add it to a page.
Go to /Sitecore/Layout/Renderings and create a base folder structure for all the renderings we are going to add here. Then create a Controller rendering. I created the rendering under /sitecore/layout/Renderings/MVC MusicStore/Home/Index.
In the rendering you should fill the Data fields “Controller” and “Controller Action”. Controller should be “Home” and Controller Action should be “Index”.
Image may be NSFW.
Clik here to view.
Because we also want to support the Experience Editor(in Sitecore 7 and before it was called the Page Editor) we need to add Placeholder Settings. These Placeholder Settings tell the Experience Editor which components can be placed in which placeholders. For each placeholder you can create default Placeholder Settings which you can override on page level by creating another Placeholder Settings item and adding it to the page presentation details.
Go to /Sitecore/Placeholder Settings and create a new Placeholder item with the Placeholder Key “main” and add the newly created rendering to the Allowed Controls.
Image may be NSFW.
Clik here to view.
Go to the homepage of your site and add set the layout in the Presentation Details to the Layout we just created.
Now we can open the page in the Experience Editor. You’ll see an empty page but with a placeholder we can use to add our components.
Image may be NSFW.
Clik here to view.
When you press the “Add here” button, you’ll be able to select a rendering you want to add to the page. Select the Index rendering we just created.
Image may be NSFW.
Clik here to view.
After adding the component to the page you’ll see the result of the component we created.
Image may be NSFW.
Clik here to view.
Congratulations, you just created your first component! Next thing we’ll do is add some styling.
Making it pretty
We are going to add the styling from the original MusicStore tutorial.
In the assets of this part there is a Content folder. In this folder you can find all the CSS files and images. Place these in the Content folder of your Visual Studio project.
Now open the default layout (/Views/Shared/_Layout.cshtml). We will add the CSS and JavaScript inserts, and a menu:
@using Sitecore.Mvc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1><a href="/">SITECORE MVC MUSIC STORE</a></h1>
<ul id="navlist">
<li class="first"><a href="@Url.Content("~")" id="current">Home</a></li>
<li><a href="@Url.Content("~/Store/")">Store</a></li>
</ul>
</div>
<div id="main">
@Html.Sitecore().Placeholder("main")
</div>
</body>
</html>
This should result in the following look of the homepage:
Image may be NSFW.
Clik here to view.
As you can see we already added a “Store” menu link. In the next tutorial we will be creating the actual store functionalities!