ASP.NET 4.5 Hosting :: How to Building ASP.NET MVC 4 with JQuery Mobile, HTML5 , CSS3 Media Queries in Visual Studio Developers Preview

Building ASP.NET MVC 4 application with JQuery Mobile, HTML5 , CSS3 Media Queries in Visual Studio Developers Preview

 

Developing MVC 4 applications with Visual Studio Developers Preview is quite jump-start for developers as it has inbuilt support for JQuery Mobile css & javascripts, nice intellisense for HTML 5 , CSS 3 media queries. MVC 4 developers preview was built keeping in mind the Mobile Web Developers who wants keen support of rich MVC in Mobile Web.

jquerymobile1Lets jump start to develop MVC 4 mobile application with JQuery Mobile, HTML5, CSS3 in Visual Studio developers preview.

createproject2Select your MVC 4 application domain either Internet/Intranet/Mobile Web application with default Razor or ASPX syntaxes. For my demo , selected Mobile Web application in VS Developer Preview.

mobileapp4Next, write some JQuery Mobile application code to check th UI view in SmartPhones while Model & Controller logic remains same & could change according to business requirements.
Database -> Entity Framework (EF) -> Model in MVC 4(Entities) (DAL)-> Controllers (Business Logic Layer)(BLL) -> View(s) -> Master(_Layout.cshtml) is the default development path in MVC 4 Web & mobile application.

  • Sample code for JQuery Mobile with HTML5 for MVC 4 in Visual Studio :

  • Next , Check the nice intellisense support for HTML5 , JQuery Mobile in Visual Studio Developer Preview

intellisense5

  • Check out the MVC 4 Mobile Web applications with JQuery Mobile , HTML5 , CSS 3 media queries in Smart Devices.

iPhone & iPad:
mvc4_ipad6iPhone:

home_iphone7JQuery Mobile View in iPhone of MVC 4 Mobile application:

button-icon_html58View in Windows Phone 7.1 Mango:

mvc4_wp79BlackBerry 9800:

980010

You can use Visual Studio 2012 or 2013, but here I use Visual Studio 2011 to build this application.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">