WebApplications | MVC

MVC

ASP.NET MVC 4 works well with the Detector as different views can be used for different kinds of devices while maintaining the same logic in the controller. This guide details how to create views that will be used according to different device conditions. You should be familiar with MVC routing to make full use of this article; see this guide from ASP.NET a quick overview on MVC routing .

First install the Detector using Nuget. You will not need the mobile folder the Detector adds, or the redirect section in the 51Degrees.config file.They should be deleted.

You now need to create your views. Their name should include an identifier for their purpose before the extension, i.e: Index.android.cshtml.

Visual Studio project explorer

Your views should be something like this. Notice they are all in the same folder, so will have the same controller, and have the same name (Index), so will all have the same url. The above screen shot shows views created for Android, iPhone and generic mobile.

Important Note : 'HardwareModel' and 'PlatformName' properties used in this example will only work with Enterprise or Premium data files. For Lite data file please use the ' IsMobile ' property. For a full list of properties and data files they appear in please see the Property Dictionary page.

To set the conditions for which view is used some code needs to go into the Application_Start event. This event should already exist in global.asax. It is in this method that you'll need to register all the views you have and under what conditions and the priority they should be used in. For each view you will need DefaultDisplayMode:

									DisplayModeProvider.Instance.Modes.Insert(
										
										0
										
									, 
										
										new
										
									 DefaultDisplayMode("iphone")
{
    ContextCondition = Context => Context.Request.Browser["HardwareModel"] == "iPhone"
});

A DefaultDisplayMode features a name (iphone in this case) and a condition. The name is used to identify the view. You will also need to include the System.Web.WebPages namespace.

The full global.asax should something like this:

										
										using
										
										
										System.Web.Http
										
									;

										
										using
										
										
										System.Web.Mvc
										
									;

										
										using
										
										
										System.Web.Routing
										
									;

										
										using
										
										
										System.Web.WebPages
										
									;


										
										namespace
										
										
										_51DegreesMVCExample
										
									
{
    
										
										// Note: For instructions on enabling IIS6 or IIS7 classic mode, 
										
										
										// visit http://go.microsoft.com/?LinkId=9394801
										
										
										public
										
										
										class
										
										
										MvcApplication
										
									 : System.Web.HttpApplication
    {
        
										
										protected
										
										
										void
										
										
										Application_Start
										
									()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            DisplayModeProvider.Instance.Modes.Insert(
										
										0
										
									, 
										
										new
										
									 DefaultDisplayMode("iphone")
            {
                ContextCondition = Context => 
                                Context.Request.Browser["HardwareModel"] == "iPhone"
            });

            DisplayModeProvider.Instance.Modes.Insert(
										
										1
										
									, 
										
										new
										
									 DefaultDisplayMode("android")
            {
                ContextCondition = Context => 
                                Context.Request.Browser["PlatformName"] == "Android"
            });

            DisplayModeProvider.Instance.Modes.Insert(
										
										2
										
									, 
										
										new
										
									 DefaultDisplayMode("mobile")
            {
                ContextCondition = Context => 
                                Context.Request.Browser["IsMobile"] == "True"
            });

        }
    }
}

Note that the order the DisplayModes are given are important. They are processed in order until a match is found. Therefore is is safe to include a generic mobile mode as long as it is at the last DisplayMode given. Also note that the properties used here are for premium data.