Separate ASP.NET MVC mobile views using the same controllers

Question

I am working on a new project using ASP.NET MVC 3 w / Razor and developing 2 different types of the same site, full version and mobile version. What are the best methods / approaches for using the same controllers, but different views based on a user agent are displayed? Should I handle this in controllers? It seems that it would be cumbersome, redundant, error prone to have instructions in each controller action that validate the user agent and then return a different view depending on their device.

Answer 1

Now this can be done using the built-in ASP.NET MVC function (from version 4 onwards) called " DisplayModes "

By default, ASP.NET MVC comes with two built-in display modes. There is a default display mode that displays your “standard” views, as has always been done, as well as a general “mobile” display mode.

This works by detecting whether the client device is a mobile browser or not (which is determined by sniffing the User-Agent line by the client device, therefore it is not 100% more reliable). If the device is defined as a mobile device, then the actual MVC view that is sent to the client is overridden, and the alternate view is processed and sent instead. If the mobile display mode is on, it is configured to view the view with the suffix .mobile.cshtml , not .cshtml (as shown in the screenshot below)

This allows you to develop completely different types that will be sent to the mobile device and non-mobile device without any changes in the logic of your controller, so you do not need to include any conditional logic in it.

If you require a more detailed degree of control over the exact presentation sent to the client device, all display mode functions are customizable and extensible. You can define your own display modes (usually executed when the application starts), which may be specific to a given browser, this device, or any arbitrary definition that you want. All are based on a user agent string coming from a client device.

Consider the following code snippet below, which shows the addition of 3 additional custom display modes for Windows Phone, iPhone, and Android in the application launch method:

 protected void Application_Start() { DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP") { ContextCondition = (context => context.GetOverriddenUserAgent(). IndexOf("Windows Phone OS",StringComparison.OrdinalIgnoreCase) >= 0) }); DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("iPhone") { ContextCondition = (context => context.GetOverriddenUserAgent(). IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) }); DisplayModeProvider.Instance.Modes.Insert(2, new DefaultDisplayMode("Android") { ContextCondition = (context => context.GetOverriddenUserAgent(). IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) }); } 

Each display mode is assigned an identifier and a line that corresponds to the user agent line to determine whether to use this display mode. If so, DisplayModeProvider will look for the view with the same string suffix. (i.e., for the iPhone display mode above, we expect to find the “iPhone” line anywhere in the user agent line, and if it exists, we use this display mode, which displays views with the suffix iphone.cshtml , not the .cshtml suffix .

You can learn more about this function here: http://www.asp.net/mvc/overview/older-versions/aspnet-mvc-4-mobile-features especially in the sections entitled "Overriding views, layouts and partial views" and Browser Views.