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 :

My first jQuery Plugin

English version

jQuery.UnlimitedScroll.js est un plugin basé sur jQuery qui :

• Créé une liste d’élément à partir d’un appel Ajax
• Ajoute des lignes à la fin à chaque fois que le scroll arrive à la fin de la page
• Ajoute un Timer qui insère des lignes en début de liste s’il y a nouvelles données

Petite demo :

Back to the future

 The “client/server” is back !

Answering to the following questions, I realize there is just a little more than 10 years ago :

"Should we turn the page of the client-server?"

There was a question about the aggregation of "business process on servers and let the fat clients (WinForm/Win32 apps) which "heavily" manage the users behavior &interface.

10 years later, I think that, finally, we are back to good old  Heavy Client / server technologies.

I am currently working on web applications where clients are browsers and servers are "CloudServer Windows Azure" or internal corporate servers.

The technology that I am using for the client (ASP.NET MVC 3 + jQuery),  will give me a good real "fat" client, in the sense that I had explained in 2001, with so more possibilities and much easier development and deployment.

I dabbled in a bit of Silverlight + RIA , and there seems even stronger ...

Finally, for this small post, the loop is closed, a large parabola technology.///

Back to the future

le grand retour du client-serveur

Il y a un peu plus de 10 ans, je répondais à la question :

"Faut-il tourner définitivement la page du client-serveur ?"

Il y était question de défendre la centralisation des traitements "business" sur des serveurs et de laisser les clients lourds (application WinForm/Win32) gérer "lourdement" les comportements utilisateurs.

10 ans plus tard, je me dis que finalement, nous sommes revenus au bon vieux client(lourd)/serveur.

Je travaille actuellement sur des applications Web où les clients des navigateurs Internet et les serveurs sont, ou des "CloudServer Windows Azure" ou des serveurs d'entreprise.

Je trouve que la technologie que j'utilise pour le client (ASP.NET MVC 3 + jQuery) va me donner un bon vrai client lourd, dans le sens où je l'entendais en 2001, avec autant de possibilités (voir plus) et beaucoup de facilitées de développement et de déploiement.

J'ai tâté un peu de Silverlight+RIA, et là cela semble encore plus fort...

En résumé, pour ce petit post, que la boucle est bouclée, une grande parabole technologique.///

ASP.NET MVC & mobiles

During my last visit to Redmond, I was fortunate to have been received by Vishal Joshi (Senior Program Manager in the team "Web Platform & Tools").
As a VS end user and with my focus on the Web Application Mobile, Vishal was curious to know how I would consider the architecting and writing of my next application with the available Microsoft techniques.

Preamble

Developments for the mobile Web leverage some specifics issues:
• Weight control pages and transmitted data is important
• There are usually fewer functions (or they are easier/less sophisticated) in a mobile Web application from its Web equivalent
• Ergonomics of mobile Web applications is very different from conventional applications: they must be less complex, numerous interactions should be obvious and the results of actions must be visible and unambiguous
• Since there is a market in full expansion, our applications must also be easily and highly upgradable to accommodate all sorts of new devices. Manufacturers are offering us a bunch of varied & heterogeneous pads, not to mention the screens of our television turned into browser and innovative game consoles. An illustrative form of a motto which I liked from MS is 'three screens for one app".

« Device » definition

In this article, I will use the term "device" to refer to the different mobile platforms in a generic term.
These devices can be schematically and briefly described as follows:

We can extend this definition of "device" to browsers and their endless compatibility problems.

For example, I have recently met a client who still uses IE 4.7, I had the idea to address this problem by considering that IE 4.7 was a particular device with screens much simpler and with less features.

I found this system more elegant than the long lists of conditional comments “[if lt IE 6]..." directly in the web page.

I now consider the old browsers (and their 'problems') as individual devices. It's better for my codes and for my mind.

Development Focus

Vishal’s first question was: ASP.NET "classic" or MVC?

I replied without hesitation MVC, why? A better control of HTML, far fewer compatibility problems with browsers, And last but not least, a better mastering of pages weight, that’s an important criterion in the development of mobile Web applications.

MVC Style

Then he listed, on his whiteboard, few ways to consider the actual development in ASP.NET MVC in the perspective of implementing multi-devices (web, mobile web to phone and mobile web for pads...).

1.    An area for each "device"

• Advantages:

• Clearer, more readable

• Allows you to isolate the different devices components (especially at the JavaScript and CSS)

• Disadvantages:

• Require having as many controllers, models and views that devices, which can induce a lot of redundant code and, in case of many devices, some difficulties maintenance, especially when we would change some work process, and therefore, the bunch of models of each area.

2.    "Model" and "Controller" same but "Views" by various devices.

• Advantages:

• Only the views are suitable for devices, which simplify writing and maintaining only one controller and one model. This way is appropriate in addressing solutions to very similar devices (e.g. mobile phones) with very similar behavioral and data.

• Disadvantages:

• Not very appropriate for writing a complete solution: WEB + "mobile web". With The single controller/Single model, it becomes difficult to have a good code readability, but also to have good control of the weight of pages/data.

3.    One "Model View Controller" with conditional choice in the "controllers"

• Advantages:

• Efficient and fast when you have  to write code for less than 3 devices

• Disadvantages:

• The code can quickly become complicated, even illegible, though the number of devices increases

• It's difficult to code some complex behaviors

4.    Different "View" and "Controller" but based on a single "model"

• Advantages:

• Provides a good adaptation of the views and behaviors to devices

• Keeps a single model and therefore the uniqueness of objects "Business / Work" underlying the concept of model

• Disadvantages:

• The weight of the data to send to the devices is not well calibrated and the data are not necessarily appropriate

5.    Different "View-models" & "View" for each device:

• Advantages:

• Suitable finely models for each device (or each screen) and then, good control of the weight of data to send.

• Allows model "primary" legacy  code that gives a code more concise and thus more maintainable

• Disadvantages:

• More object “Model” to maintain and therefore more codes, and finally, increased risk of bugs.

To learn more about MVVM apply to MVC : Stephen Walther blog. 

An example : “NerdDinner Step 6”: ViewData and ViewModel

 

My choice

My first choice is the 5: "ViewModel/View"; it has the advantage of adapting a single model (in sense of business object) to multiple views (and therefore device) through the mechanism of "ViewModel". This is good for readability and maintainability of code, even if there are more objects than other.
This decoupling of the models and views allows good control of data sent to devices and, thus, the possibility of reducing the data weight. Remember, it is common not to have all data and features in a Web mobile application.
My second choice would be the 2: "Various views/devices"
This is the method I use currently, because I write mainly Web Mobile applications, and, therefore, my controllers & models are simpler than I have to write a Web and Web Mobile applications

Conclusion

As a conclusion, the different ways of proceeding described in this article are not the only options offered by ASP.NET MVC, the important thing is to find a simple and elegant solution to your problem.
Web applications, that we are currently writing, will be increasingly used on mobile phones, PDAs and tablets. We must start to write them with the right technologies, so that the user experience is as successful as possible regardless of the device.

Thanks

Thanks to Vishal for welcoming me and taking time to talk with me about the product he makes with his team and that I use.
I was very pleasantly surprised by the focus of these Microsoft teams for the feelings and perceptions of end users about their products.
Even if I'm MS Friendly, I try to be objective, and everything is not perfect at MS, but I really liked this closeness.

Thank to Philippe Limantour (Director, Cloud Computing & Innovation Center at Neos-SDI) for his help in English