In the previous recipe, you learned how to use a custom model to pass data to the view using RenderingModel. In this recipe, we will create carousel using controller rendering and view rendering.
We will first create a template to generate carousel slides:
Create a
Carousel Slidetemplate, as shown in the following image. Set the Source property of theImagefield so that a user can pick carousel images directly from the source media folder. Do the same for theLink Itemfield.
Create some carousel slide content items with appropriate field values.
We want to show some selected carousel slides on our
Homepage, so we will add the tree list type carousel slides field to theSite Roottemplate so that we can select multiple carousel slide items, as shown in the following image:
We will now create a
CustomItemclass to represent carousel slide properties in the same way as the previous recipe. In theSitecoreCookbookproject, create aCarouselSlideclass in theModelsfolder and inherit it from theCustomItemclass. AddTitle,Image, andUrlproperties to it:public class CarouselSlide: CustomItem { public CarouselSlide(Item item) : base(item) { } public string Title{ get { return InnerItem["Title"]; } } public HtmlString Image { get { return new HtmlString(FieldRenderer.Render(InnerItem, "Image")); } } public string Url { get { Item linkItem = Sitecore.Context.Database.GetItem(InnerItem["Link Item"]); if (linkItem != null) return LinkManager.GetItemUrl(linkItem); return ""; } } }Now we will create a
Controllerclass, which will create a list ofCarouselSlideobjects. In theSitecoreCookbookproject, create aNavigationControllercontroller in theControllersfolder. Create theActionResultorViewResultCarousel()method that will return a list of carousel items to the view:public class NavigationController : Controller { public ActionResult Carousel() { List<CarouselSlide> slides = new List<CarouselSlide>(); MultilistField multilistField = Sitecore.Context.Item.Fields["Carousel Slides"]; if (multilistField != null) { Item[] carouselItems = multilistField.GetItems(); foreach (Item item in carouselItems) { slides.Add(new CarouselSlide(item)); } } return PartialView(slides); } }Now we will register this controller and action method in Sitecore. Select the
/sitecore/layout/Renderings/Cookbookitem. Create aCarouselcontroller rendering and set the Controller and Controller Action fields, as shown in the following image:
Now we will create a view to render the carousel slides. In the
SitecoreCookbookproject, create aCarousel.cshtmlview file in the/Views/Navigationfolder:@model IEnumerable<SitecoreCookbook.Models.CarouselSlide> <div class="carousel-inner" role="listbox"> @foreach (var item in Model) { <div> <a href="@item.Url" title="@item["Title"]"> @item.Image </a> </div> } </div>In the
Main Layoutfile, place this rendering using the following code. Remember to update the item ID of this controller rendering in the code.@Html.Sitecore().Rendering("{62104CCC-D747-4671-BB3B-CFF041F42A5A}")Preview the content item; it will show carousel images on the page. Making the carousel work fully, as shown in the following image, you may need to change HTML in the view and append style sheets, which you can get from the code bundle provided with this book:
We can render item fields using the field helper, but there is no item field available to render item URL. So, we need some custom properties to items, and that is possible by implementing custom items. A custom item is an item that has special properties and functionality that match the functionality and semantics of the item that it is associated with. Here in step 4, we created the CarouselSlide class by inheriting from the CustomItem class and also created different custom properties such as Url, Title, and Image.
Here, we also used the HtmlString (or MvcHtmlString) return type to get image, unlike Title, which has the string type. It's because we want to render HTML without encoding it what view engine does for string.
In step 4, we used the FieldRenderer.Render(<item>, <fieldName>) method to render the HTML image tag. We can also use item.Fields[].Value or item["<field>"] to get field value, but it will return raw value of the image field as shown in the following code:
<image mediaid=\"{E0A48978-2D1A-4431-8FED-BEDE851B3FD6}\" />In step 5 and 6, we created the NavigationController class with the Carousel() action method and registered them in Sitecore. The Carousel() method prepares a list of CarouselSlide objects and pass it to the Carousel partial view, which we created in step 7.
In step 8, we placed the NavigationController rendering to the layout, so when it's invoked, it returns a ViewResult with list of CarouselSlide objects as a model and the partial view will get rendered accordingly.
If you have noticed, we registered the controller only and bound to the item and done nothing with the view. It's because, MVC finds the view itself from /Views/{Controller}/{Action}.cshtml.