Book Image

Sitecore Cookbook for Developers

By : Yogesh Patel
Book Image

Sitecore Cookbook for Developers

By: Yogesh Patel

Overview of this book

This book will get you started on building rich websites, and customizing user interfaces by creating content management applications quickly. It will give you an insight into web designs and how to customize the Sitecore architecture as per your website's requirements using best practices. Packed with over 70 recipes to help you achieve and solve real-world common tasks, requirements, and the problems of content management, content delivery, and publishing instance environments. It also presents recipes on Sitecore’s backend processes of customizing pipelines, creating custom event handler and media handler, setting hooks and more. Other topics covered include creating a workflow action, publishing sublayouts and media files, securing your environment by customizing user profiles and access rights, boosting search capabilities, optimising performance, scalability and high-availability of Sitecore instances and much more. By the end of this book, you will have be able to add virtually limitless features to your websites by developing and deploying Sitecore efficiently.
Table of Contents (20 chapters)
Sitecore Cookbook for Developers
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Creating breadcrumb using the view and custom model


In the previous recipe, you learned creating a simple menu using a view with the default RenderingModel. In this recipe, we will create breadcrumb using a view and custom model.

Getting ready

For this recipe, we will use the same layout and items created in the previous recipes.

How to do it…

We will first create two classes: a simple BreadcrumbItem and BreadcrumbList. Here, BreadcrumbList will contain a list of BreadcrumbItem objects.

  1. In the SitecoreCookbook project, create a BreadcrumbItem class in the Models folder. This class will contain properties useful to render breadcrumb items. We inherited this class from Site core.Data.Items.CustomItem to implement custom items:

    public class BreadcrumbItem : CustomItem
    {
      public BreadcrumbItem(Item item)
        : base(item) {Assert.IsNotNull(item, "item");}
    
      public string Title
      {get { return InnerItem["Title"]; }}
    
      public bool IsActive
      {get { return Sitecore.Context.Item.ID == InnerItem.ID;}}
    
      public string Url
      {get { return LinkManager.GetItemUrl(InnerItem); }}
    }
  2. In the SitecoreCookbook project, create a rendering BreadcrumbList model class in the Models folder, which will make a list of all the breadcrumb items. Make sure that it inherits the Sitecore.Mvc.Presentation.RenderingModel class so that Sitecore will automatically invoke its Initialize() method when the view is invoked:

    public class BreadcrumbItemList : RenderingModel
    {
      public List<BreadcrumbItem> Breadcrumbs { get; set; }
      public override void Initialize(Rendering rendering)
      {
        Breadcrumbs = new List<BreadcrumbItem>();
        List<Item> items = GetBreadcrumbItems();
        foreach (Item item in items)
        {
          Breadcrumbs.Add(new BreadcrumbItem(item));
        }
        Breadcrumbs.Add(new BreadcrumbItem(Sitecore.Context.Item));
      }
    }
  3. Create the GetBreadcrumbItems() method to collect a list of breadcrumb items as follows:

    private List<Sitecore.Data.Items.Item> GetBreadcrumbItems()
    {
      string homePath = Sitecore.Context.Site.StartPath;
      Item homeItem = Sitecore.Context.Database.GetItem(homePath);
      List<Item> items = Sitecore.Context.Item.Axes.GetAncestors()
        .SkipWhile(item => item.ID != homeItem.ID)
        .ToList();
      return items;
    }
  4. We will now register this model in Sitecore. From the Content Editor, select the /sitecore/layout/Models item. Create a Cookbook folder, and create a BreadcrumbItemList model in it. Set the Model Type field value to the fully qualified type name of this class, as shown in the following image:

  5. Now we will create a view to render breadcrumb items. In the SitecoreCookbook project, create a Breadcrumb.cshtml view in the /Views/Navigation folder. Set the created BreadcrumbItemList model in the @model directive. Place the view content as follows:

    @model SitecoreCookbook.Models.BreadcrumbItemList
    <ol class="breadcrumb">
      @foreach (var item in Model.Breadcrumbs) {
        <li>
          @if (@item.IsActive)
            { @item.Title }
          else { 
            <a href="@item.Url">
              @item.Title
            </a>
          }
        </li>
      }
    </ol>
  6. Register this view in Sitecore, and remember to assign the registered model to this view. So, when the view is invoked, Sitecore will initialize the mentioned model to collect the breadcrumb item list and pass it to the view:

  7. In the same way as the previous recipe, place this breadcrumb view rendering in Main Layout so that it will get applied to all the items having this layout. Use the following code for this, and update the item ID of the view rendering in the code:

    <div id="breadcrumb">
      @Html.Sitecore().Rendering("{764C9697-EA31-4409-8208-0CAECBD76500}")
    </div>
  8. Now, preview an item; you will find the breadcrumb on the site, as shown in the following image:

How it works…

Here, we built breadcrumb using a custom RenderingModel. For this, we should either inherit the Sitecore.Mvc.Presentation.RenderingModel class or implement the Sitecore.Mvc.Presentation.IRenderingModel interface.

The Sitecore MVC framework gives a nice feature of invoking a model to pass data to the view without creating a controller. For this, in step 6, we mapped the model to our view rendering. In the next recipe, you will learn how to use controller rendering with the view.

See also

If you are interested in knowing how Web control and sublayout works, you can find a working sample of breadcrumb and Side Menu from the code bundle provided with this book. As an alternative, you can also learn basic Web Forms components from https://goo.gl/nlX3Cp.