Create an asp.net mvc3 mobile app with jQuery Mobile

A 7 minutes video to show how to create an asp.net mvc3 mobile app with jQuery Mobile from the scratch

Complete sources is here

Links :
Using 51Degrees.Mobi Foundation for accurate mobile browser detection on ASP.NET MVC 3 by  Steve Sanderson
A Better ASP.NET MVC Mobile Device Capabilities ViewEngine by Scott Hanselan

Truc pour débugger des pages "Mobile" et ASP.NET MVC 3

Pour manager mes pages Mobile, je me suis inspiré de l'excellent article de Scott Hanselmann "A Better ASP.NET MVC Mobile Device Capabilities ViewEngine".
Mais quand vous voulez inspecter l'HTML ou tracer du javascript, les émulateurs ne sont pas très pratiques.
Je préfère utiliser le couple Firefox/FireBug.
Pour ce faire j'ai créer un faux moteur pour mobile pour pouvoir les utiliser sur des pages mobiles

Premièrement, j'ai ajouté mon faux moteur mobile dans CustomMobileViewEngine cs (sources complètes ici)

public static class MobileHelpers
{
    ...
    //Add firefox + firebug for help to debug
    public static void AddFireBug(this ViewEngineCollection ves) 
                  where T : IViewEngine, new()
    {
        ves.Add(new CustomMobileViewEngine(c =>
                c.UserAgentContains("firefox"), "Mobile",
                new T()));
    }
}

Deuxièmement dans  "Global.asax.cs" (Sources complètes ici) , je l'ai ajouté à ma fabrique de moteur

protected void Application_Start()
{
  AjaxHelper.GlobalizationScriptPath =
  "http://ajax.microsoft.com/ajax/4.0/1/globalization/";
  AreaRegistration.RegisterAllAreas();
  RegisterGlobalFilters(GlobalFilters.Filters);
  RegisterRoutes(RouteTable.Routes);

  // Add the auto mobile detection & redirection
  ViewEngines.Engines.Clear();
  ViewEngines.Engines.AddIPhone<RazorViewEngine>();
  ViewEngines.Engines.AddWindowsMobile<RazorViewEngine>();
  ViewEngines.Engines.AddGenericMobile<RazorViewEngine>();
#if DEBUG
  // Just use it for debug JS in firebug & inspect HTML
  ViewEngines.Engines.AddFireBug<RazorViewEngine>();
#endif
  // Std engine
  ViewEngines.Engines.Add(new RazorViewEngine());} 

Je pense qu'il est tout à fait possible de faire la même chose pour IE et l'option F12

Debug tip for ASP.NET MVC 3 in mobile context

For manage Mobile page, I'm inspired from this excellent post "A Better ASP.NET MVC Mobile Device Capabilities ViewEngine" by Scott Hanselmann
But, when I want inspect some html parts or if I want trace a javascript behavior, I want and I prefer use Firefox and FireBug.
So, I create a fake mobile engine which use Firefoxe+firebug

First, I have added my new engine in globlal.asax.cs 
In "Global.asax.cs" (full source here)

protected void Application_Start()
{
  AjaxHelper.GlobalizationScriptPath =
  "http://ajax.microsoft.com/ajax/4.0/1/globalization/";
  AreaRegistration.RegisterAllAreas();
  RegisterGlobalFilters(GlobalFilters.Filters);
  RegisterRoutes(RouteTable.Routes);

  // Add the auto mobile detection & redirection
  ViewEngines.Engines.Clear();
  ViewEngines.Engines.AddIPhone<RazorViewEngine>();
  ViewEngines.Engines.AddWindowsMobile<RazorViewEngine>();
  ViewEngines.Engines.AddGenericMobile<RazorViewEngine>();
#if DEBUG
// Just use it for debug JS in firebug & inspect HTML
  ViewEngines.Engines.AddFireBug<RazorViewEngine>();
#endif
  // Std engine
  ViewEngines.Engines.Add(new RazorViewEngine());} 

Second, I had in my custom mobile engine my new "Firefox+firebug" fake mobile engine

in CustomMobileViewEngine cs (full source here)

public static class MobileHelpers
{
    ...
    //Add firefox + firebug for help to debug
    public static void AddFireBug(this ViewEngineCollection ves) 
                  where T : IViewEngine, new()
    {
        ves.Add(new CustomMobileViewEngine(c =>
                c.UserAgentContains("firefox"), "Mobile",
                new T()));
    }
} 

You could do the same thing with "F12" on IE if you are used it.