Running SQL Azure Reports on Windows 8 Release Preview Metro Apps, iPad, iPhone, BlackBerry, Android & Windows Phone with SQL Server 2012


Runing SQL Azure Reports on SmartPhones are quite easier as it renders for any HTML 5 compatible browsers (IE10, Mobile Safari etc). So , lets build up a SQL Azure Report & render it on various smartphone platforms.

  • Lets open SQL Server 2012 Data Tools to create a new SQL Azure Report.

  • Check out the SQL Azure database Tables & render the queries to build the report.

  •  Next, Deploy the report properly first on local Report Server & check the report preview.

  • Check the SQL Azure Reporting URL & deploy the report on your SQL Azure Reporting Server.

  • Now render the SQL Azure report on Windows 8 Release Preview Internet Explorer Metro App.

  •  

 

  • Next , Check the Report on iPad 2 & render it on mobile safari.

  • Lets render the report on Ipad 2.

  • Check the preview on iPhone 4S.

  • Lets run it on major smartphone platforms(Android HTC, BlackBerry Storm)

Advertisements

Building RhoMobile MVC application with HTML 5 , JQuery for iPhone,iPad, Windows Phone, Android,BlackBerry


RhoMobile is an alternative native application environment for smartphones other than PhoneGap. To build applications with RhoMobile , you need to download RhStudio from http://rhomobile.com/products/rhostudio/ & choose your appropriate version for Windows or Mac.

  • Next to create smartphone applications with Rhomobile, you need to install Rhodes , RhoSync, RhoConnect , Gits. The four Rhomobile products – Rhodes, Rhosync, RhoHub, and Rhogallery – provide a complete toolkit for creating a mobile application. Rhomobile is cross-platform and so allows you to build your application for many different types of smartphone – including iPhone and Blackberry – just with a single codebase. This makes it the most preferred and quickest way of developing mobile apps. As you create a native Rhomobile application, you can use the built-in device features such as GPS, Push, and Camera, all with offline capabilities.
  • Select File-> New Project-> Rhodes Application-> Select your Project name.

  •  Set out the Rhodes Model of the application by right clicking on the project of the Project Explorer & Select Rhodes Model. Provide Name & Controllers.

  • Next , you will find three types files inside the app folder of your project & after setting the Models , a seperate folder named as your Model name will be created.
  • The files created as default are basically of  three types :
  • product.erb -> This is the Model file, which contains the Model Definition.
  • product_controller.rb -> This file contains the business logic relates to our Model.
  • *.erb-> The .erb files are the html view template files.
  • Lets the controller view of Rhodes Views for smartphones:

  • Lets  edit the Views as ‘Index.erb’ in HTML 5 for Rhodes application for smartdevices.

<div data-role=“page” data-url=“<%=Rho::RhoConfig.start_path%>/”>

  <div data-role=“header” data-position=“inline”>

    <h1>Storemanager</h1>

    <%if SyncEngine::logged_in > 0 %>

    <a href=“<%=url_for:controller=>:Settings,:action=>:do_sync%>”class=“ui-btn-left” data-icon=“refresh”>

      Sync

    </a>

    <a href=“<%=url_for:controller=>:Settings,:action=>:logout%>”class=“ui-btn-right” data-icon=“star”>

    Logout

  </a>

    <%else %>

        <a href=“<%=url_for:controller=>:Settings,:action=>:login%>”class=“ui-btn-right” data-icon=“star”>Login</a>

    <%end%>

</div>

  <div data-role=“content”>

    <ul data-role=“listview”>

      <li><a href=“Product”>

      <span class=“title”>Products </span>

      </a></li>

    </ul>

  </div>

</div>

    • Run the Project by right clicking project -> Run Configuration -> Right Click on RhodesMobile-> Select New -> Select your simulator Environment.

  • Select your RhoMobile Simulator as iPhone & check the application output native iPhone platform.

  • Web – Inspector View for HTML 5 , JQuery Mobile Codes.

  • Products Sample Entry Screen with MVC HTML 5 , JQuery Mobile in iPhone.

    • Check the Project View in Android Platform:

  • Product Samples Screen in Android:

    • Windows Mobile View for RhoMobile :

Enterprise Charts application with Dojo Toolkit & HTML 5 ,CSS 3 for iOS, Android,BlackBerry,Windows Phone Web apps


