ASP.Net Mvc 5 Mobile

154LikeLike

Tweet 35

Web Sites (/en-us/documentation/services/web-sites/)Discover more resources for these services:

Compute (/en-us/develop/net/compute/) Data Services (/en-us/develop/net/data/)Discover more resources:

App Services (/en-us/develop/net/app-services/) Reference (/en-us/develop/net/reference/)

Samples (/en-us/develop/net/samples/) Scenario-based tutorials (/en-us/develop/net/end-to-end-Apps/)

Deploy an ASP.NET MVC 5 Mobile Web Application on Azure Web SitesBy Cephas Lin (https://twitter.com/Cephas_MSFT) and Rick Anderson (https://twitter.com/RickAndMSFT) Updated 21 May

2014.

This tutorial will teach you the basics of how to build an ASP.NET MVC 5 Web application that is mobile-friendly and deploy it

into Windows Azure. For this tutorial, you need Visual Studio Express 2013 for Web

(http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-web) or the professional edition of Visual

Studio if you already have that.

What You'll Build

For this tutorial, you'll add mobile features to the simple conference-listing application that's provided in the starter project

(http://go.microsoft.com/fwlink/?linkid=398780&clcid=0x409). The following screenshot shows the ASP.NET sessions in the

completed application, as seen in the browser emulator in Internet Explorer 11 F12 developer tools.

You can use the Internet Explorer 11 F12 developer tools and the Fiddler tool (http://www.fiddler2.com/fiddler2/) to help

debug your application.

Skills You'll Learn

Here's what you'll learn:

NOTE:

To complete this tutorial, you need an Azure account. You can activate your MSDN subscriber benefits (/en-

us/pricing/member-offers/msdn-benefits-details/) or sign up for a free trial (/en-us/pricing/free-trial/).

(/en-us/) FREE TRIAL

(/en-

us/pricing/free-

trial/)

MY ACCOUNT (/EN-US/ACCOUNT/) PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM) Search

Features Pricing Documentation (/en-us/documentation/) Downloads (/en-us/downloads/)

Add-ons (/en-us/gallery/store/) Community Support

Page 1 of 24.NET ASP.NET MVC 5 mobile web site - Azure tutorials

7/10/2014http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m...

How to use Visual Studio 2013 to publish your Web application directly to a Windows Azure Website.

How to create mobile-specific views to target specific mobile browsers, such as the iPhone and Android

How to create responsive views (views that respond to different browsers across devices)

Set up the development environmentSet up your development environment by installing the Azure SDK for the .NET Framework.

1. To install the Azure SDK for .NET, click the link below. If you don't have Visual Studio 2013 installed yet, it will be installed

by the link. This tutorial requires Visual Studio 2013. Azure SDK for Visual Studio 2013 (http://go.microsoft.com/fwlink/p/?

linkid=323510&clcid=0x409)

2. In the Web Platform Installer window, click Install and proceed with the installation.

You will also need a mobile browser emulator. Any of the following will work:

Browser Emulator in Internet Explorer 11 F12 developer tools (http://msdn.microsoft.com/en-us/library/ie/dn255001.aspx)

(used in all mobile browser screenshots). It has user agent string presets for Windows Phone 8, Windows Phone 7, and

Apple iPad.

Browser Emulator in Google Chrome DevTools (https://developers.google.com/chrome-developer-tools/docs/mobile-

emulation). It contains presets for numerous Android devices, as well as Apple iPhone, Apple iPad, and Amazon Kindle Fire.

It also emulates touch events.

Opera Mobile Emulator (http://www.opera.com/developer/tools/mobile/)

Visual Studio projects with C# source code are available to accompany this topic:

Starter project download (http://go.microsoft.com/fwlink/?linkid=398780&clcid=0x409)

Completed project download (http://go.microsoft.com/fwlink/?linkid=398781&clcid=0x409)

Steps in this tutorial Deploy the starter project to a Windows Azure Website

Bootstrap CSS Framework

Override the Views, Layouts, and Partial Views

Improve the Speakers List

Improve the Tags List

Improve the Dates List

Improve the SessionsTable View


(/en-

us/pricing/free-

trial/)






Improve the SessionByCode View

Deploy the starter project to a Windows Azure Website

1. Download the conference-listing application starter project (http://go.microsoft.com/fwlink/?

linkid=398780&clcid=0x409).

2. Then in Windows Explorer, right-click the Mvc5Mobile.zip file and choose Properties.

3. In the Mvc5Mobile.zip Properties dialog box, choose the Unblock button. (Unblocking prevents a security warning that

occurs when you try to use a .zip file that you've downloaded from the web.)

4. Right-click the Mvc5Mobile.zip file and select Extract All to unzip the file.

5. In Visual Studio, open the Mvc5Mobile.sln file.

6. In Solution Explorer, right-click the project and click Publish.

7. In Publish Web, click Windows Azure Web Sites.

8. Click Sign in.


(/en-

us/pricing/free-

trial/)






9. Type your Windows Azure username and click Continue.

10. Type your password and click Sign in.


(/en-

us/pricing/free-

trial/)






11. The Select Existing Web Site dialog should now show you as signed in. Click New.

12. In the Site name field, specify a unique site name prefix. Your fully-qualified site name will be .azurewebsites.net.

Also, in the Region field, select a region. Then, click Create.


(/en-

us/pricing/free-

trial/)






13. The Publish Web dialog will be filled with the site settings for your new Website. Click Publish.

Once Visual Studio finishes publishing the starter project to the Windows Azure Website, the desktop browser opens to

display the live Website.

14. Start your mobile browser emulator, copy the URL for the conference application (.azurewebsites.net) into the emulator,

and then click the top-right button and select Browse by tag. If you are using Internet Explorer 11 as the default browser,

you just need to type F12, then Ctrl+8, and then change the browser profile to Windows Phone. The image below

shows the AllTags view in portrait mode (from choosing Browse by tag).


(/en-

us/pricing/free-

trial/)






The display is very readable on a mobile device. You can also already see some of the visual effects applied by the Bootstrap

CSS framework. Click the ASP.NET link.

The ASP.NET tag view is zoom-fitted to the screen, which Bootstrap does for you automatically. However, you can improve this

view to better suit the mobile browser. For example, the Date column is difficult to read. Later in the tutorial you'll change the

AllTags view to make it mobile-friendly.

Bootstrap CSS FrameworkNew in the MVC 5 template is built-in Bootstrap support. You have already seen how it immediately improves the different

views in your application. For example, the navigation bar at the top is automatically collapsible when the browser width is

smaller. On the desktop browser, try resizing the browser window and see how the navigation bar changes its look and feel.

This is the responsive web design that is built into Bootstrap.

To see how the Web app would look without Bootstrap, open App_Start\BundleConfig.cs and comment out the lines that

contain bootstrap.js and bootstrap.css. The following code shows the last two statements of the RegisterBundles method

after the change:

NOTE:

While you can debug your MVC 5 application from within Visual Studio, you can publish your Website to Windows

Azure again to verify the live site directly from your mobile browser or a browser emulator.


(/en-

us/pricing/free-

trial/)






bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

"~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(

//"~/Content/bootstrap.css",

"~/Content/site.css"));

Press Ctrl+F5 to run the application.

Observe that the collapsible navigation bar is now just an ordinary unordered list. Click Browse by tag again, then click

ASP.NET. In the mobile emulator view, you can see now that it is no longer zoom-fitted to the screen, and you must scroll

sideways in order to see the right side of the table.

Undo your changes and refresh the mobile browser to verify that the mobile-friendly display has been restored.

Bootstrap is not specific to ASP.NET MVC 5, and you can take advantage of these features in any web application. But it is now

built into the ASP.NET MVC 5 project template, so that your MVC 5 Web application can take advantage of Bootstrap by

default.

For more information about Bootstrap, go to the Bootstrap (http://getbootstrap.com/) site.

In the next section you'll see how to provide mobile-browser specific views.

Override the Views, Layouts, and Partial ViewsYou can override any view (including layouts and partial views) for mobile browsers in general, for an individual mobile

browser, or for any specific browser. To provide a mobile-specific view, you can copy a view file and add .Mobile to the file

name. For example, to create a mobile Index view, you can copy Views\Home\Index.cshtml to

Views\Home\Index.Mobile.cshtml.

In this section, you'll create a mobile-specific layout file.

To start, copy Views\Shared\_Layout.cshtml to Views\Shared\_Layout.Mobile.cshtml. Open _Layout.Mobile.cshtml and change

the title from MVC5 Application to MVC5 Application (Mobile).

In each Html.ActionLink call for the navigation bar, remove "Browse by" in each link ActionLink. The following code shows

the completed tag of the mobile layout file.

@Html.ActionLink("Home", "Index", "Home")

@Html.ActionLink("Date", "AllDates", "Home")

@Html.ActionLink("Speaker", "AllSpeakers", "Home")

@Html.ActionLink("Tag", "AllTags", "Home")

Copy the Views\Home\AllTags.cshtml file to Views\Home\AllTags.Mobile.cshtml. Open the new file and change the

element from "Tags" to "Tags (M)":


(/en-

us/pricing/free-

trial/)






Tags (M)

Browse to the tags page using a desktop browser and using mobile browser emulator. The mobile browser emulator shows

the two changes you made (the title from _Layout.Mobile.cshtml and the title from AllTags.Mobile.cshtml).

In contrast, the desktop display has not changed (with titles from from _Layout.cshtml and AllTags.cshtml).

Create Browser-Specific ViewsIn addition to mobile-specific and desktop-specific views, you can create views for an individual browser. For example, you can

create views that are specifically for the iPhone or the Android browser. In this section, you'll create a layout for the iPhone

browser and an iPhone version of the AllTags view.

Open the Global.asax file and add the following code to the bottom of the Application_Start method.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")

{

ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf

("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)

});

This code defines a new display mode named "iPhone" that will be matched against each incoming request. If the incoming

request matches the condition you defined (that is, if the user agent contains the string "iPhone"), ASP.NET MVC will look for

views whose name contains the "iPhone" suffix.


(/en-

us/pricing/free-

trial/)






In the code, right-click DefaultDisplayMode, choose Resolve, and then choose using System.Web.WebPages;. This

adds a reference to the System.Web.WebPages namespace, which is where the DisplayModeProvider and

DefaultDisplayMode types are defined.

Alternatively, you can just manually add the following line to the using section of the file.

using System.Web.WebPages;

Save the changes. Copy the Views\Shared\_Layout.Mobile.cshtml file to Views\Shared\_Layout.iPhone.cshtml. Open the new

file and then change the title from MVC5 Application (Mobile) to MVC5 Application (iPhone).

Copy the Views\Home\AllTags.Mobile.cshtml file to Views\Home\AllTags.iPhone.cshtml. In the new file, change the

element from "Tags (M)" to "Tags (iPhone)".

Run the application. Run a mobile browser emulator, make sure its user agent is set to "iPhone", and browse to the AllTags

view. If you are using the emulator in Internet Explorer 11 F12 developer tools, configure emulation to the following:

Browser profile = Windows Phone

User agent string = Custom

Custom string = Apple-iPhone5C1/1001.525

The following screenshot shows the AllTags view rendered in the emulator in Internet Explorer 11 F12 developer tools with the

custom user agent string (this is an iPhone 5C user agent string).

NOTE:

argument to 0 (insert at the top of the list) to make sure that the browser-specific mode takes precedence over the

mobile template (*.Mobile.cshtml). If the mobile template is at the top of the list instead, it will be selected over

your intended display mode (the first match wins, and the mobile template matches all mobile browsers).


(/en-

us/pricing/free-

trial/)






In the mobile browser, select the Speakers link. Because there's not a mobile view (AllSpeakers.Mobile.cshtml), the default

speakers view (AllSpeakers.cshtml) is rendered using the mobile layout view (_Layout.Mobile.cshtml). As shown below, the title

MVC5 Application (Mobile) is defined in _Layout.Mobile.cshtml.

You can globally disable a default (non-mobile) view from rendering inside a mobile layout by setting

RequireConsistentDisplayMode to true in the Views\_ViewStart.cshtml file, like this:

@{

Layout = "~/Views/Shared/_Layout.cshtml";

DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;

}

When RequireConsistentDisplayMode is set to true, the mobile layout (_Layout.Mobile.cshtml) is used only for mobile

views (i.e. when the view file is of the form ViewName.Mobile.cshtml). You might want to set

RequireConsistentDisplayMode to true if your mobile layout doesn't work well with your non-mobile views. The

screenshot below shows how the Speakers page renders when RequireConsistentDisplayMode is set to true (without

the string "(Mobile)" in the navigational bar at the top).


(/en-

us/pricing/free-

trial/)






You can disable consistent display mode in a specific view by setting RequireConsistentDisplayMode to false in the

view file. The following markup in the Views\Home\AllSpeakers.cshtml file sets RequireConsistentDisplayMode to

false:

@model IEnumerable

@{

ViewBag.Title = "All speakers";

DisplayModeProvider.Instance.RequireConsistentDisplayMode = false;

}

In this section we've seen how to create mobile layouts and views and how to create layouts and views for specific devices

such as the iPhone. However, the main advantage of the Bootstrap CSS framework is the responsive layout, which means that

a single stylesheet can be applied across desktop, phone, and tablet browsers to create a consistent look and feel. In the next

section you'll see how to leverage Bootstrap to create mobile-friendly views.

Improve the Speakers ListAs you just saw, the Speakers view is readable, but the links are small and are difficult to tap on a mobile device. In this

section, you'll make the AllSpeakers view mobile-friendly, which displays large, easy-to-tap links and contains a search box to

quickly find speakers.

You can use the Bootstrap linked list group (http://getbootstrap.com/components/#list-group-linked) styling to improve the

Speakers view. In Views\Home\AllSpeakers.cshtml, replace the contents of the Razor file with the code below.

@model IEnumerable

@{

ViewBag.Title = "All Speakers";

}

Speakers

@foreach (var speaker in Model)

{

@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker }, new { @class =

"list-group-item" })

}

The class="list-group" attribute in the tag applies the Bootstrap list styling, and the class="input-group-

item" attribute applies Bootstrap list item styling to each link.

Refresh the mobile browser. The updated view looks like this:


(/en-

us/pricing/free-

trial/)






The Bootstrap linked list group (http://getbootstrap.com/components/#list-group-linked) styling makes the entire box for

each link clickable, which is a much better user experience. Switch to the desktop view and observe the consistent look and

feel.

Although the mobile browser view has improved, it's difficult to navigate the long list of speakers. Bootstrap doesn't provide a

search filter functionality out-of-the-box, but you can add it with a few lines of code. You will first add a search box to the

view, then hook up with the JavaScript code for the filter function. In Views\Home\AllSpeakers.cshtml, add a tag just

after the tag, as shown below:


(/en-

us/pricing/free-

trial/)






@model IEnumerable

@{

ViewBag.Title = "All Speakers";

}

Speakers

@foreach (var speaker in Model)

{

@Html.ActionLink(speaker,

"SessionsBySpeaker",

new { speaker },

new { @class = "list-group-item" })

}

Notice that the and tags both have the Bootstrap styles applied to them. The element adds a

Bootstrap glyphicon (http://getbootstrap.com/components/#glyphicons) to the search box.

In the Scripts folder, add a JavaScript file called filter.js. Open the file and paste the following code into it:

$(function () {

// reset the search form when the page loads

$("form").each(function () {

this.reset();

});

// wire up the events to the element for search/filter

$("input").bind("keyup change", function () {

var searchtxt = this.value.toLowerCase();

var items = $(".list-group-item");

// show all speakers that begin with the typed text and hide others

for (var i = 0; i < items.length; i++) {

var val = items[i].text.toLowerCase();

val = val.substring(0, searchtxt.length);

if (val == searchtxt) {

$(items[i]).show();

}

else {

$(items[i]).hide();

}

}

});

});

You also need to include filter.js in your registered bundles. Open App_Start\BundleConfig.cs and change the first bundles.

Change the first bundles.Add statement (for the jquery bundle) to include Scripts\filter.js, as follows:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-{version}.js",

"~/Scripts/filter.js"));


(/en-

us/pricing/free-

trial/)






The jquery bundle is already rendered by the default _Layout view. Later, you can utilize the same JavaScript code to apply the

Refresh the mobile browser and go to the AllSpeakers view. In the search box, type "sc". The speakers list should now be

filtered according to your search string.

Improve the Tags ListLike the Speakers view, the Tags view is readable, but the links are small and difficult to tap on a mobile device. You can fix the

Tags view the same way you fix the Speakers view, if you use the code changes described earlier, but with the following

Html.ActionLink method syntax in Views\Home\AllTags.cshtml:

@Html.ActionLink(tag,

"SessionsByTag",

new { tag },


The refreshed desktop browser looks as follows:

And the refreshed mobile browser looks as follows:


(/en-

us/pricing/free-

trial/)






Improve the Dates ListYou can improve the Dates view like you improved the Speakers and Tags views if you use the code changes described earlier,

but with the following Html.ActionLink method syntax in Views\Home\AllDates.cshtml:

@Html.ActionLink(date.ToString("ddd, MMM dd, h:mm tt"),

"SessionsByDate",

new { date },


You will get a refreshed mobile browser view like this:

You can further improve the Dates view by organizing the date-time values by date. This can be done with the Bootstrap

panels (http://getbootstrap.com/components/#panels) styling. Replace the contents of the Views\Home\AllDates.cshtml file

with the following code:

NOTE:

If you notice that the original list formatting is still there in the mobile browser and wonder what happened to your

nice Bootstrap styling, this is an artifact of your earlier action to create mobile specific views. However, now that you

are using the Bootstrap CSS framework to create a responsive web design, go head and remove these mobile-

specific views and the mobile-specific layout views. Once you have done so, the refreshed mobile browser will show

the Bootstrap styling.


(/en-

us/pricing/free-

trial/)






@model IEnumerable

@{

ViewBag.Title = "All Dates";

}

Dates

@foreach (var dategroup in Model.GroupBy(x=>x.Date))

{

@dategroup.Key.ToString("ddd, MMM dd")

@foreach (var time in dategroup)

{

@Html.ActionLink(time.ToString("h:mm tt"),

"SessionsByDate",

new { time },


}

}

This code creates a separate tag for each distinct date in the list, and uses the

linked list group (http://getbootstrap.com/components/#list-group-linked) for the respective links as before. Here's what the

mobile browser looks like when this code runs:

Switch to the desktop browser. Again, note the consistent look.


(/en-

us/pricing/free-

trial/)






Improve the SessionsTable ViewIn this section, you'll make the SessionsTable view more mobile-friendly. This change is more extensive the previous changes.

In the mobile browser, tap the Tag button, then enter asp in the search box.

Tap the ASP.NET link.


(/en-

us/pricing/free-

trial/)






As you can see, the display is formatted as a table, which is currently designed to be viewed in the desktop browser. However,

it's a little bit difficult to read on a mobile browser. To fix this, open Views\Home\SessionsTable.cshtml and then replace the

contents of the file with the following code:

@model IEnumerable

@ViewBag.Title

@foreach (var session in Model)

{

@Html.ActionLink(session.Title,

"SessionByCode",

new { session.Code },

new { @class="list-group-item active" })

@Html.Partial("_SpeakersLinks", session)

@session.DateText

@Html.Partial("_TagsLinks", session)

}

The code does 3 things:

uses the Bootstrap custom linked list group (http://getbootstrap.com/components/#list-group-custom-content) to format

the session information vertically, so that all this information is readable on a mobile browser (using classes such as list-

group-item-text)

applies the grid system (http://getbootstrap.com/css/#grid) to the layout, so that the session items flow horizontally in the

desktop browser and vertically in the mobile browser (using the col-md-4 class)


(/en-

us/pricing/free-

trial/)






uses the responsive utilities (http://getbootstrap.com/css/#responsive-utilities) to hide the session tags when viewed in the

You can also tap a title link to go to the respective session. The image below reflects the code changes.

The Bootstrap grid system that you applied automatically arranges the sessions vertically in the mobile browser. Also, notice

that the tags are not shown. Switch to the desktop browser.

In the desktop browser, notice that the tags are now displayed. Also, you can see that the Bootstrap grid system you applied

arranges the session items in two columns. If you enlarge the browser, you will see that the arrangement changes to three

columns.

Improve the SessionByCode ViewFinally, you'll fix the SessionByCode view to make it mobile-friendly.

In the mobile browser, tap the Tag button, then enter asp in the search box.


(/en-

us/pricing/free-

trial/)






Tap the ASP.NET link. Sessions for the ASP.NET tag are displayed.

Choose the Building a Single Page Application with ASP.NET and AngularJS link.

The default desktop view is fine, but you can improve the look easily by using some Bootstrap GUI components.

Open Views\Home\SessionByCode.cshtml and replace the contents with the following markup:


(/en-

us/pricing/free-

trial/)






@model Mvc5Mobile.Models.Session

@{

ViewBag.Title = "Session details";

}

@Model.Title (@Model.Code)

@Model.DateText in @Model.Room

Speakers

@foreach (var speaker in Model.Speakers)

{

@Html.ActionLink(speaker,

"SessionsBySpeaker",

new { speaker },

new { @class="panel-body" })

}

@Model.Abstract

Tags

@foreach (var tag in Model.Tags)

{

@Html.ActionLink(tag,

"SessionsByTag",

new { tag },

new { @class = "panel-body" })

}

The new markup uses Bootstrap panels styling to improve the mobile view.

Refresh the mobile browser. The following image reflects the code changes that you just made:

Wrap Up and Review


(/en-

us/pricing/free-

trial/)






This tutorial has shown you how to use ASP.NET MVC 5 to develop mobile-friendly Web applications. These include:

Use Bootstrap to create responsive web layout in your MVC 5 application

Override layout, views, and partial views, both globally and for an individual view

Control layout and partial override enforcement using the RequireConsistentDisplayMode property

Create views that target specific browsers, such as the iPhone browser

Apply Boostrap styling in Razor code

See Also Bootstrap (http://getbootstrap.com/) site

Official Bootstrap Blog (http://blog.getbootstrap.com/)

Twitter Bootstrap Tutorial from Tutorial Republic (http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/)

The Bootstrap Playground (http://www.bootply.com/)

W3C Recommendation Mobile Web Application Best Practices (http://www.w3.org/TR/mwabp/)

W3C Candidate Recommendation for media queries (http://www.w3.org/TR/css3-mediaqueries/)

Contribute to this article

Want to edit or suggest changes to this content? You can edit and submit changes to this article

(https://github.com/WindowsAzure/azure-content/blob/master/articles/web-sites-dotnet-deploy-aspnet-mvc-

mobile-app.md) using GitHub.

11 Comments

Jeff Maslo

@Dave

I had the same issue. Mine seems to have been caused by hiding the file with the '.hide' extension. That

set the file property 'Build Action' to 'None'. When I removed the '.hide' extension later, it didn't set the

'Build Action' back to 'Content'. Manually doing that through the Properties panel fixed the issue.

Dave

Let me add my thanks for the tutorial! But I have a problem. The All Tags screen on the emulator works

fine under localhost but when I publish to Azure the All Tags screen is not well-formatted on the emulator

nor does it have the filter that the other screens have (they all work fine on Azure) . Here's the code for

AllTags.Mobile.cshtml:

@model IEnumerable

@{

ViewBag.Title = "All tags";

}

@foreach(var tag in Model) {


(/en-

us/pricing/free-

trial/)






Go Social

Facebook

(http://go.microsoft.com/fwlink/?


Twitter



Rss



Newsletter



Microsoft Azure (/en-us/)

Features (/en-us/solutions/)

Services (/en-us/services/)

Regions (/en-us/regions/)

Case Studies (/en-us/case-

studies/)

Pricing (/en-us/pricing/overview/)

Calculator (/en-

us/pricing/calculator/)

Documentation (/en-

us/documentation/)

Downloads (/en-us/downloads/?

sdk=net)

Add-ons (/en-

us/gallery/store/overview/)

Microsoft Azure in China

(http://windowsazure.cn/zh-cn/)

Community



Blogs (/blog/)

Service Updates (/en-us/updates/)

Forums (/en-us/support/forums/)

Events (/en-

us/community/events/)

Support (/en-

us/support/options/)

Forums (/en-us/support/forums/)

Service Dashboard

(http://status.azure.com)

Support (/en-us/support/options/)

Account

(https://account.windowsazure.com)

Subscriptions

(https://account.windowsazure.com/subscriptions/)

Profile

(https://account.windowsazure.com/profile/)

Preview Features (/en-

us/services/preview/)

Management Portal

(https://manage.windowsazure.com/)

Trust Center (/en-

us/support/trust-center/)

Security (/en-us/support/trust-

center/security/)

Privacy (/en-us/support/trust-

center/privacy/)

Compliance (/en-

us/support/trust-

center/compliance/)

Hello from Seattle.

Contact Us (http://support.microsoft.com/contactus/?ws=mscom)

Trademarks (http://go.microsoft.com/fwlink/p/?linkid=222682&clcid=0x409)

Privacy & Cookies (http://go.microsoft.com/fwlink/p/?linkid=131004&clcid=0x409) Feedback (http://feedback.azure.com/)

English USD (http://www.microsoft.com)

2014 Microsoft


(/en-

us/pricing/free-

trial/)






ASP.Net Mvc 5 Mobile

Documents

mobile web application

azure sdk

mobile browser emulator

azure account

free trial enuspricingfree

windows azure website

mobile browser screenshots

mobile features