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

Une astuce pour Asp.net MVC 3 avec jQuery Mobile et HTML 5

Si vous utilisez HtmlHelper dans Asp.net MVC 3, vous pourriez avoir quelques difficultés à définir des propriétés personnalisées.
Par exemple, en utilisant jQuery Mobile,et j'ai eu besoin d'initialiser «data-theme» ou «data-transition» sur un ActionLink
Si vous l'écrivez avec le séparateur '-' , vous obtenez une erreur de syntaxe. Les gars de Redmond nous ont mijotés une petite surprise, il faut remplacer le '-' par des '_'comme ceci :

@Html.ActionLink("My team", "UsersList", "Home", null,
 new { data_theme = "b", data_transition = "fade",
 data_icon = "star" })

et, automatiquement, les '_' sont remplacés par des '-'

<a data-icon="star" data-theme="b" data-transition="fade"
 href="/Home/UsersList">My team</a>

Je pense que cela marche aussi pour propriétés spécifiques à Html 5

A tip about dashes for Asp.net MVC 3 in jQuery Mobile and HTML 5 context

if you use HTMLhelper in Asp.net MVC 3, you could have some difficulties to set custom properties.
For example, I'm using jQuery Mobile, and I need to set 'data-theme' or 'data-transition' on an ActionLink.
If you write it with '-' separator, you have a syntax error. The Redmond guys have cooked a small surprise for us, you should replace the '-' by '_' like this

@Html.ActionLink("My team", "UsersList", "Home", null,
 new { data_theme = "b", data_transition = "fade",
 data_icon = "star" })

and automaticly, they replace '_' by '-' in Hmtl code

<a data-icon="star" data-theme="b" data-transition="fade"
 href="/Home/UsersList">My team</a>

I think we can do the same thing for HTML 5 properties