Introduction
When creating a website, developers find it challenging to implement a design that works on multiple devices, this included desktops, tablets and mobile devices. EPiServer 7 includes a new feature known as Display Channels. Display Channels allow us to control the rendering of the web pages depending on whether the request is from a mobile device or a standard device.
When working with display channels developers have two options:
Have multiple templates (WebForm, UserControl, View or partial view) for mobile and standard devices and render the template based on the type of device from which the request comes from.
Have a single template and when rendering this template check which channel is currently active and based on that control the output of the page.
To implement the display channels
Display Channels work with both MVC and WebForms.
Webforms: To implement display channels in WebForms you need to create a class that inherits from EPiServer.Web.DisplayChannel. This class contains a method called "IsActive" that can be overridden. This method is where we add the logic to check whether this particular channel is to be considered as active depending on the request.
Following is an example showing simple DisplayChannel, active for mobile devices
public class MobileDisplayChannel : DisplayChannel
{
public override boolIsActive(HttpContextBase context)
{
returncontext.Request.Browser.IsMobileDevice;
}
public override string ChannelName
{
get { return RenderingTags.Mobile; }
}
}
If we have multiple templates then we need to create a base class that inherits from "BlockData" and give it a "ContentType" Attribute. Then for each individual template inherit from the"BlockControlBase" which accepts an object of "BlockData" class and set the "TemplateDescriptor" Attribute. When setting this attribute we need to provide tags to identify which template it represents.
Following shows an example of two different templates of the same type
[ContentType]
public class MyBlock : BlockData {}
[TemplateDescriptor(Default=true)]
public partial class MyBlockControl : BlockControlBase<MyBlock>
{ }
[TemplateDescriptor(Tags = new string[] { RenderingTags.Mobile })]
public partial class MyBlockMobileControl : BlockControlBase<MyBlock>
{ }
MVC:IDisplayMode: To implement Display Channels in MVC we first need to register an instance of System.Web.WebPages.IDisplayMode with EPiServer.Web.DisplayChannelService. After registering, then we will be able to preview the channel even if the request does not match the condition to set it as active.
DisplayChannelService: A class named EPiServer. Web DisplayChannelService gives us all the channels that are active for a request. The service can be retrieved either from EPiServer.ServiceLocation.ServiceLocator. Current or from EPiServer.ServiceLocation.ServiceLocationHelper.
To preview the content
The editor can preview the site from several other active channels. Therefore, when an editor selects to preview the site for a specific channel, then all requests get to IsActive on the DisplayChannel andIDisplayMod. The one that is selected "fakely" returns true to the request.
To add a new device for viewing the right resolution
The UI has a feature for changing the size of the preview to view port. It gives the editor to get a quick view of the page. The Alloy Templates are devices set up to view.
Although the approach does not look exactly same in the app, it gives the editor an approximate idea that how the page will look like in a different screen.
Nikunj Bhanushali is associated with Cogzie as Sales & Operations head and who loves sharing information regarding HTML5, webframework development, asp.net and UI framework. Get in touch with him for Episerver 7 CMS Development.
|
|
| By Nikunj Bhanushali On 26 May, 15 Viewed: 1,088 |
To begin my article on how to create one model for multiple templates, I might start on with describing to you the page template. A template is for generating page outputs of a particular type, sometimes in aspx type of file. The page templates in EPiServer CMS are created using web forms or... By Nikunj Bhanushali On 03 Sep 2015 Viewed: 771
In MVC controls there are different type of action result we use as a return type from a controller action method in which ViewResult, ActionResult and JsonResult are commonly used. In this article we will learn what are the available action results and which one we need to use in which... By Ali Adravi On 19 Jul 2013 Viewed: 3,777
Action filter in MVC is from very first version. Sometimes we want to perform logic before or after calling the action method, to support this MVC provides action filters. Action filters are used as attributes. Filter can be applied on action method or directly to the controller. Suppose we want... By Hamden On 13 Jul 2013 Viewed: 1,425
Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or... By Hamden On 30 Jun 2013 Viewed: 3,738
In MVC, autocomplete with jquery is the best way to pull data from database and render according to our requirements, so in this article we will use jquery to show the auto complete text box without any ajax controls. We need a method to get the data from database, a controller method to handle the... By Ali Adravi On 29 Jun 2013 Viewed: 6,997