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.

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

How to use Telerik Report in asp.net MVC 3 page

I made a small video to illustrate how to use Telerik report web viewer in a asp.net MVC 3 page

You can find the sources here

Enjoy

My first jQuery plugin

Version francaise

jQuery.UnlimitedScroll.js is a jQuery plugin which:

• Creates a list item from an Ajax call
• Add lines to the end whenever the scroll reaches the end of the page
• Add a timer which inserts rows top of the list if new data is detected

demo :