Populating Sitecore mvc model in .net mvc view

Yes, we can pass a sitecore populated view to a .net razor view in Sitecore with MVC. Here, I will go through a simple example on how to display social links to a website whose link name and its URL is provided at sitecore content item but needs to be rendered inside a razor view (.cshtml file).

Create C# Model classes.

Create a Model class called SocialLinks in c# as shown below.

SocialLinks.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Sitecore;
using Sitecore.Mvc.Presentation;
using Sitecore.Data.Items;
using Sitecore.Web.UI.WebControls;
namespace Sitecore.MyProjSolution.Website.Models 
{
    public class SocialLinks : List<SocialLinks>, IRenderingModel
    {
        public Sitecore.Mvc.Presentation.Rendering Rendering { get; set; }
        public Item Item { get; set; }
        public Item PageItem { get; set; }
        public virtual string Title { get; set; }
        public virtual string URL { get; set; }
        public List<SocialLinks> SocialLinksItems = new List<SocialLinks>();
        public SocialLinks() { }
        public SocialLinks(Item item)
        {
            this.Title = FieldRenderer.Render(item, "Title");
            this.URL = FieldRenderer.Render(item, "Link");
        }
        public void Initialize(Sitecore.Mvc.Presentation.Rendering rendering)
        {
            Rendering = rendering;
            Item = rendering.Item;
            PageItem = PageContext.Current.Item;
            foreach (Item child in rendering.Item.GetChildren())
            {
                SocialLinks obj = new SocialLinks(child);
                SocialLinksItems.Add(obj);
            }
        }
    }
}

###Create Sitecore Models.

From sitecore content editor create a new Model with some name say SocialLinksModel.

1. Go to Layouts->Models, right click on Models and then click on Insert-> Model.

2. Provide the field values for the Model as shown below.

   Model Type: Sitecore.MyProjSolution.Website.Models.SocialLinks,Sitecore.MyProjSolution.Website

3. Save and publish the item.

###Create view rendering and view file.

From sitecore content editor, create a view rendering with name SocialLinksRendering.

1. Go to Layouts->Renderings, right click on Renderings and select Insert->View Rendering. Give the name as SocialLinksRendering and with below mentioned field values.

• Path: Path to the razor view file say “/Views/Shared/SocialLinks.cshtml“.
• Model: Click on insert link and select the sitecore Model we have created ‘SocialLinksModel’.
• PlaceHolder: This is the placeholder in the Layout file where this view rendering should be rendered.

2. Save and publish the item.

   SocialLinks.cshtml

    @model Sitecore.MyProjSolution.Website.Models.SocialLinks
    <div class="container">
        <div class="row social">
           <ul class=" list-inline pull-right">
                @foreach (var item in @Model.SocialLinksItems)
                {          
                    <li> <a href="@item.URL" title ="@item.Title" rel="nofollow" target="_blank">
                    <i class="social-item"></i>
                    </a></li>   
                }  
          </ul> 
        </div>
    </div>
   

###Create sitecore content items/data source.

Create an item under Content in Sitecore and name it as SocialLinksDataSource.

1. Right click on Content and click on insert-> Insert from Template.
2. Select a template without any data fileds inside if none exists create a new template without any data fields and select that template here.

• Create a child item to SocialLinksDataSource. Right click on SocialLinksDataSource and click on insert -> Insert from Template, select a template which has two fields Title (Single line Text), Link (Single line Text) ( If there is no template with such fields then create a new template and select that template) name the Item as say Facebook and provide the below field values.

  • Title: Facebook
  • Link: http://www.facebook.com/MyPage

• Similarly create one more item under the parent item SocialLinksDataSource and name it as Twitter with below mentioned field values.

  • Title: Twitter
  • Link: http://www.twitter.com/MyPage