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 :

@{

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>