sitecore mvc tutorial creating your first sitecore mvc-website
copyright from:www.joe-stevens.com
In my last post I wrote about setting up your Sitecore solution. I’m now going to extend that to creating your first Sitecore MVC website. This post will build upon the solution created in my other post using TDS and code generation. I’ll keep this post just to the basics of getting the site up an running and then will write further posts to cover the different areas of Sitecore MVC.
For this post I’m just going to download a free HTML template and implement it with Sitecore. The template I’ve chosen is for a business website and can be downloaded here.
First I’m going to take the css and images and add them to my solution. I’ve created a folder called ‘Assets’ and inside that two folders, ‘css’ and ‘img’ and copied the css and images from the downloaded template to these folders.
After importing the assets I need to open style.css and do a bulk replace on ‘images/’ to ‘/assets/img/’ as that’s where I put the images for my solution.
Next I want to create the base view that includes the header and footer that all pages will have. Using common ASP.NET MVC conventions I’ve created a ‘Shared’ folder inside the existing ‘Views’ folder and inside that a new layout view called ‘_Layout’. I’ve taken one of the template’s HTML files and copied the content into this view. I’ve then deleted everything inside the div with the id ‘body’ and replaced it with a @RenderBody() tag. The layout looks like this:
You can see above I’ve changed the css reference to point to the correct location as well as updated the src of the logo image. I’ve also updated the href for each of the menu links so that they will work later when I create each page in Sitecore.
Now I’m going to create two views which will be my Sitecore Layouts; one for the homepage and one for all the other content pages. Inside my ‘Views’ folder I’ve created another folder called ‘Layouts’. First I’ll create the home layout. Just add a new view to the folder that uses the layout view created above. Inside this view copy everything inside the body div from index.html. Again you’ll need to update all the image references by replacing ‘images/’ with ‘/assets/img/’.
For the generic content Layout I’m going to use the ‘Sample Item’ template that comes with a new install of Sitecore. First of all I need to add this item into TDS which will then also automatically create a Glass Mapper compatible object for me. To do this right-click on the TDS project and choose ‘Get Sitecore Items’. In the dialog open templates, check the Sample folder, the right-click it and choose ‘Select all children’.
After clicking ‘Get Items’ you should see those items added to the TDS project and the code generation will create the classes for you. Now that we have our Sample Items classes I’ll use that to create the view for my Layout.
Before adding the view you need to install the GlassMapper.Sc.Mvc package through NuGet. There are different versions for each version of MVC so I need to add the one for MVC 5.
Now create a new view inside the Layouts folder called ‘ContentPage’ and place the following markup.
You can see that my view inherits from GlassView and uses the generated ISample_Item interface for the model type. This allows me to use Glass Mapper’s page editor supported helper methods.
The Editable helper method renders the given field and also gives page editor support. You can see I output the Title field inside the heading tag and then output the Text field. I’m also using the Title field as the class on the div. If you look into each page of the downloaded template there is a div with a class that matches the name of the page to allow different styling on each page. For this sample tutorial I’m just using the Title field and I’ll make sure the title of each of my pages match. In the real world you’d want to make a new field in the template for this so that it wasn’t relying on the title.
Now the views are ready I want to create the Layout items in Sitecore. Using Sitecore Rocks I’ve navigated to Layouts and created a new folder called ‘Custom’. Inside this folder I’ve create a ‘Home’ Layout and ‘ContentPage’ layout.
For each item set the path field to the location of the view file. For ‘Home’ this is ‘/Views/Layouts/Home.cshtml’ and for ‘ContentPage’ ‘/Views/Layouts/ContentPage.cshtml’. For ‘ContentPage’ you’ll also need to set the Model field. You can do this by entering the fully qualified type for the class as below.
If you’re going to use a model in multiple places you can also create a model item under ‘Sitecore > Layouts > Models’ and set the type on that item. You can then just reference that item from your Layouts and Renderings.
Remember to update your TDS project to include these layouts by right-clicking the TDS project and choosing ‘Get Sitecore Items’.
Now that the Layouts have been created it’s time to create the content pages that use them. There should already be a home item so I’ll just change the layout used for that item. In Sitecore Rocks open the content node and right-click on the ‘Home’ item. From the context menu choose ‘Tasks > Design Layout’. In the new window click the ‘Browse’ button and choose the ‘Home’ Layout and then delete the three Renderings used by the sample page.
Now create each content page by right-clicking on the ‘Home’ item and choosing ‘Add > Sample Item’
For each content page right-click the item and choose ‘Tasks > Design Layout’ and using the Browse button choose the ‘ContentPage’ layout.
Now we’re all done. Publish the website (I prefer just to set the website to read from the master database in the web.config on my local environments) and view the website in your browser. If you’ve followed everything you should be able to use the menu and view each of the pages we set up.
For the content pages you will just see the page title. For now just copy the content from each file in the downloaded template that is inside of the body DIV into the Text field in Sitecore. Each page will then look as it should but there is quite a bit of mark up in there.
I’ll continue to write posts on Sitecore MVC that will extend this tutorial to make each of the pages more dynamic.
In my last post I wrote about setting up your Sitecore solution. I’m now going to extend that to creating your first Sitecore MVC website. This post will build upon the solution created in my other post using TDS and code generation. I’ll keep this post just to the basics of getting the site up an running and then will write further posts to cover the different areas of Sitecore MVC.
For this post I’m just going to download a free HTML template and implement it with Sitecore. The template I’ve chosen is for a business website and can be downloaded here.
First I’m going to take the css and images and add them to my solution. I’ve created a folder called ‘Assets’ and inside that two folders, ‘css’ and ‘img’ and copied the css and images from the downloaded template to these folders.
After importing the assets I need to open style.css and do a bulk replace on ‘images/’ to ‘/assets/img/’ as that’s where I put the images for my solution.
Next I want to create the base view that includes the header and footer that all pages will have. Using common ASP.NET MVC conventions I’ve created a ‘Shared’ folder inside the existing ‘Views’ folder and inside that a new layout view called ‘_Layout’. I’ve taken one of the template’s HTML files and copied the content into this view. I’ve then deleted everything inside the div with the id ‘body’ and replaced it with a @RenderBody() tag. The layout looks like this:
<!DOCTYPE html><!-- Template by freewebsitetemplates.com --><html><head> <meta charset="utf-8" /> <title>Business Solutions</title> <link rel="stylesheet" type="text/css" href="/Assets/img/style.css" media="all" /></head><body> <div id="header"> <div id="logo"> <a href="/"> <img src="/Assets/img/logo.jpg" alt="" /></a> </div> <ul> <li><a href="/"><span>home</span></a></li> <li class="selected"><a href="/about"><span>about us</span></a></li> <li><a href="/services"><span>services</span></a></li> <li><a href="/products"><span>products</span></a></li> <li><a href="/contact"><span>contact us</span></a></li> </ul> </div> <div id="body"> @RenderBody() </div> <div id="footer"> <div> <div> <h3>america</h3> <ul> <li>457-380-1654 main</li> <li>257-301-9417 toll free</li> </ul> </div> <div> <h3>europe</h3> <ul> <li>457-380-1654 main</li> <li>257-301-9417 toll free</li> </ul> </div> <div> <h3>canada</h3> <ul> <li>457-380-1654 main</li> <li>257-301-9417 toll free</li> </ul> </div> <div> <h3>middle east</h3> <ul> <li>457-380-1654 main</li> <li>257-301-9417 toll free</li> </ul> </div> <div> <h3>follow us:</h3> </div> </div> <div> <p>© Copyright 2012. All rights reserved</p> </div> </div></body></html>Now I’m going to create two views which will be my Sitecore Layouts; one for the homepage and one for all the other content pages. Inside my ‘Views’ folder I’ve created another folder called ‘Layouts’. First I’ll create the home layout. Just add a new view to the folder that uses the layout view created above. Inside this view copy everything inside the body div from index.html. Again you’ll need to update all the image references by replacing ‘images/’ with ‘/assets/img/’.
For the generic content Layout I’m going to use the ‘Sample Item’ template that comes with a new install of Sitecore. First of all I need to add this item into TDS which will then also automatically create a Glass Mapper compatible object for me. To do this right-click on the TDS project and choose ‘Get Sitecore Items’. In the dialog open templates, check the Sample folder, the right-click it and choose ‘Select all children’.
After clicking ‘Get Items’ you should see those items added to the TDS project and the code generation will create the classes for you. Now that we have our Sample Items classes I’ll use that to create the view for my Layout.
Before adding the view you need to install the GlassMapper.Sc.Mvc package through NuGet. There are different versions for each version of MVC so I need to add the one for MVC 5.
Now create a new view inside the Layouts folder called ‘ContentPage’ and place the following markup.
1
2
3
4
5
6
7
8
9
10
| @inherits Glass.Mapper.Sc.Web.Mvc.GlassView<MySitecoreWebsite.Web.Models.sitecore.templates.Sample.ISample_Item>@{ Layout = "~/Views/Shared/_Layout.cshtml";}<div class="@Model.Title.ToLower()"> <h1>@Editable(m => m.Title)</h1> @Editable(m => m.Text)</div> |
The Editable helper method renders the given field and also gives page editor support. You can see I output the Title field inside the heading tag and then output the Text field. I’m also using the Title field as the class on the div. If you look into each page of the downloaded template there is a div with a class that matches the name of the page to allow different styling on each page. For this sample tutorial I’m just using the Title field and I’ll make sure the title of each of my pages match. In the real world you’d want to make a new field in the template for this so that it wasn’t relying on the title.
Now the views are ready I want to create the Layout items in Sitecore. Using Sitecore Rocks I’ve navigated to Layouts and created a new folder called ‘Custom’. Inside this folder I’ve create a ‘Home’ Layout and ‘ContentPage’ layout.
For each item set the path field to the location of the view file. For ‘Home’ this is ‘/Views/Layouts/Home.cshtml’ and for ‘ContentPage’ ‘/Views/Layouts/ContentPage.cshtml’. For ‘ContentPage’ you’ll also need to set the Model field. You can do this by entering the fully qualified type for the class as below.
If you’re going to use a model in multiple places you can also create a model item under ‘Sitecore > Layouts > Models’ and set the type on that item. You can then just reference that item from your Layouts and Renderings.
Remember to update your TDS project to include these layouts by right-clicking the TDS project and choosing ‘Get Sitecore Items’.
Now that the Layouts have been created it’s time to create the content pages that use them. There should already be a home item so I’ll just change the layout used for that item. In Sitecore Rocks open the content node and right-click on the ‘Home’ item. From the context menu choose ‘Tasks > Design Layout’. In the new window click the ‘Browse’ button and choose the ‘Home’ Layout and then delete the three Renderings used by the sample page.
Now create each content page by right-clicking on the ‘Home’ item and choosing ‘Add > Sample Item’
For each content page right-click the item and choose ‘Tasks > Design Layout’ and using the Browse button choose the ‘ContentPage’ layout.
Now we’re all done. Publish the website (I prefer just to set the website to read from the master database in the web.config on my local environments) and view the website in your browser. If you’ve followed everything you should be able to use the menu and view each of the pages we set up.
For the content pages you will just see the page title. For now just copy the content from each file in the downloaded template that is inside of the body DIV into the Text field in Sitecore. Each page will then look as it should but there is quite a bit of mark up in there.
I’ll continue to write posts on Sitecore MVC that will extend this tutorial to make each of the pages more dynamic.
Comments
Post a Comment