官术网_书友最值得收藏!

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 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); }}
    }
  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:
    How to do it…
  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:
    How to do it…
  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 to do it…

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.

主站蜘蛛池模板: 顺义区| 喀喇沁旗| 绥江县| 新密市| 连南| 昭平县| 鱼台县| 庄浪县| 乐业县| 万盛区| 南溪县| 洪江市| 裕民县| 遂宁市| 铜山县| 宜兰市| 巴青县| 淄博市| 图们市| 姚安县| 包头市| 永德县| 湘潭市| 扎兰屯市| 西吉县| 河津市| 兴海县| 永泰县| 建昌县| 江源县| 福泉市| 青岛市| 阳春市| 两当县| 庐江县| 恩平市| 张家口市| 商都县| 吉林省| 静乐县| 惠水县|