Watch the Live Coding Video

Create a partial view called _PrevNext

@inherits UmbracoViewPage

@{
IPublishedContent parent = Umbraco.AssignedContentItem.Parent;
IEnumerable<IPublishedContent> children = parent.Children;
List<int> childrenIds = children.Select(x => x.Id).ToList();
int currentIndex = childrenIds.IndexOf(Umbraco.AssignedContentItem.Id);

IPublishedContent prev = null;
IPublishedContent next = null;

if (currentIndex > 0)
{
prev = children.ElementAt(currentIndex - 1);
}

if (currentIndex < (children.Count() - 1))
{
next = children.ElementAt(currentIndex + 1);
}
}

<div class="row">
<div class="col-xs-6">
@if (prev != null)
{
<a class="prevnext prev" title="@prev.Name" href="@prev.Url"><i class="fa fa-arrow-left"></i> Prev</a>
}
</div>
<div class="col-xs-6">
@if (next != null)
{
<a class="prevnext next" title="@next.Name" href="@next.Url">Next <i class="fa fa-arrow-right"></i></a>
}
</div>
</div>

To call it from a template use this

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

Here are the style rules I created

.prevnext {
display: block;
background: red;
color: #fff;
min-width: 100px;
text-align: center;
padding: 15px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px 2px #4F4F4F;
box-shadow: 2px 2px 20px 2px #4F4F4F;
}

.prevnext.prev {
float:left;
margin-left: 20px;
}

.prevnext.next {
float:right;
margin-right: 20px;
}

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Paul Seal

A .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Web: codeshare.co.uk

Comments

Share Top