Enterprise applications cant be imgined without the DataGrids / Charts view. The Open – source Mobile web development frameworks like Sencha Touch, RhoMobile, Dojo Toolkits all have excellent support for this enterprise wide charts & datagrids support for mobile web apps.

  • Line Charts for Mobile Web with Dojo Mobile : Line charts provide excellent support for displaying Linear graphs with enterprise data & to view the data analysis for apps.
  • Code Samples for Line Graphs with Dojo Mobile:

<!DOCTYPE HTML>

<html>

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require( “dojox.charting.Chart2D”);

dojo.require(“dojox.charting.themes.Tom”);

var chartData = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];

dojo.ready(

     function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Tom);

chart.addPlot( “default”, {

type: “Lines”,

markers: true

});

chart.addAxis(“x”);

chart.addAxis( “y”, { min: 5000, max: 15000, vertical: true, fixLower: “major”, fixUpper: “major” });

chart.addSeries(“SalesThisDecade”, chartData);

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

  •  Lets View the Line Graph in iPhone 4S & iPad :

  • iPad View :

  • Code Samples for Pie Charts with Dojo Mobile:
  • Sample Code :

<!DOCTYPEhtmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

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

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.MoveSlice”);

dojo.require(“dojox.charting.themes.Claro”);

var chartData=[10000,9200,11811,12000,7662,13887,14200,12223,13000,10004,11233,12088];

dojo.ready(

function() {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Claro);

chart.addPlot(“default”, {

type:“Pie”,

markers:true

});

chart.addAxis(“x”);

chart.addAxis(“y”,{min:5000,max:30000,vertical:true,fixLower:“major”,fixUpper:“major” });

chart.addSeries(“Monthly Sales-2010”, chartData);

var tip = new dojox.charting.action2d.Tooltip(chart,“default”);

var mag = new dojox.charting.action2d.MoveSlice(chart,“default”);

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

</head>

<body>

</body>

</html>

 

Lets View Pie Charts in iPhone, iPad & Android:

 

  • iPhone 4s View:

 

  • Android View:

 

  • BlackBerry 9800 View :

  • Columnar Chart for Mobile Web with Dojo Mobile: Developing Columnar chart with HTML 5, CSS 3 media queries with Dojo toolkit is spectacular for Mobile web apps.
  • Sample Code for Columnar Chart:

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

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

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.themes.MiamiNice”);

dojo.require(“dojox.charting.widget.Legend”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.Magnify”);

dojo.require(“dojox.charting.themes.Claro”);

// Define the Data

var chartData = [10000,9400,11874,13090,7665,13665,14677,12235,18000,11233,13077,10009];

//When the DOM is ready ready and resources are loaded

dojo.ready(

function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

var legend1 = new dojox.charting.widget.Legend({ chart: chart }, “legend”);

// Set the theme

chart.setTheme(dojox.charting.themes.MiamiNice);

//Add the only /default plot

chart.addPlot(

“default”, {

type:

“Columns”,

markers:

true,

gap: 5

});

// Add axes

chart.addAxis(

“x”);

chart.addAxis(

“y”, { vertical: true, fixLower: “major”, fixUpper: “major” });

// Add the series of data

chart.addSeries(

“Monthly Sales”, chartData);

// Render the chart

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

<div id=”legend”></div>

</head>

<body>

</body>

</html>

  • Lets View the Graph in iPhone, iPad , Android & Windows Phone:

  • iPhone 4s View  :

  • Android 3 Tablet View: 

 

  • for Windows Phone:

  •  Lets add some Tooltip , Magnify , Highlight section for Enterprise Columnar Chart for Mobile:

<!DOCTYPEHTML>

<html>

<head>

<title>Dojo Toolkit Mobile Charting</title>

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.widget.Legend”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.Magnify”);

dojo.require(“dojox.charting.themes.Claro”);

var chartData1 = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];

var chartData2 = [3000, 12000, 17733, 9876, 12783, 12899, 13888, 13277, 14299, 12345, 12365, 15560];

var chartData3 = [4000, 12000, 16755, 14355, 13988, 13277, 14299, 12345, 12865, 18965, 57499, 14299].reverse();

dojo.ready(

function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Claro);

chart.addPlot(“default”, {

type:“Lines”,

markers:true

});

