Populating Sitecore mvc model in .net mvc view

Pranay
May 24, 2020  ·  12570 views

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.
  1. 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.

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

AUTHOR

Pranay

A Software Engineer by profession, a part time blogger and an enthusiast programmer. You can find more about me here.


Post a comment




Thank you! You are now subscribed.

Sign up for our newsletter

Subscribe to receive updates on our latest posts.

Thank you! You are now subscribed.