Leading technology: Creating a view that is optimized for mobile devices in ASP.net MVC 4

If you delve into the common sense considerations of writing a mobile device site, there is an inherent contradiction. On the one hand, customers are strongly demanding (or willing to ask) to move first in their methods of writing applications and Web sites. On the other hand, the same people often praise CSS media queries and fluid layout. The paradox I've found is that often using CSS media queries and fluid layouts doesn't prioritize mobility before other content, it's not a move-first approach. In this article, I'll show you how to use server-side logic to render the best display for a given device, and introduce a new feature of ASP.net MVC 4, called display mode.

The problem is not with CSS media queries as a technique. The problem is not even the adaptive Web Design (RWD) as a support method for CSS media queries-though not the illuminating purpose of this technology. So how do you make using CSS media queries and fluid layouts A "move first" approach? The clue is found in the slogan used to promote this method: A basic code can serve multiple views. In this perspective, use CSS (a client-side technology) to switch between views, and use JavaScript to further adjust the view when CSS is not up to it.

In my opinion, the basic approach in this approach is to provide the same content for all devices, and only to adjust the page layout to fit the screen size. As a result, you may not be able to provide the best experience to your users. In my opinion, you should try to have only one basic code (the Common foundation of the Web API) in a reasonable situation, but be sure to focus on the specific use of each type of device you want to support. The word "mobile" has become so narrow that it has been replaced by many types of devices such as smartphones, tablets, laptops and smart TVs, not to mention wearable devices such as eyeglasses and smart watches.

About a year ago, I presented this column with a server-side approach to developing the ASP.net MVC Web site: To create a temporary view of each supported device ("Mobile site development: Tag" msdn.microsoft.com/magazine/jj133814). I was doing this in the context of ASP.net MVC 3. asp.net MVC 4 is fully qualified for this task, with the aforementioned display mode, which makes it easy to implement server-side logic that provides the best view and content for a given device. To be effective, this approach requires you to learn as much as possible about the capabilities of the requesting device. However, no additional content is detected on the client except for the basic information about the screen size and current orientation. Then, you need a server repository for device information.

Introduction of display mode in asp.net MVC 4

Before I begin to delve into the display mode, let me state in advance that this article (and the display mode technology itself) mainly involves generating a unique new site that dynamically binds the same URL to a different view. If you already have a Web site, it is entirely another topic to provide an affiliate site optimized for some (mobile) devices. You can still use this column as a guide to building a satellite web site, but using other tools is required to unify URLs with existing parent sites.

In ASP.net MVC 4, the display mode is a system feature that extends the traditional behavior of the view engine so that it can select the view file that is best suited to the requesting device. In the ASP.net MVC 3 article I mentioned earlier, I used a custom view engine for this. In this solution, I can only use the Razor view. By displaying the mode, the Controller method will still invoke, for example, a view named Index, and if the requested device is known to be a mobile device, the ASP.net MVC runtime will instead select a view file named Index.mobile.cshtml.

This is a good news, because it means that the site can still have only one basic code. Simply add additional CSHTML view files for each type of device that you want to support. To get started with the display mode, let's look at the code example in Figure 1 .

Figure 1: Standard list of supported display modes

          
 
The page in the code in Figure 1 shows a standard list of supported display modes. Figure 2 shows the output generated by the page.
 
See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/aspx/
 
 
Figure 2: Default list of display modes