MVC 3 - Web and Mobile Development

Currently I have developed an mvc 3 site, now I want to make a mobile version of the site. I have read about mobile jquery and how to detect mobile devices in mvc. But I was wondering how I would mix network / mobile network together ... Can I have new controllers and views for the mobile network? This would mean a lot of code duplication and high maintenance.

Good tutorials that cover this scenario would be great.

Many thanks.

Some good links:

Reading these links was interesting, they have good ideas for creating a mobile realm and new perspectives on mobile and controller customization. Also, when creating some custom mobile CSS styles, they can be referenced on a separate mobile home page.


source to share

3 answers

I would recommend taking a look at this blog post (if you don't want / cannot use MVC 4): .

There Brock Allen explains how to get a mobile / non-mobile feature working in MVC 3 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 &&
            // 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 after that you just add [Mobile]

to all controllers, which also have a mobile view:

public class HomeController : Controller
    public ActionResult Index()
        return View();


You can now have separate views for desktop and mobile:

  • Computer: Views/Home/Index.cshtml

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

And that's all you need. Now MVC will automatically show Index.Mobile.cshtml

for mobile devices and Index.cshtml

for computers.



I suggest you take a look at the NerdDinner project - - It showcases many of the capabilities (desktop browser / mobile browser) you need.



You will find a small tutorial here showing how to use mvc 4 mobile functionality in asp mvc 3 application:


I know this in French, but basically you have to add these 3 classes to your application and add this code to your global.asax file:

protected void Application_Start()

  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);



Once you do that, if you create a view named index.Mobile.cshtml (you must follow this naming convention), for example, it will show up instead of the original index.cshtml if you open the app with the iPhone.

Hope this helps you.




All Articles