How to add Glossy App Icon for Mobile Web App on iOS platform?


Here is a short note on how to add glossy app icon for mobile web apps built in HTML5, ASP.NET MVC, jQuery Mobile/Sencha on iPad, iPhone platform. You need to select a standard .PNG file with proper icon formats (aka 114 x 114) for iPad , (54 X 54) for iPhone & add the .icon file in your mobile web app project root directory.

Simply add it in your HTML5 code after meta name viewport tag as:

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

<meta name=”viewport”content=”width=device-width, initial-scale=1, maximum-scale=1″/>

<link rel=”apple-touch-icon”href=”icon.png”/>

Now, on iOS device, add the mobile web app on homescreen, then you can find your app icon along with the caption options.

AppIcon

REST Services for Mobile ASP.NET MVC 4 with Code-First Entity Framework & Web API with SQL Azure on Visual Studio 2012 Ultimate


REST based services are quite easier to access via ASP.NET MVC 4 Mobile Web applications with Web API framework. With REST , each object can be uniquely identified & accessed via Code Access URL with its own Routing logic & behaviour. To implement a REST services for Mobile ASP.NET MVC 4 application with Web API & entity framework , lets start by creating a new ASP.NET MVC 4 web applivation from VS 2012 Ultimate.

  • Select the Project type as Internet Application by default.

  • Delete the default Model  folders file & create a new class & name it as Contacts.cs. Add the following code into it.

using  System;

using  System.Collections.Generic;

using  System.Linq;

using System.Web;

using System.Globalization;

namespace  ContactsApp.Models

{

public class Contact

{

public int ContactId { get; set; }

public string Name { get; set; }

public string Address { get; set; }

public string City { get; set; }

public string State { get; set; }

public string Zip { get; set; }

public string Email { get; set; }

public string Twitter { get; set; }

public string Self

{

get

{

returnstring.Format(CultureInfo.CurrentCulture,“api/contacts/{0}”, this.ContactId);

}

set { }

}

}

}

  • Delete the default controllers & Build thee solution & create a new Controller by selecting the Contact Model class.

  • Now select Tools -> Library Extension Manager -> Package Manager Console & paste the following commands.

enable-migrations

 add-migration Initial

Now , select the Configuration.cs file from Migrations folder & paste the following code.

namespace

ContactsApp.Migrations

{

using System;

using System.Data.Entity;

using System.Data.Entity.Migrations;

using System.Linq;

using ContactsApp.Models;

internalsealedclassConfiguration : DbMigrationsConfiguration<ContactsApp.Models.ContactsAppContext>

{

public Configuration()

{

AutomaticMigrationsEnabled = false;

}

protected override void Seed(ContactsApp.Models.ContactsAppContext context)

{

context.Contacts.AddOrUpdate(p => p.Name, new Contact

{

Name = “Debra Johnson”,

Address = “1234 Main St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “debra@example.com”,

Twitter = “debra_example”

},

new Contact

{

Name = “Thorsten Weinrich”,

Address = “5678 1st Avenew W”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “thorsten@example.com”,

Twitter = “thorsten_example”

},

new Contact

{

Name = “Yuhong Li”,

Address = “9012 State St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “yuhong@example.com”,

Twitter = “yuhong_example”

},

new Contact { Name = “Jon Orton”, Address = “3456 Maple St”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “jon@example.com”, Twitter = “jon_example” },

newContact { Name = “Diliana Alexieva-Bosseva”, Address = “7890 2nd Street E”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “diliana@example.com”, Twitter = “diliana_example” }

);

}

}

}

  • In the package-Manager console , enter the following code :

update-database

Build the solution & add the following code in index.cshtml :

@model IEnumerable<ContactsApp.Models.Contact>

@{

ViewBag.Title = “Home”;

}

