Getting Started with ASP.NET MVC 4 Mobile Development and Jquery

   —   

In this previous article we looked at jQuery Mobile and how it can be used to build mobile applications. Of course there is more to the story. Model-View-Controller (MVC) is probably one of the most quoted patterns in the web programming world in recent years. I am sure that anyone working in anything related to web application development has heard or read the acronym hundreds of times. In this post we will take a look at the architectural patterns for MVC and how ASP.NET MVC 4 combines the power of MVC and jQuery Mobile.

MVC 101

The Model-View-Controller architectural pattern divides the application into three main components, each one in charge of different aspects.

Name

What is it?

Description

Model

Handles data and business logic

A Model represents the underlying logical structure of data in a software application and the high level class associated with it. The object model does not contain any information about the user interface. The model gives the controller a data representation of whatever the user requested. The data model will be the same no matter how we may to present it to the user, thats why we can choose any available view to render it. Typically, the model is the most important part of application logic

View

Present data to the user using any supported format and layout

A View is a collection of classes representing the elements in the user interface. Essentially, the View provides different ways to present the data received from the model.

Controller

Receives user requests and calls appropriate resources to carry them out.

A Controller represents the classes connecting the model and the view and is used to communicate between classes. The Controller manages requests. These are received as HTTP Get or Post requests then user clicks a GUI element to perform actions. Its main function is to call and coordinate the necessary resources and objects needed to perform the user action.

Wipedia provides a nice graphic that I think helps to provide additional context:

Creating an MVC Mobile Web Project with jQuery Mobile

First, if you are running Visual Studio 2010 you will want to visit the ASP.NET MVC 4 Web Site (http://www.asp.net/mvc/mvc4) to download and install the MVC 4 for Visual Studio 2010. If you are running Visual Studio 2012 it should already be included. Once the installation complete, lets create a new application using the following steps.

1. In Visual Studio 2010 select File, then click New Project as shown in the following screenshot.

2. In the New project dialog in the Installed Templates list select Web, then select the ASP.NET MVC 4 Web Application and then click Ok as shown in the following screenshot.

3. In the New ASP.NET MVC 4 Project dialog in the Select a template window select Mobile application, in the View Engine dropdown select Razor and then select Ok as shown in the following screenshot.


Using Razor with Kentico CMS 7

If you are looking for additional information on using Razor with Kentico CMS 7, take a look at Using MVC Razor with Kentico CMS 7.

Now that the project is created lets take a look at the Solution explorer to understand the project structure as shown in the following screenshot.

With the project started we can see it as shown in the following screenshot.

Conclusion

As we have seen jQuery Mobile is a light and elegant library that takes full advantage of HTML 5 and CSS so that we can have small and more maintainable code base. The combination of MVC 4 and jQuery offers a fantastic start for building your application.

Share this article on   LinkedIn

Thomas Robbins

I spend my time working with partners and customers extending their marketing and technology to the fullest.

Comments

andy-pw commented on

Hi Thom, yes I went though everything I could find on MVC with Kentico. I had a good email exchange with one of your support guys too. It seems we cannot do what we want so we'll have to make some other decisions re the Architecture. In any case we can stick with the aspx model in the short term. I had my own MVC template engine similar to Razor a few years before that came out so I may see what I can come up with calling into the various engines directly. If I come up with omething elegant, I'll let the community know.

Thom Robbins commented on

Thanks for the comments. Not that it answers your entire question but have you taken a look at Martin's blog post on Razor - http://devnet.kentico.com/Blogs/Martin-Hejtmanek/October-2012/Using-MVC-Razor-With-Kentico-CMS-7.aspx?

andy-pw commented on

I've only just started with Kentico (3 days now) and we'd like to rearchitect our applications to use MVC however despite comments on various posts going back to pre v6.0 about rendering content from Kentico into razor views (cshtml) being possible by v7, this still seems to not be possible in v7.

What we don't want to do is have to recreate html outside of the CMS which I see others are doing.

From what I can see I'd need to use aspx for my views in order to use the CMS controls to get at the content. My intial hopes were that I could stick an MVC app in front of Kentico and use the API to pull the content but this was not possible either, the goal being to just pass through processing of any urls I did not want to handle essentially allowing the MVC application to control the entry point into the application and for the static content to be handled by Kentico in it's entirety. It seems to me this model should be quite easy to implement for Kentico.

Then I looked at using MVC controllers but your examples merely pull the data from page components such as the very simple news example and uses separate html to render them. This also means I would need to duplicate the master page or call the MVC content using Ajax and render into the master page. Your example doesn't even address the limitations of the example dropping all of the login and header functionality from the master page.

Am I missing something? Because from what I can see, even with v7, MVC is almost useless if you cannot duplicate HTML content outside of the CMS due to business requirements.

If I could render into views then I would at least be able to create Controllers that bind at runtime and use them inside another MVC project that allows us to do all of our TDD and Unit testing.

Any comments on when the talked about (for a while) support would be available would be greatly appreciated. From what I see in Kentico, I really like the ease with which I can build the sites, it just doesn't seem to meet the goals of being useable with MVC and pretty much forces us to stay with the aspx model.

TIA

Gareth Sexton commented on

MVC 4 is Latest Version of asp.net platform.and now a days its useful everywhere.fore mobile development its features is very useful.