MVC 4 Display Modes

12 June 2013

What are MVC 4 Display Modes?

This is a new feature in MVC 4 that allows an application to select a view depending on the requesting client browser. Primarily this can be used to differentiate between desktop and mobile browsers (and other platforms), sending the appropriate view to each of these mediums. The view sent back to the browser is conditional based on the requesting browsers user-agent setting. You could (if you wanted) send a completely different layout for Internet Explorer browsers. The URL would still be the same as your main site, just the content changes.

This all sounds responsive to me!

Well, yes. It’s a response based on the client platform. Responsive Design, which we have extensive experience in at Metadigital, adjusts the display based on the screen dimensions and more importantly using the same 'view' or HTML content across all platforms. There are frameworks available that help with all this, such as Bootstrap, Foundation and Gumby which apply CSS standards and grid layouts for example. The key here is CSS, as Responsive Design uses CSS style sheets to create its dynamic and fluid layouts.

So back to MVC 4 Display Modes

Do we need Display Modes if we already have frameworks and communities out there that allow us to build Responsive Websites? Well it all depends on what you are trying to build. For example, if you know that a large percentage of your business customer’s access your services via iPhone's then you can tailor the content that is sent to iPhone's using Display Modes very easily.

In MVC 4 a traditional View for your homepage might be a file called Home.cshtml which is rendered to all requesting client browsers. To have a separate view for mobiles you would create another view called Home.mobile.cshtml. When the application detects that the request has come from a mobile user-agent, the Home.mobile.cshtml view is returned.

You can target iPhones specifically by adding a custom rule in the Applicaton_Start method of Global.aspx.cs like below and creating a view called Home.iPhone.cshtml.

What about a single code-base?

Traditional Responsive Design relies on a single code-base being served to all devices. This in itself can introduce its own problems. Using Display Modes does mean you have a separate client view of your site but you can still ‘plug in’ to your core business rules and database layer and reuse these functions.

Optimisation techniques can be utilised in Display Modes to target a large mobile audience to prevent all your main sites code being downloaded by your device.

There are pros and cons to Responsive Design and Display Modes but it all comes down to what you will be building and the target audience and devices.

By: Kulvir Dhami



If you'd like an informal chat about how Metadigital can help with your digital project please get in touch.