Quick Start Series--mvc--07 combined with HTML5 mobile development

Now that the mobile Internet is prevalent, cross-platform and compatible with different devices is becoming more and more popular, many companies are HTML5 their past non-HTML5 website applications into HTML5 applications, so that a set of code can be compatible with different physical terminal devices and browsers, Greatly improves the maintainability and scalability of the system. At the same time, HTML5 offers a number of new features, such as new architectural elements, Web Storage technology in place of cookies, websocket, and so on, which makes it easier for Web applications to adapt to new business environments and technical updates.

The website module of this system is used. NET technology Stack, this framework is an open-source framework for Microsoft, and related source code can be found on the codeplex.com website. After more than 7 years of development, the technology framework has been developed to 5.1, adding new features including mobile client templates, Webapi templates,OAuth authentication, and other features to facilitate the development of current Internet-themed projects.

In the actual project, the two main problems are: The actual users of the terminal equipment manufacturers, models, etc. may be changeable, how to show the appropriate style on different web terminals; ASP. NET MVC defaults to two view engines for WebForm and razor. However, they are not able to support the rendering of HTML5 pages, and how to extend the view engine to support rendering of HTML5 pages. The actual choice of technology solution is to implement a responsive CSS3 design with media queries and other techniques, extending the ASP. NET MVC framework with a custom static HTML5 view engine. Next, the implementation of the two solutions in the project is described in detail separately.

First, the introduction of a responsive Web page layout, which was first proposed by Ethan Marcotte in May 2010, was designed to enable a website to be compatible with multiple terminals-rather than developing a specific version for each terminal, which could be said to be a solution to the mobile Internet-related pain points. In fact, many of the large Web sites currently in operation are still maintaining multiple sets of website programs, and some use different domain names to serve different terminals. At the same time often on the mobile Web page of the business functions have been certain limitations, although also can provide a good user experience, but this is not the most reasonable solution, as far as possible to unify the user interface is very necessary. The responsive page layout consists of the following steps, in particular implementations.

The first step is to add a META element named viewport to the head section of the HTML page, viewport represents a virtual window that sets the size of the screen to fit the mobile device, as shown in the code below.

View Code

The Content property is "Width=device-width", which indicates that the width is the current device width; "intial-scale=1" means the initial zoom multiplier is 1, and "user-scalable=0" means that user manual scaling is not supported. At the same time add css3-mediaqueries.js for compatibility with old browsers such as IE6.

The second step is to use the Media queries module to import different CSS files based on the visual screen size of the different devices. The application of the module needs to modify two parts of the content, part of the HTML file to add 3 different conditions of the CSS file, and the other part of the CSS file using the specified form of the original content wrapped up. The code is shown below.

View Code

In the HTML file, "screen and (min-width:900px)" In the Media property indicates that the medium type is the display, while the minimum width of the screen is 900 pixels, and the only keyword allows a device that does not support media queries to ignore the style file. The path of the CSS file referenced in the href attribute after the current condition. Typically, a screen with a visible width of less than 480 pixels is a phone, a tablet between 480 pixels and 900 pixels, and a desktop computer that is larger than 900 pixels. In a CSS file, by adding a @media segment to the Media property in the page, the block contains content similar to that of a typical traditional web site, and the layout of the style is adjusted in some detail for different devices by inheritance.

The final step, mainly to deal with the front-end development of some of the details, including the use of relative width, relative font size, flow layout, adaptive images and other content, and traditional page development similar, this does not unfold. As a result, you can see that the same content is rendered differently on different devices, with the following application of the Responsive page layout technique.

Next, we'll show you how to extend the custom view engine in the ASP. Framework to seamlessly interface with HTML5 technology. In addition to some of the new features that support mobile Internet, the high performance and scalability of the ASP, which is the main component of Web front-end, has also played a significant role. Relative to the heavyweight WebForm framework, the framework is very lightweight, resulting in a significant reduction in the resources consumed by page rendering and preserving the support of modules such as authentication, security, and local caching. In addition, the framework provides a very strong extensibility, whether it is to modify the framework itself, or in existing projects to increase or decrease the business module, is very convenient. This is similar to the Java faction's EE technology, but at the same time it has high stability and high development efficiency. For example, you can customize URL routing URLs and improve search engine rankings, custom data binding supports serialization and deserialization of different data formats, custom view engines to handle different business scenarios, and so on. Next, you'll learn how to implement a custom HTML5 view engine that includes the following steps.

The first step is to create a custom HTML5 view. It is to read the HTML5 file and the basis of rendering, need to implement the System.Web.Mvc.IView interface, and implement the Render method in the interface, the method mainly through the flow of the way to read the specified HTML5 file and render to the page, this part of the content is relatively simple, simplified code as shown below.

View Code

The second step is to create a custom cache. Due to the static content in Html5fileview, it is natural to build the appropriate cache to improve performance. Create the cache Key object of the page Html5viewcachekey, implement the GetHashCode method, through a simple hash combination of the controller and the view name to wait until the cache content key, and implement the Equals method for comparison, The simplified code is shown below.

View Code

The third step is to create the view engine html5viewengine. The class implements the Iviewengine interface, and the dictionary class Viewengineresults is used in conjunction with the cache class built in the second step to cache the rendered view. method Findview First resolves the routing information to obtain the name of the controller, then determines whether the request supports caching, and if it does not support caching, the view is obtained directly through the Internalfindview method. Conversely, to determine whether the request view is in the local cache, if there is a direct return, if it does not exist then call the method gets and caches, write cache attention to lock. In the Internalfindview method, the mapping of the URL information to the file is finished by finding the corresponding file HTML5 in the specified path with the idea of convention-oriented programming.

View Code

As a final step, add the View-Custom view engine to the Application_Start method of the Global.asax file to complete the registration of the engine. Also note that the priority of the engine needs to be set to the highest, allowing the system to use the engine to respond to requests on the view.

View Code

Through the above steps, we basically integrate the ASP. NET MVC Framework, HTML5 Technology, mobile Internet development technology organically.

The series catalogue is as follows, thank you for your reading.

Quick Start Series--MVC--01 Overview

QuickStart Series--MVC--02 Routing

QuickStart Series--MVC--03 controllers and IOC applications

Quick Start Series--MVC--04 model

Quick Start Series--mvc--05 behavior

Quick Start Series--mvc--06 view

Quick Start Series--mvc--07 combined with HTML5 mobile development

TIP: This article is mainly referred to the following bibliography because it is a learning need.

[1] Jing Jinnan. The ASP. NET MVC4 framework revealed [M]. Shanghai: Electronic industry Press, 2012. 419-421

[2] Tong Chun Open. HTML5 Mobile Web Development Guide [M]. Shanghai: Electronic industry Press, 2012. 52-54

Quick Start Series--mvc--07 combined with HTML5 mobile development