Applying MVC to mobile projects

We will use Sammy Ageil 's Mobile Ready HTML 5 MVC.NET template in order to get picture how MVC can be applied to mobile project. Template creates a mobile ready MVC 3.0 project using the Razor's view engine and jQuery mobile.

Figure 1.png

First, you need to install Mobile Ready HTML 5 MVC.NET with package manager console or via extension manager or download package to your disk and open it from your desktop. You create new ASP.NET web project and choose Mobile Ready HTML 5 MVC.NET-template. You also need to have ASP.NET MVC 3 framework installed at your Visual Studio before you can run your template.

Figure 2.jpg

From the generated project structure you will get basic understanding of how MVC model is constructed at ASP.NET at the classical MVC manner. First, at the model folder applications business logic is taking place, in our example Account model, written in C#. Here we have app's basic logic consisting of three classes: ChangePasswordModel, LogOnModel and Register Model + their getters and setters. This is where we are feeding our app with relevant data from the data storage, in this case model is creating for us basic login functionality of modern web page and application.

Models.png

At the controller folder, your data from the model is directed into selected Views according the configuration. This is first possible place to start constructing switcher logic which directs your data into and between different UI views and frameworks. In the ASP.NET MVC framework, controllers are .NET classes that contain the logic to handle http requests. The controller class is also our link to the view system. Controllers are here to perform operation in the domain model, and selecting views to render to the user.

controllers.jpg

Next, you may want to take a look at the Scripts-folder where application's interaction building blocks are located. First, the default desktop template, that is adopted from HTML5 Reset http://html5reset.org/ with some modifications and additions. This is desktop view with all relevant modern web pages’ whistles and bells are generated all at once. Then, you will have access to most popular JavaScript tools in the free markets: JjQuery and JQuery Mobile +Modernizr. These little creatures are your helpers for DOM manipulation and browser engine use, also mobile specific features you will need at your cross-platform development are living at the Scripts-folder.

scripts.jpg

Finally, in order to do understand how different kind of devices are actually detected and switching between different UI views takes a place you need to go to View-folder. First, you have different folder for each of the main page of your application: Account and Home. Different mobile devices views are switched according to rules defined at MobileViewEngine.cs and Application Helper. Mobile Ready HTML 5 MVC.NET-template uses standard Razor engine view to trigger mobile specific JQuery templates according to user agent list written at the ApplicationHelper.cs file. Now this is the second option where you could start tuning your HTML 5 MVC.NET-template, way ahead to new cross-platform architecture either by 1) modifying ApplicationHelper.cs file or 2) implementing new detection rules by using e.g 51 degress mobi or WURFL devide detection techniques.

views.jpg

In the article, Pro ASP.NET MVC 3 Framework (Apress,2011) by Adam Freeman and Steven Sanderson has been used as source of explaining MVC model. Youtube demo of the Mobile Ready HTML 5 MVC.NET set up can be found here: http://www.youtube.com/watch?v=4k1LzJ7joi8

Last edited Jul 3, 2013 at 3:59 PM by pekollik, version 15

Comments

No comments yet.