chart.addAxis(“x”);

chart.addAxis(“y”, { min: 5000, max: 30000, vertical: true, fixLower: “major”, fixUpper: “major” });

chart.addSeries(“SalesThisYear -2009”, chartData1);

chart.addSeries(“SalesThisYear – 2010”, chartData2);

chart.addSeries(“SalesThisYear -2011”, chartData3);

var tip = new dojox.charting.action2d.Tooltip(chart, “default”);

var mag = new dojox.charting.action2d.Magnify(chart, “default”);

chart.render();

var legend = new dojox.charting.widget.Legend({ chart: chart }, “legend”);

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

  •  Lets View the output in ipad 2:

  •       Android Tablet  View for Columnar Chart with Dojo Mobile:

  •   Windows Phone 7.1 Landscape View for Columnar Charts with Maginify view, Tooltips:

PhoneGap for Windows Phone,iPhone & Android apps with JavaScript,HTML 5 & CSS 3


  • What is PhoneGap? [http://phonegap.com]
  • PhoneGap is an open – source Mobile Development framework originated by Nitobi Software in iPhoneDevCamp at San Francisco, 2008.
  • Bridges the gap between the SDKs & native apps & Mobile Web apps.

 

  • How Does PhoneGap Work?
  • UIWebView object for iPhone
  • WebView object with Android
  • TemplateView with Windows Phone
  • Interpreted Language: JavaScript
  • Deployment: AppStore , Android Market, Windows Phone Marketplace.
  • Write your first application with PhoneGap for iPhone,Android & Windows Phone :
  • Webkit
  • BlackBerry 6+, Palm WebOS
  • HTML 5 with Canvas, Databases and Geolocation
  • CSS3 with Transitions, Gradients and Rounded Corners.
  • Cross-Domain security policy does not apply:
  • $.getJSON(‘http://search.twitter.com/trends/current.json&#8217;)

 

  • JQTouch:(http://jqtouch.com)
  • A JQuery plugin for Mobile Web development.
  • For iOS, Android & BlackBerry supports Page Transitions(CSS 3)
  • Page History
  • Toolbar
  • Forms
  • Home screen Icons

JQTouch Sample  Code:

<title>JQuery for i-Phone</title>

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

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”default/theme.css”/>

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

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

<script type=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

 

  • IScroll: Provides a scroll content inside a fixed width/height element
  • Android >= 1.5, iPad >= 3.2 , iPhone >=2.0
  • Uses touch JavaScript events:
  • touchstart
  • touchmove
  • touchend
  • Persistence.js:
  • Asynchronus Javascript object-relational mapper library
  • Can be used in web browser:
  • HTML 5 WebSQL database(WebKit)
  • Google Gears(Firefox/IE)
  • Also on the server using node.js:
  • Node-mysql

 

  • Processing.js
  • Port of the processing language to JavaScript
  • Uses canvas element
  • Good replacement for flash
  • Can also used directly as a JavaScript library 

 

  • Meta Tags:
  • Viewport- Changes the window size used when displaying on iOS/Android
  • <meta name=”viewport” content=”width=320,user-scalable=0″ />
  • Full Screen mode:
  • <meta name=”apple-mobile-web-app-capable” content=”yes”>
  • Style of the status bar:
  • <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

 

  • Link Tags:
  • Add icon to bookmark
  • <link rel=”apple-touch-icon” href=”/custom_icon.png” />
  • Icon with no gloss : <link rel=”apple-touch-icon-precomposed” href=”/icon.png” />
  • Startup Screen: <link rel=”apple-touch-startup-image” href=”/startup.png”>

 

  • Install PhoneGap:
  • iPhone:
  • Install XCode plus iOS SDK
  • Use installer PhoneGap provides
  • Select PhoneGap when making a new project with Xcode

 

  • Android:
  • Install android SDK and add to $PATH
  • Run “android” to grab latest version
  • Setup Eclipse with Android plugin
  • Add PhoneGap.jar to project

 

  • Basic PhoneGap API:
  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification
  • Android Menu/Back Buttons
  • Read through Phonegap.js

 

  • Writing iPhone plugins:
  • Create new header file(“Test.h”)
  • Extend new ObjC class(“Test.m”)
  • Import new header file
  • Call ObjC from JavaScript
  • PhoneGap.exec(“Text.test”);
  • Update JS from ObjC
  • [webView stringByEvaluatingJavaScriptFromString:@”alert(‘test’)”]

 

  • Writing Android plugins:
  • WebView features:
  • addJavascriptInterface(JavaObject,”NameInJs”)
  • Allows Java method to be called directly by JavaScript
  • PhoneGap 0.9.2 features JavaScript controlled plugin manager
  • PluginManager.addService(
  • “HelloWorld”,
  • “com.phonegap.HelloWorldPlugin.HelloWorld );”
  • PhoneGap.execAsync(win,fail,”HelloWorld”,”sayHello”,[]);

DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad, Android & BlackBerry


DOJO Toolkit is an open source framework library well known for mobile web development close to native mobile applications for iPhone, iPad,BlackBerry, Android devices. It has close support for PhoneGap & renders controls with JavaScript , CSS 3 with HTML 5. It expects all features of Mobile Webkit browsers like Offline Cache, Browser manifest, local storage & isolation storage for mobile browsers etc.

  • So , It’s just another feather of JQTouch , Sencha Touch , JQuery Mobile but it has some of it’s unique features like Native Mobile application support like Google Maps with Location track, Enterprise Charts for Mobile, Mobile Gauge etc.
  • DOJO Toolkit initially is a project of Sun MicroSystems as open source DHTML based Ajax functionality with DOM support but later it’s divided into JavaScript, Ajax, HTML 5 , CSS 3 different features & provides native app support for mobile web 2.0
  • Though initial it’s support was based on Eclipse IDE of Java but I was keen to explore it’s features in my favourite IDE Visual Studio. So Download the toolkit from  http://dojotoolkit.org/download/   & extract it foundation files in three parts :

  •     Now , Add all the three folders of DOJO Toolkit “dijit, dojo, dojox” in Visual Studio Solution explorer & including “Show All Files” “include all the files in project”.
  •    Now start code by adding a new .aspx or .htm page with DOJO toolkit for Ajax, HTML 5, CSS 3, Google Ajax CDN, Mobile browser Webkit.

Sample Code:

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

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

<head>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script language=”javascript”type=”text/javascript”>

dojo.require(“dojox.mobile”);

dojo.require(“dojox.mobile.parser”);

dojo.requireIf(!dojo.isWebKit, “dojox.mobile.compat”);

</script>

//For Native iPhone view 

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/iphone.css”/>

//For Native iPad view

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/ipad.css”/>

// For Android View

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/android/android.css”

// For BlackBerry View

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/blackberry/blackberry.css”

</head>

<body>

<div id=”main”dojoType=”dojox.mobile.View”selected=”true”>

<h1 dojoType=”dojox.mobile.Heading”>

Settings

</h1>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-1.png”&gt;

Coolness Mode

<div class=”mblItemSwitch”dojoType=”dojox.mobile.Switch”>

</div>

</li>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-2.png&#8221;

rightText=”mac”moveTo=”disco”>

Disco Room

</li>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-3.png&#8221;

rightText=”AcmePhone”moveTo=”disco”>

Carrier

</li>

</ul>

</div>

<div id=”disco”dojoType=”dojox.mobile.View”>

<h1 dojoType=”dojox.mobile.Heading”>

Hello

</h1>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<li dojoType=”dojox.mobile.ListItem”moveTo=”main”>

I’m a square , man

</li>

</ul>

</ul>

</div>

</body>

</html>

  • Check out the output for iPhone 4 & iPad View:

 

  • iPAD 2 View

 

  • DOJO Toolkit for Mobile in BlackBerry 9800 View:

  • Android Tablet 3.0 View for DOJO Ajax HTML 5 view :

  • Lets explore with DOJO with Ajax, DOM HTML 5 with CSS 3 for mobile browser WebKit.

ASP.NET MVC Razor Template with JQuery Mobile Web for Android, Windows Phone , BlackBerry


ASP.NET MVC 3 Razor applications with JQuery Mobile is pretty straightforward for developing rich web for mobile. This article demonstrates to build asp.net mvc 3 Razor applications with JQuery , HTML 5 & CSS 3 templates running in smartphones . Build an application for ASP.NET MVC Razor application in Visual Studio 2010 & add the following JQuery template in _layout.cshtml:

<!DOCTYPEhtml>

<html>

<head>

<title>@ViewBag.Title</title>

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

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<link rel=”stylesheet”href=”@Url.Content(http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css&#8221;)”/>

<scripttype=”text/javascript”src=”@Url.Content(http://code.jquery.com/jquery-1.5.2.min.js&#8221;)”></script>

<scripttype=”text/javascript”src=”@Url.Content(http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js&#8221;)”></script>

</head>

<body>

@RenderBody()

</body>

</html>

Next , Put the code in Index.cshtml for SmartPhone View:

@model IEnumerable<MVC3_JQueryMobile.Models.HMS_000ITEM>

@{

ViewBag.Title = “Index”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<div data-role=”page”>

<div data-role=”header”>

<h1> Health Record </h1>

</div>

<div data-role=”content”> 

<ul data-role=”listview”>

<li>@Html.ActionLink(“Patients Record”, “Index”, “Home”)</li>

<li>@Html.ActionLink(“Daily Health Record”, “Index”, “Category”)</li>                   

<li>@Html.ActionLink(“View Report”, “Index”, “Expense”)</li>

</ul>

</div>

<div data-role=”footer”>     

<nav data-role=”navbar”>

<ul>

<li><ahref=”#”class=”ui-btn-active”>Patient Details</a></li>

<li><ahref=”#”>Report Chart</a></li>

<li><ahref=”#”>Contact Us</a></li>

</ul>

</nav>

</div>

Check out the output in Android & Windows Phone 7.1 & BlackBerry 9800:

  •    Check in BlackBerry 9800 Browser :

  • Testing Website in Internet Explorer 9 for Windows Phone 7.1 Mango :

ASP.NET MVC 4 with Windows Azure for Windows Phone 7, BlackBerry, Android & i-Os.


Though MVC 4 is still in developer preview , not released in RTM phase but there is cool staff of development of ASP.NET MVC 4 applications for desktop & Mobile with Windows Azure environment.

Since it’s always been a great experience with working of MVC with Windows Azure of rich web experiences in Cloud. So , Lets a Windows Azure application targeted for Mobile Smart devices (Windows Phone 7, BlackBerry 7 , i-Os, Android ) & deploy in Azure of Microsoft Data Centeres.

  • Let’s Create a new Windows Azure Application from Visual Studio & do not add any webrole to it as we will add our ASP.NET MVC 4 webrole with it . (P.S:  Those  who have already MVC4 Webrole Template installed in Windows Azure environment of Visual Studio , can go & take a MVC 4 Web Role Template).
  • For those who dont have MVC 4 WebRole Template for Windows Azure environment for Visual Studio can simply create the blank Azure Project as we will add ASP.NET MVC 4 web application project later.

  •  Check out the  WebRole sections, Click OK as we dont need to take WebRole from default WebRole options.

  •  Next , Check out the Blank Azure Project created in your Visual Studio solution with ServiceConfiguration.cscfg & ServiceDefinition.csdef files.
  • Now , Time to add a new ASP.NET MVC 4 Project from Visual Studio , so on the solution explorer right click the solution -> add -> new project -> choose New ASP.NET MVC 4 Web Application.

  • Next , Add the ASP.NET MVApplication C 4 application with Windows Azure Project . To do this , right click on Roles of your Windows Azure project & select Web Role Project in Solution . Redirect to Associate Web Role Project in Solution Window  & Click OK.

        Check the ASP.NET MVC 4 web application has been added as webrole in Windows Azure Roles.

    • Click OK to add the existing MVC 4 solution with Windows Azure Application.
  •  Now it’s time to run the Windows Azure Project with ASP.NET MVC 4 in development fabric. So hit F5.

  •  Now time to test the application in Mobile Devices so , test in Windows Phone as this asp.net MVC 4 web application project has been enabled for Mobile apps.

  •  Associate Page View 

  •  Now , Test it in Android 2.2 & Android 3 Tablet device.

  •  Android 3.0 Tablet View for ASP.NET MVC 4 Windows Azure Application.

  •  Run it on BlackBerry OS of BlackBerry 9800 device.

  •  So the Windows Azure Application with ASP.NET MVC 4 for mobile is ready for development fabric , so deploy it Azure VM & run it from cloud to mobile.

 

 

 

%d bloggers like this: