How to read Sitecore data in controller?

Hello everyone let’s do something more with the site which was created on the article: The first Sitecore page if you didn’t see it I recommend to see previous steps how to be a Sitecore hero!

On this article I will show you how to consume data from Sitecore items and how to present them on the site, I will also show you and explain what is Experience Editor, how to open it and how to recognize that we are in Experience Editor mode.

So, let’s start with extending our template which is called ‘MyTemplate’. We want to add here some more fields to see how to render on page different type of fields. We need to add Article text and image field as it is on the screenshot below. Take a look on types because on Article text we have Rich Text which is very useful if we want to have different data. After adding new fields please save our template.

Next, we need to fill some data in our First Article item which should be stored under /sitecore/content/Home/First Article. Now our item should look like this:

Lets put some values into our newly created fields. This is how to pick some image we need to click on Browse and then pick one of the predefined images we can also upload our image to Media Library and pick it.

Also, let’s fill Article text field the type of it if you remember is Reach Text so it is great for storing data as in for example article. To start editing that field we need to click on ‘Show editor’ button.

After the click, we will see Rich Text Editor like it is on the screenshot below. Here we can start to write our text and style it. I have also marked for you two useful buttons. First one is for add link to any Sitecore item which has set presentation details, in my case I’ve created the link to our First Article I think in the next article I will show you a little bit more about the navigation stuff. The second button is to add media library items like gifs, images etc.. in my case I’ve added some predefined image of SitecoreCMS.

I have also filled ‘Some nice text’ field and here is how it looks like in my case after filling the data.

Next thing that we need to do is to save and then publish a site. I think smart publish will be the best option. We could also make publish item option on the  ‘MyTemplate’ item and then on ‘First Article’ item but it is faster to use smart publish on site. Now after publish if we will go to ‘mySitecoreInstance/First-Article’ we will not see the data… We need also adjust our code to show those data. To do that I need to add a package named Glass Mapper into our solution. Glass is a package which helps to map data retrieved from context to objects on which we can easily work. Here is the link for interested people to glass mapper site: http://glass.lu/ under tab GLASS.MAPPER.SC you will also find some info, you can also get some free lectures from their training course: http://glass.lu/Training . I will show you also how to add Glass mapper and how to deal with it!

Firstly we need to open Package Manager for our project. To do that you need to right click on the project and click on ‘Manage NuGet Packages…’.

Next, we need to type in Browse tab Glass.Mapper.Sc.* <- in my case, it was 90 but it depends which version of Sitecore do you have. So please check that before installation. We need to pick a package and click Install button which is on the right side.

After successful installation, you can check what files were added into our project. Because of them, the mapping context items into objects work fine. I will show you where to look for them. The first part of added files is inside of our App_Config\Include\Glass folder which was added during installation. Here we have some configuration files.

Next part of installed files we have under App_Start folder – here is all necessary code. We can also do some customizations on that that’s why we have it at our disposal.

Ok! We have installed Glass mapper so let’s create a class which will be the representation of our template. To do that we need to create the class under Models folder like on the screenshot below:

I will call it ‘MyTemplate’ as the name of our template in Sitecore. I wrote here some lines which correspond to our Sitecore template fields. I’ve also used Glass attributes like [SitecoreId] which show us that when we will map the Sitecore item the ID will be passed to this variable. Then we have an attribute like [SitecoreField(“Some nice text”)] and it is useful when we have some spaces in Sitecore fields name because then that fields will be mapped to this variables, but if we have fields like Title and we have also variable which has the same name we have no problem it will be mapped automatically. We have more Glass attributes you can check them in documentation or during using glass mapper. We also need to remember to mark all properties in our class as a VIRTUAL because it is a necessary thing to work with glass. Below you can see how the class prepared by me for my case look like:

using Glass.Mapper.Sc.Configuration.Attributes;
using Glass.Mapper.Sc.Fields;
using System;

namespace events.tac.local.Models
{
    public class MyTemplate
    {
        [SitecoreId]
        public virtual Guid Id { get; set; }

        public virtual string Title { get; set; }

        [SitecoreField("Some nice text")]
        public virtual string BigerText { get; set; }

        [SitecoreField("Article text")]
        public virtual string ArticleText { get; set; }

        [SitecoreField("Some nice article image")]
        public virtual Image ArticleImage { get; set; }
    }
}

Ok, we have our Model class next thing what we need to create we need to add also view model – class which will pass our data to view. We can add it to the same folder – Models. It will be a simple class with one property as below:

namespace events.tac.local.Models
{
    public class FirstArticleViewModel
    {
        public MyTemplate FirstArticle { get; set; }
    }
}

Now we have all the necessary models which we needed to pass our data now we can extend our ‘MyFirstSitecoreController’ which was created in the previous article. All we need to do is create context and get page context item which will be mapped to our model class. Next, we need to fill our view model with that data and pass the view model to the view that we could see our data on the page.

using events.tac.local.Models;
using Glass.Mapper.Sc.Web.Mvc;
using System.Web.Mvc;

namespace events.tac.local.Controllers
{
    public class MyFirstSitecoreController : Controller
    {
        // GET: MyFirstSitecore
        public ActionResult Index()
        {
            var mvcContext = new MvcContext();

            var model = new FirstArticleViewModel
            {
                FirstArticle = mvcContext.GetPageContextItem<MyTemplate>()
            };

            return View(model);
        }
    }
}

The last thing that we need to adjust is our Index.cshtml file which should be stored in Views\MyFirstSitecore\Index.cshtml. We need to use some Glass helper to show the data properly and the data should be also editable in Experience Editor mode. It is the mode that we can live on page edit content, and it is always good practice to support that mode because it is comfortable for editors to use it. I’ve also needed to use @using Glass.Mapper.Sc.Web.Mvc and @model events.tac.local.Models.FirstArticleViewModel – first one is support for our glass helper and the second one says our view what type of view model we will be passing to our view. So here is how the view should look like in my case:

@using Glass.Mapper.Sc.Web.Mvc
@model events.tac.local.Models.FirstArticleViewModel

<div>
    <h4>Hello World Sitecore!</h4>
</div>


<div class="dataFromSitecore">
    <div class="article">
        <h1>@Model.FirstArticle.Title</h1>
        @if (Model.FirstArticle.ArticleImage != null)
        {
            <p>ArticleImage:</p>
            @Html.Glass().RenderImage(x => x.FirstArticle.ArticleImage, isEditable: true)
        }
        <p>Some nice text:</p>
        @Html.Glass().Editable(x => x.FirstArticle.BigerText)
        <p>Article text:</p>
        @Html.Glass().Editable(x => x.FirstArticle.ArticleText)
    </div>
</div>

Now we can build and publish by one click publish our new code. If you don’t know how to do it please look at the previous article. After that, we can simply refresh our site – mySitecoreInstance/First-Article and after Sitecore reloads we should see our content on the site, please be sure that our items are published if not try to publish the site. After all our page should look like on the screenshot below:

If it looks like that that’s perfect! Now some additional thing I will show you what is an Experience Editor and how to edit the content of the page through this mode. So we need to go to our item in a Sitecore content editor. Then we need to click on it to see our fields. Then we need to go to publish tab and select Experience Editor.

After click and load page we should see our page with some additional blue border like on the image below and this is like our page looks in Experience Editor mode.

Using that mode we can edit all fields. You can try it on your Sitecore instance, try to change images text etc. After all customizations remember to save the file. Using experience editor we can customize the whole page that we can add some new components to this site I will also show that in some next article.

 

Thanks for reading! And see you in the next article, stay tuned!