ASP.net MVC 3 - Web and Mobile Development
Currently I have developed an asp.net 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:
http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application
http://www.hanselman.com/blog/ABetterASPNETMVCMobileDeviceCapabilitiesViewEngine.aspx
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
I would recommend taking a look at this blog post (if you don't want / cannot use MVC 4): http://brockallen.com/2012/05/24/mobile-support-in-mvc-3/ .
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 &&
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 after that you just add [Mobile]
to all controllers, which also have a mobile view:
[Mobile]
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.
source to share
I suggest you take a look at the NerdDinner project - http://nerddinner.codeplex.com/ - It showcases many of the capabilities (desktop browser / mobile browser) you need.
source to share
You will find a small tutorial here showing how to use asp.net mvc 4 mobile functionality in 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 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()
{
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 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.
Greetings.
source to share