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.
Lets jump start to develop MVC 4 mobile application with JQuery Mobile, HTML5, CSS3 in Visual Studio developers preview.
Select 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.
Next, 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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@{ ViewBag.Title = “Navigation”; Layout = “~/Views/Shared/_Layout.cshtml”; } <h2>Navigation</h2> <section id=”page1″data-role=”page”> <header data-role=”header”> <h1>JQuery Mobile with ASP.NET MVC 4</h1> <nav data-role=”navbar”> <ul> <li><a href=”#”class=”ui-btn-active”>First</a></li> <li><a href=”#”>Second</a></li> <li><a href=”#”>Third</a></li> <li><a href=”#”>Fourth</a></li> <li><a href=”#”>Fifth</a></li> </ul> </nav> </header> <div class=”content”data-role=”content”> <h3>Sample MVC 4 HTML 5 JQuery Mobile</h3> </div> <footer data-role=”footer”> <h3>Footer</h3> </footer> </section> |
- Next , Check the nice intellisense support for HTML5 , JQuery Mobile in Visual Studio Developer Preview
- Check out the MVC 4 Mobile Web applications with JQuery Mobile , HTML5 , CSS 3 media queries in Smart Devices.
JQuery Mobile View in iPhone of MVC 4 Mobile application:
View in Windows Phone 7.1 Mango:
You can use Visual Studio 2012 or 2013, but here I use Visual Studio 2011 to build this application.