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


Developing MVC 4 applications with Visual Studio 2011 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 VS 2011 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 2011 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 VS 2011:

@{

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 2011 Developer Preview.

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

 

  • iPhone:

  • JQuery Mobile View in iPhone of MVC 4 Mobile application:

  • View in Windows Phone 7.1 Mango:

  • BlackBerry 9800:

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

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

  1. Pingback: Building ASP.NET MVC 4 application with JQuery Mobile, HTML5 … | ThrowSMS News

  2. Pingback: My Homepage

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: