Creating carousel using view and controller renderings_Sitecore Cookbook for Developers-QQ阅读武侠男生网

上QQ阅读APP看书，第一时间看更新

Creating carousel using view and controller renderings

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.

How to do it…

We will first create a template to generate carousel slides:

Create a Carousel Slide template, as shown in the following image. Set the Source property of the Image field so that a user can pick carousel images directly from the source media folder. Do the same for the Link Item field.
Create some carousel slide content items with appropriate field values.
We want to show some selected carousel slides on our Home page, so we will add the tree list type carousel slides field to the Site Root template so that we can select multiple carousel slide items, as shown in the following image:

We will now create a CustomItem class to represent carousel slide properties in the same way as the previous recipe. In the SitecoreCookbook project, create a CarouselSlide class in the Models folder and inherit it from the CustomItem class. Add Title, Image, and Url properties 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 Controller class, which will create a list of CarouselSlide objects. In the SitecoreCookbook project, create a NavigationController controller in the Controllers folder. Create the ActionResult or ViewResult Carousel() 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/Cookbook item. Create a Carousel controller 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 SitecoreCookbook project, create a Carousel.cshtml view file in the /Views/Navigation folder:

@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 Layout file, 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:

How it works…

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.