Hello Sunny

The Alloy sample site has a breadcrumb already as shown below:

You should be able to use this code yourself in your project.

David

Let's say you want to keep IPageViewModel from Alloy.

First you need to create a view model for breadcrumbs:

public class BreadcrumbItemViewModel
{
    public string Url { get; set; }
    public string Title { get; set; }
}

Then update IPageViewModel:

public interface IPageViewModel<out T> where T : SitePageData
{
    ...
    List<BreadcrumbItemViewModel> BreadcrumbItems { get; set; }
}

Then update PageViewModel:

public class PageViewModel<T> : IPageViewModel<T> where T : SitePageData
{
    public PageViewModel(T currentPage)
    {
        CurrentPage = currentPage;
        BreadcrumbItems = GetBreadcrumbItems(currentPage.ContentLink);
    }
	
	...

    public List<BreadcrumbItemViewModel> BreadcrumbItems { get; set; }

    private List<BreadcrumbItemViewModel> GetBreadcrumbItems(ContentReference currentPage)
    {
        var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
        var parents = contentLoader.GetAncestors(currentPage)
                                   .Reverse()
                                   .Cast<PageData>()
                                   .Filter(new FilterAccess(AccessLevel.Read))
                                   .Filter(new FilterPublished())
                                   .Filter(new FilterTemplate());

        var urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();

        var items = parents.Select(parent => new BreadcrumbItemViewModel
        {
            Title = parent.PageName,
            Url = urlResolver.GetUrl(parent.ContentLink)
        }).ToList();

        return items;
    }
}

Under Views / Shared, create a new partial view called _Breadcrumbs

@model IPageViewModel<SitePageData>
@if (Model.BreadcrumbItems != null)
{
    foreach (var item in Model.BreadcrumbItems)
    {
        <a href="@item.Url">@item.Title</a> @:/
    }
    <span>@Model.CurrentPage.Name</span>
}

And now you can render breadcrumbs in your layout / views like this:

@{ Html.RenderPartial("_Breadcrumbs"); }

Hope this helps!

Thanks Dejan Caric

Hi,

Your view model is Home, and _Breadcrumbs.cshtml expects IPageViewModel<SitePageData>

In Layout, you need to define a model like this:

@model IPageViewModel<SitePageData>

I don't know how your Home controller looks like, it should be something like this:

public class HomeController : PageController<Home>
{
    public ActionResult Index(Home currentPage)
    {
        var viewModel = new PageViewModel<Home>(currentPage);
	...

        return View(viewModel);
    }
}

View for Home page should be like this:

@model IPageViewModel<Home>
...

And that's it.

Of course, you don't have to use IPageViewModel.
That is just one way of solving things.

You can use Helpers like in Alloy, or extract the logic in some application service and call it for each view model:

viewModel.Breadcrumbs = _navigationService.GetBreadcrumbs(currentPage)

Hi Dejan Caric ,

I don't know why but evertime i am including this @model IPageViewModel<SitePageData> at the top of page.

I am always getting the same error.  The model item passed into the dictionary is of type 'Castle.Proxies.HomeProxy', but this dictionary requires a model item of type 'EpiServerDemo.Models.ViewModels.IPageViewModel`1[EpiServerDemo.Models.Pages.SitePageData]'.This ia causing a problem for me.

My home view is actually using the layout file.

Here is my Home view 

@model EpiServerDemo.Models.Pages.Home
@using EPiServer.Core
@{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/Layout.cshtml";
}

<img class="logoPadding visible-lg visible-md" src="@Url.ContentUrl(@Model.PageImage)" alt="Genteq">

<div>
@Html.PropertyFor(m => m.HomeSection)
</div>
<div>
@Html.PropertyFor(m => m.LatestNewsSection)
</div>

Here is my home controller 

public class HomeController : PageController<Home>
{
public ActionResult Index(Home currentPage)
{
/* Implementation of action. You can create your own view model class that you pass to the view or
* you can pass the page type for simpler templates */
var model = new Home
{
MainBody=currentPage.MainBody
};
return PartialView(currentPage);
}
}

and Here is my home model

[ContentType(DisplayName = "Home", GUID = "6c285875-1edc-4426-818f-13029f0b8afe", Description = "")]
public class Home : PageData
{
public virtual XhtmlString MainBody { get; set; }
public virtual ContentArea LatestNewsSection { get; set; }
public virtual ContentArea HomeSection { get; set; }
public virtual Url PageImage { get; set; }
/*
[CultureSpecific]
[Display(
Name = "Main body",
Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual XhtmlString MainBody { get; set; }
*/
}.

I probably have to go for some other alternative if the problem persists.

Your Home page type implements PageData, not SitePageData.

If you want to keep it that way, then you should change the model from:

@model IPageViewModel<SitePageData>

to

@model IPageViewModel<PageData>

in both Layout.cshtml and Breadcrumbs.cshtml

Also, in index action, you're returning wrong model

public class HomeController : PageController<Home>
{
    public ActionResult Index(Home currentPage)
    {
        var model = new Home
        {
            MainBody=currentPage.MainBody
        };
        return PartialView(currentPage);
    }
}

should be changed to:

public class HomeController : PageController<Home>
{
    public ActionResult Index(Home currentPage)
    {
        var model = new PageViewModel<Home>(currentPage);
        return View(model);
    }
}

And then in index view, you should have something like this:

@model IPageViewModel<Home>
@using EPiServer.Core
@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/Layout.cshtml";
}
<img class="logoPadding visible-lg visible-md" src="@Url.ContentUrl(@Model.CurrentPage.PageImage)" alt="Genteq"><div>
@Html.PropertyFor(m => m.CurrentPage.HomeSection)
</div> 
<div>
@Html.PropertyFor(m => m.CurrentPage.LatestNewsSection)
</div>

Hope this helps!

Thanks Dejan Caric , I have set up the breadcrumb properly now.