Creating breadcrumb using the view and custom model_Sitecore Cookbook for Developers-QQ阅读男频轻小说网

上QQ阅读APP看书，第一时间看更新

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.

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 Sitecore.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); }}
}

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));
  }
}

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;
}

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:

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>

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:
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>
```
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.