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

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.

主站蜘蛛池模板: 洞口县| 浦江县| 金山区| 元氏县| 临泽县| 新津县| 阿克陶县| 肥城市| 张家港市| 白沙| 商城县| 正安县| 长治县| 古交市| 象州县| 安徽省| 北辰区| 芜湖市| 嘉祥县| 临武县| 通化县| 庐江县| 文安县| 嘉禾县| 和政县| 略阳县| 肇东市| 南召县| 郧西县| 宁津县| 烟台市| 孟连| 江口县| 八宿县| 丽水市| 米泉市| 博兴县| 开封市| 常山县| 当阳市| 桐庐县|