@section Scripts {

@ Scripts.Render(“~/bundles/knockout”)

<script type=”text/javascript”>

function ContactsViewModel() {

var self = this;

self.contacts = ko.observableArray([]);

self.addContact =

function () {

$.post(“api/contacts”,

$( “#addContact”).serialize(),

function (value) {

self.contacts.push(value);

},

“json”);

}

self.removeContact = function (contact) {

$.ajax({

type: “DELETE”,

url: contact.self,

success:

function () {

self.contacts.remove(contact);

}

});

}

$.getJSON( “api/contacts”, function (data) {

self.contacts(data);

});

}

ko.applyBindings(new ContactsViewModel());

</script>

}

<ul id=”contacts”data-bind=”foreach:contacts”>

<li class=”ui-widget-content ui-corner-all”>

<h1 data-bind=”text:Name”class=”ui-widget-header”></h1>

<div><spandata-bind=”text:$data.Address ||      ‘Address?'”></span></div>

<div>

<span data-bind=”text:$data.City || ‘City?'”></span>

<span data-bind=”text:$data.State || ‘State?'”></span>

<span data-bind=”text:$data.Zip || ‘Zip'”></span>

</div>

<div data-bind=”if:$data.Email”><adata-bind=”attr:{href:  ‘mailto:’+Email},text:Email”></a></div>

<div data-bind=”ifnot:$data.Email”><span>Email?</span></div>

<div data-bind=”if:$data.Twitter”><adata-bind=”attr:{href:     ‘http://twitter.com/&#8217; +Twitter},text:’@@’+Twitter”></a></div>

<div data-bind=”ifnot:$data.Twitter”><span>Twitter?</span></div>

<p><a data-bind=”attr:{href:Self},click:$root.removeContact”

class=”removeContact ui-state-default ui-corner-all”>Remove</a></p>

</li>

</

ul>

<form id=”addContact”data-bind=”submit:addContact”>

<fieldset>

<legend>Add New Contact</legend>

<ol>

<li>

<label for=”Name”>Name</label>

<input type=”text”name=”Name”/>

</li>

<li>

<label for=”Address”>Address</label>

<input type=”text”  name=”Address”/>

</li>

<li>

<label for=”City”>City</label>

<input type=”text”name=”City”/>

</li>

<li>

<label for=”State”>State</label>

<input type=”text”name=”State”/>

</li>

<li>

<label for=”Zip”>Zip</label>

<input type=”text”name=”Zip”/>

</li>

<li>

<label for=”Email”>E-mail</label>

<input type=”text” name=”Email”/>

</li>

<li>

<label for=”Twitter”>Twitter</label>

<input type=”text”name=”Twitter”/>

</li>

</ol>

<input type=”submit”value=”Add”/>

</fieldset>

</form>

  • Render the View on IE 10 & Check the script & view on iPhone & BlackBerry browsers.

Build Medical Radiology DICOM Viewer in HTML 5 & jQuery for iPhone


For Medical Radiology domain, it’s indispensable to develop DICOM Viewer in order to view medical images (CT, MR, Endoscopy,X-Ray) on smartphones. For desktop it’s easy to build for webkit browsers (Mozilla Firefox, Chrome) on HTML 5 & jQuery. Lets develop such app for iPhone.

To build this app, several js libraries are needed which is available @ github.

  • Lets check for the code to build the DICOM Web viewer on HTML 5 :

<html>

<head>

<title>DICOM Web Viewer</title>

<meta name=”apple-mobile-web-app-capable” content=”yes”/>

<meta name=”viewport” content=”width=device-width”/>

<meta http-equiv=”content-type”content=”text/html; charset=ISO-8859-1″>

<link rel=”stylesheet” href=”css/style.css”>

<link rel=”stylesheet” href=”css/ui-darkness/jquery-ui-1.8.16.custom.css”>

</head>

<body>

<!– Third party –>

 

<script type=”text/javascript”src=”ext/jquery/jquery-1.7.1.min.js”></script>

<script type=”text/javascript”src=”ext/jquery/jquery-ui-1.8.18.custom.min.js”></script>

<script type=”text/javascript”src=”ext/flot/jquery.flot.min.js”></script>

<script type=”text/javascript”src=”ext/jpg.js”></script>

<script type=”text/javascript”src=”ext/jpx.js”></script>

<!– Local –>

<script type=”text/javascript”src=”src/dwv.js”></script>

<script type=”text/javascript”src=”src/application.js”></script>

<script type=”text/javascript”src=”src/dicom/dicomParser.js”></script>

<script type=”text/javascript”src=”src/dicom/dictionary.js”></script>

<script type=”text/javascript”src=”src/html/html.js”></script>

<script type=”text/javascript”src=”src/html/style.js”></script>

<script type=”text/javascript”src=”src/html/layer.js”></script>

<script type=”text/javascript”src=”src/image/image.js”></script>

<script type=”text/javascript”src=”src/image/lookupTable.js”></script>

<script type=”text/javascript”src=”src/image/luts.js”></script>

<script type=”text/javascript”src=”src/math/shapes.js”></script>

<script type=”text/javascript”src=”src/tools/toolbox.js”></script>

<script type=”text/javascript”src=”src/tools/draw.js”></script>

<script type=”text/javascript”src=”src/tools/rectangle.js”></script>

<script type=”text/javascript”src=”src/tools/roi.js”></script>

<script type=”text/javascript”src=”src/tools/line.js”></script>

<script type=”text/javascript”src=”src/tools/circle.js”></script>

<script type=”text/javascript”src=”src/tools/windowLevel.js”></script>

<script type=”text/javascript”src=”src/tools/zoom.js”></script>

<script type=”text/javascript”src=”src/tools/filter.js”></script>

<script type=”text/javascript”src=”src/tools/undo.js”></script>

<script type=”text/javascript”src=”src/utils/string.js”></script>

<script type=”text/javascript”>

function

toggle(dialogName)

{

if( $(dialogName).dialog(‘isOpen’) )

{

$(dialogName).dialog(‘close’);

}

else

{

$(dialogName).dialog(‘open’);

}

}

// main application

var  app = new dwv.App();

// jquery

$(document).ready(function(){

// create buttons and dialogs

$(“button”).button();

$(“#openFile”).dialog({ position: [10, 110] });

$(“#toolbox”).dialog({ position: [10, 280] });

$(“#history”).dialog({ position: [10, 450], autoOpen: false });

$(“#tags”).dialog({ position: [‘right’, 110], autoOpen: false, height: 400, width: 400 });

$(“#layerContainer”).dialog({ position: [340, 110],

width: [550], height: [570] });

// initialise the application

app.init();

});

</script>

<!– Title –>

<h1>DICOM Web Viewer </h1>

<!– Buttons –>

<button onclick=”toggle(‘#openFile’)”>Open File</button>

<button onclick=”toggle(‘#toolbox’)”>Toolbox</button>

<button onclick=”toggle(‘#history’)”>History</button>

<button onclick=”toggle(‘#tags’)”>Tags</button>

<button onclick=”toggle(‘#layerContainer’)”>Image</button>

<!– Open file –>

<div id=”openFile”title=”Open File”>

<p><form>

Path:

<input type=”file”id=”files”name=”files[]”multiple/>

</form></p>

<div id=”progressbar”></div>

</div>

<!– Toolbox –>

<div id=”toolbox”title=”Toolbox”>

</div>

<!– History –>

<div id=”history”title=”History”></div>

<!– Tags –>

<div id=”tags”title=”Tags”style=”display:none;”></div>

<!– Layer Container –>

<div id=”layerContainer”title=”Image”>

<canvas id=”imageLayer”width=”512″height=”512″></canvas>

<canvas id=”drawLayer”width=”512″height=”512″></canvas>

<canvas id=”infoLayer”width=”512″height=”512″></canvas>

<canvas id=”tempLayer”width=”512″height=”512″></canvas>

</div>

</body>

</html>

  • Lets run the Viewer on iPhone 4s.

Develop Cross-Platform Mobile Frameworks with Monocross , MonoTouch & MonoDroid for Android,Windows Phone 7.5 & iOS


Its feel great if possible to develop apps for Android, Windows Phone 7.5 & iOs using C# & with .NET Framework. The oppurtunity is well defined for Monocross, MonoDroid & MonoTouch framework. Let us find a suitable template with Monocross framework which would install a Monocross template for Visual Studio extension. Lets download it @ http://monocross.net/download.

Now install the .vsix template installer for Visual studio 2010.

  • Next check in the Extension Manager of Visual Studio 2010 where you can see the Monocross template for Visual studio is to be installed.

  • Lets start with a new Monocross Project from Visual Studio 2010 for Android Web kit. Next select a Webkit container project.

  • Add reference for the Monocross class library with the web-kit Container project.

  • Now run the Webkit project on Android emulator & check the web app sample built in HTML5 & ASP.NET MVC .

 

 

Develop DICOM Image Viewer app for Android integrated in ASP.NET 4.0 Mobile build in JQuery Mobile, HTML5,& CSS3 Media Queries


While working with HealthCare domain based customers , felt one application is going to be inevitable for EMR Mobile based apps -DICOM Medical Image Viewer for smartphones. For that lets have integrate Android native app Droid Dicom Viewer with your Mobile Medical ASP.NET 4.0 website build with HTML5, JQuery Mobile, PhoneGap,CSS3 media queries.

  • In order to open the .apk file & DICOM Image files(.dcm) from Mobile ASP.NET website, you need to set the MIME Maps for .apk & .dcm files in IIS 7.

  • Lets start download the first DICOM Files downloader .apk which helps to download the Medical DICOM Image files(.dcm) from the remote server.

  • Lets have install the Droid Dicom Viewer & DICOM files downloader .apk on Android 4.0.3 emulator.

  • Proceed to complete installation of the DICOM file downloader .apk to start download .dcm files from remote server.

  • Lets install the Droid DICOM Image Viewer from Mobile asp.net site in Android 4.0.3 emulator.

  • Lets load the DICOM Image File (.dcm) in Droid DICOM Image Viewer .apk in Android 4.0.3 emulator.

  • Lets find your DICOM Image File on SD Card of your droid .apk & start viewing the DICOM Image on viewer in Android 4.0.3 (API 15) platform.

Build Cross-Platform Mobile Web+Native apps with Application Craft+PhoneGap platform in HTML5,CSS3 framework


Application Craft is one of the sophisticated cross-platform tool used to build Web App + PhoneGap combined apps for smart devices. The Application Craft is web app which runs in cross -platform(windows,Linux, Mac OS X) compatible with Chrome, Safari, Firefox. To start building apps with Application Craft , lets first sign up @ http://www.applicationcraft.com/

Lets create Mobile App from your developer site & start building apps. You have option either to design & code & put the PhoneGap controls.

  • Keep controls drag & drop & build apps for cross-platform mobile tools.

  • put the app in Live Preview & check in Smart Phone emulators.

Developing Interactive Mobile Web Apps with HTML5,JS, CSS3 using MoSync SDK 3.0 for Android,Windows Phone 7.5 & iOS.


MoSync is a cross-platform  Mobile App development environment where we can build apps for native UI, Web UI as well as hybrid UI for Windows Phone 7.5, Windows Mobile 6.x , Microsoft SmartPhone 2003 library, Pocker PC , Android  & iOS (iPhone & iPad for Mac OS X). MoSync SDK comes with a built -in Eclipse IDE to build up apps in HTML5/js or native C/C++ API.  To start development with MoSync SDK 3.0 , download it here.

  • Before installing MoSync Reload SDK 3.0 , you need to install first Node.js 0.6 version in order to run MoSync apps. If you are first time coder in MoSync  SDK 3.0, better to start with MoSync SDK 3.0.
  • Create a new MoSync Project in MoSync Eclipse IDE from File-> Project -> MoSync Project -> Select HTML 5 -> Select HTML5/js Web UI App.   

  •  Select a name for your project & click on finish to get the default project template.

  • Now check the default code template & select the Runtime environments. In MoSync you can run apps either directly to smartphone devices (Android USB /Bluetooth USB) or run in device emulators (Android, Windows Phone 7.5, iPhone for OS X).
  • Check out the Android Simulation environment & Click on Active Profile from toolbar of MoSync Eclipse IDE.

  • MoSync SDK will generate .apk file for Android Web UI app & deploy the app to Android emulator or device.

  • Run the MoSync HTML5,js  Web UI app  on Android 4.0 emulator.

  • Click on Change Color Button & check out the color change of the Web UI app.

  • Next deploy the  MoSync HTML5/js Web UI app on Windows Phone 7.5 emulator & Click on Active Profile icon to find the available devices on MoSync Eclipse IDE.

  • Select Windows Phone 7.5 platform as target device/emulator platform.

  • MoSync SDK will deploy the HTML5/js Web UI app as Native .xap file for Windows Phone 7.5 .

  • Check out the HTML5 /js Web App in Windows Phone 7.5 as native app .

 

  •  In the next tutorial, we will see the support of PhoneGap applications on MoSync SDK HTML5/js Web UI apps.

A Sample of Mobile Web 2.0 with HTML5 Boilerplate, CSS3 Media Query, JQuery Mobile,Mobile Ajax/Dojo.


Mobile 2.0 is impossible to think without JQuery Mobile/JQTouch/Sencha/Mobile Ajax with cross-platform tools support like Phonegap, RhoMobile or Titanium  or Monotouch. Since for simply development of Mobile Web as hybrid or native (with Phonegap) keeping business logic perfect as desktop web are quite easy. Lets demonstrate a live Mobile Web 2.0 sample built in JQuery Mobile 1.0 RC, HTML5, CSS media queries, ASP.NET Nuget packages.

Used  simply databinding features from ASP.NET & bind the JQuery Mobile plugins. Check the following Code:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

<meta name=”viewport”content=”width=device-width”/>

<link rel=”Stylesheet”media=”screen”href=”JQuery Mobile/jquery.mobile-1.0.1.min.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/style.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/jquery.datepick.css”/>

<script type=”text/javascript”src=”JQuery Mobile/jquery.js”></script>

<script type=”text/javascript”src=”JQuery Mobile/jquery.mobile-1.0.1.min.js”></script>

<script type=”text/javascript”src=”scripts/jquery.datepick.js”></script>

<script type=”text/javascript”>

$(

function () {

$(

‘#DateID’).datepick({ dateFormat: ‘yyyy/mm/dd’ });

});

</script>

</head>

<body>

<formid=”form1″runat=”server”>

<headerdata-role=”header”><h1>The Institute of Neuro Sciences</h1></header>

<divclass=”content”data-role=”content”>

<navdata-role=”navbar”>

<ul>

<li><ahref=”Default.aspx”data-role=”button”data-icon=”home”data-iconpos=”left”>Home</a></li>

<li><ahref=”IPD.aspx”data-role=”button”data-icon=”plus”data-iconpos=”left”>IPD Section</a></li>

<li><ahref=”contact.aspx”data-role=”button”data-icon=”search”data-iconpos=”left”>Contact</a></li>

</ul>

</nav>

<h3>The Outdoor Patients’ Department</h3>

</div>

Select the Department :

<asp:DropDownListID=”ddlDepartments”runat=”server”AutoPostBack=”true”

OnSelectedIndexChanged=”ddlDepartments_SelectionChanged”>

</asp:DropDownList>

Select Your Name:

<asp:DropDownListID=”ddlName”runat=”server”></asp:DropDownList>

Enter The Date :

<asp:TextBoxID=”DateID”runat=”server”/>

<asp:ButtonID=”DisplayDoctorsVisit”  runat=”server”Text=”Display Patients’ Details”OnClick=”cmdbutton_Click”/>

<div>

<center>

<asp:GridViewID=”GridView2″runat=”server”AutoGenerateColumns=”False”

CellPadding=”4″

ForeColor=”Black”GridLines=”None”>

<AlternatingRowStyleBackColor=”White”ForeColor=”#284775″/>

<Columns>

<asp:BoundFieldDataField=”docname”HeaderText=”Doctor Name”ReadOnly=”true”SortExpression=”docname”/>

<asp:BoundFieldDataField=”pname”HeaderText=”Patient Name”ReadOnly=”true”SortExpression=”pname”/>

<asp:BoundFieldDataField=”ONLINE100_QUEUE”HeaderText=”Queue”ReadOnly=”true”SortExpression=”ONLINE100_QUEUE”/>

<asp:BoundFieldDataField=”online100_shift”HeaderText=”shift”ReadOnly=”true”SortExpression=”online100_shift”/>

</Columns>

<EditRowStyleBackColor=”#999999″/>

<FooterStyleBackColor=”#5D7B9D”Font-Bold=”True”ForeColor=”White”/>

<HeaderStyleBackColor=”#000000″Font-Bold=”True”ForeColor=”White”/>

<PagerStyleBackColor=”#284775″ForeColor=”White”HorizontalAlign=”Center”/>

<RowStyleBackColor=”#F7F6F3″ForeColor=”#333333″/>

<SelectedRowStyleBackColor=”#E2DED6″Font-Bold=”True”ForeColor=”#333333″/>

<SortedAscendingCellStyleBackColor=”#E9E7E2″/>

<SortedAscendingHeaderStyleBackColor=”#506C8C”/>

<SortedDescendingCellStyleBackColor=”#FFFDF8″/>

<SortedDescendingHeaderStyleBackColor=”#6F8DAE”/>

</asp:GridView>

</center>

</div>

</form>

<footerdata-role=”footer”data-position=”fixed”><h3>All Rights Reserved</h3></footer>

</body>

</html>

  • JQuery Mobile DatePicker running in Windows Phone 7.5 Mango emulator.

Native UI controls support in Smartphones for Mobile Web.

Simply tested in iPad 2 .

  • JQuery Mobile , Sencha Touch , JQTouch, Dojo,Mobile Ajax CDN helps to update rich Mobile View with cross-browser & cross-platform support. 

 

A Lap around ASP.NET MVC 4 Beta(Web API) for Mobile in VS 11 Beta Ultimate on Windows 8 Consumer Preview


While releaseing the concept of Windows 8 Developer Preview, the architecture & features of .NET framework 4.5 & ASP.NET 4.5 has already focused. With VS 11 Beta ultimate , the concept of asynchronus programming in ASP.NET 4.5 has started with its Asynchronus HTTP Request/Response paradigm. Now to start programming in MVC 4 beta for Mobile , you will have immense & inbuilt support of JQuery Mobile(JQuery.mobile.js , jquery.css files), HTML5 adaptive markups & CSS 3 media queries. To enable Mobile MVC 4 Web programming for fancy, VS 11 Beta includes inbuilt Page inspector support to examine the markup details, JScript rendering, CSS 3 style queries.

  • Next, to build up a MVC 4 Beta web project for ASP.NET 4.5 , create a new project from templates in VS 11 beta ultimate.

  • Select the Mobile Web from the selected templates & choose Razor /ASPX View according to  your selection.

  • Create the default project & examine the new file created called Packages.Config  which a inbuilt VS file containing all the .dll settings details along with their original version information installed in GAC of .NET 4.5.

  • Next , check the MVC 4 Web in IE10 with advanced JQuery , HTML 5 & CSS 3 media queries support.

  • Open the .cshtml pages in Page Inspector which is inbuilt with VS 11 beta Ultimate to examine the HTML5, CSS 3 styles  , javascript debugging features.

  • Enable the Page Inspector settings & check the live preview of your Web in Visual Studio 11 Beta  .

  • Now, the publish the Web in IIS 7.5 Express. Note though Windows 8 Consumer Preview has IIS 8 support but VS 11 Beta still works with IIS 7.5 express as local IIS. So deploy MVC 4 beta website in IIS 7.5 express via web deploy.

  • Now , check the MVC 4 Web URL in iOS 5 devices & check ASP.NET MVC 4 Web API Mobile web appearence.

 

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:

%d bloggers like this: