ASP.net MVC 3 - Developing for web and mobile web

Question

I currently have developed an asp.net mvc 3 website, now i wish to make a mobile version of the site. I have read up about mobile jquery and how to detect mobile devices in mvc. But I was wondering more about how I would mix web/mobile web together... Would I have new controllers and views for the mobile web? This would mean lots of code duplication and high maintenance.

Any good tutorials which cover this scenario would be great.

Many Thanks.

Some good links:

http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application

http://www.hanselman.com/blog/ABetterASPNETMVCMobileDeviceCapabilitiesViewEngine.aspx

Reading through the above links was interesting, they have nice ideas of just creating a mobile area and having new views for the mobile and tweaking the controllers. Also creating some custom css styles for the mobile, these can then be referenced in a separate master page for the mobile.

Answer 1

I'd recommend taking a look at this blog post (if you don't want to/can't use MVC 4): http://brockallen.com/2012/05/24/mobile-support-in-mvc-3/.

There Brock Allen explaines how to get the mobile/non-mobile feature working in MVC 3 by using an Action Filter.

Basically you create the following class (assuming you are writing in C#):

public class MobileAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        // is the request a view and is the client device a mobile device
        var vr = filterContext.Result as ViewResult;
        if (vr != null &&
            filterContext.HttpContext.Request.Browser.IsMobileDevice)
        {
            // determine from the current view what the mobile view name would be
            var viewName = vr.ViewName;
            if (String.IsNullOrWhiteSpace(viewName)) viewName = (string)filterContext.RouteData.Values["action"];
            var fileExtension = Path.GetExtension(viewName);
            var mobileViewName = Path.ChangeExtension(viewName, "Mobile" + fileExtension);

            // ask MVC is we have that view
            var ver = ViewEngines.Engines.FindView(filterContext, mobileViewName, vr.MasterName);
            if (ver != null && ver.View != null)
            {
                ver.ViewEngine.ReleaseView(filterContext, ver.View);

                // we do, so tell MVC to use the mobile view instead
                vr.ViewName = mobileViewName;
            }
        }
    }
}

And afterwards you simply add [Mobile] to all the controllers that also have a mobile view:

[Mobile]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Now you can have seperate views for computers and mobile devices:

1. Computer: Views/Home/Index.cshtml

2. Mobile: Views/Home/Index.Mobile.cshtml

And that's all you have to do. Now MVC will automatically show the Index.Mobile.cshtml to mobile devices and Index.cshtml to computers.

Answer 2

Here you will find a small tutorial showing how to use asp.net mvc 4 mobile features in a asp mvc 3 application :

http://christopheargento.com/2012/01/14/vues-mobiles-en-asp-net-mvc-3-profitez-de-linnovation-majeure-de-mvc-4-sans-attendre/

I know it's in french but basically you have to add those 3 classes to your application and add this code in your global.asax file:

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();

  ViewEngines.Engines.Clear();
  ViewEngines.Engines.Add(new CustomViewEngine());

  DisplayMode iphoneMode = new DisplayMode("Iphone");

  iphoneMode.ContextCondition = o => o.Request.UserAgent.IndexOf("iphone",  StringComparison.OrdinalIgnoreCase) > 0;

  DisplayModes.Modes.Insert(0, iphoneMode);

  RegisterGlobalFilters(GlobalFilters.Filters);
  RegisterRoutes(RouteTable.Routes);
}

Once you do that, if you create a view named index.Mobile.cshtml (you have to follow this naming convention) for example, it will be displayed instead of the original index.cshtml if you open your application with an iPhone.

Hope this will help you.

Cheers.

Answer 3

I suggest that you have a look at the NerdDinner project - http://nerddinner.codeplex.com/ - It demonstrates many capabilities (desktop browser/mobile browser) that you need.