MVC, mobile views, and RAZR
January 21, 2011 § 1 Comment
I thought that this whitepaper on making your MVC web application mobile friendly was a very good read. The only thing that struck me was the section on remembering the user’s preference regarding using the mobile presentation versus the standard presentation:
It’s often convenient to redirect mobile visitors to the mobile pages only on the first request in their browsing session (and not on every request in their session), because:
- You can then easily allow mobile visitors to access your desktop pages if they wish – just put a link on your master page that goes to “Desktop version”. The visitor won’t be redirected back to a mobile page, because it’s no longer the first request in their session.
- It avoids the risk of interfering with requests for any dynamic resources shared between desktop and mobile parts of your site (e.g., if you have a common Web Form that both desktop and mobile parts of your site display in an IFRAME, or certain Ajax handlers)
To do this, you can place your redirection logic in a Session_Start method. For example, add the following method to your Global.asax.cs file…
I frequently browse the web on my Android phone – in fact, I probably browse the web more on my phone than I do on my computer. I don’t want my mobile/standard preference stored in the session. I want it stored in a persistent cookie so that I don’t have to reset my preference every time I visit your site. This isn’t even difficult – here is an excellent reference to using cookies with .NET.
The section regarding the different methodologies for presenting mobile specific pages talks about using different Razor views for mobile/standard:
Since the Model-View-Controller pattern decouples application logic (in controllers) from presentation logic (in views), you can choose from any of the following approaches to handling mobile support in server-side code:
- Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option works best if you’re displaying identical data on all devices, but simply want to supply different CSS stylesheets or change a few top-level HTML elements for mobiles.
- Use the same controllers for both desktop and mobile browsers, but render different views depending on the device type. This option works best if you’re displaying roughly the same data and providing the same workflows for end users, but want to render very different HTML markup to suit the device being used.
- Create separate areas for desktop and mobile browsers, implementing independent controllers and views for each.This option works best if you’re displaying very different screens, containing different information and leading the user through different workflows optimized for their device type. It may mean some repetition of code, but you can minimize that by factoring out common logic into an underlying layer or service.
If you want to take the first option and vary only the Razor layout per device type, it’s very easy…
The Razor views look very slick, and unfortunately, I haven’t had much time to play with them yet. Telerik recently posted a .NET Web Forms Views -> Razor converter on GitHub that looks like it would give you a good kickstart if you’re trying to switch over a project that you’ve already started.