MVC 5 Mobile

.NET ASP.
NET MVC 5 mobile web site - Azure tutorials
MY ACCOUNT (/EN-US/ACCOUNT/)
Page 1 of 24
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
Search
(/en-us/)
Features
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freeLike 154
Tweet
trial/) 35
Discover more resources for these services: Web Sites (/en-us/documentation/services/web-sites/)

Discover more resources: Compute (/en-us/develop/net/compute/) Data Services (/en-us/develop/net/data/)
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 Sites
By 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.
NOTE:
To complete this tutorial, you need an Azure account. You can activate your MSDN subscriber benefits (/enus/pricing/member-offers/msdn-benefits-details/) or sign up for a free trial (/en-us/pricing/free-trial/).
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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
.NET ASP.NET MVC 5 mobile web site - Azure tutorials
How to use Visual Studio 2013

publish
your Web application
directly
to a Windows Azure Website.
MY to
ACCOUNT
(/EN-US/ACCOUNT/)
PORTAL
(HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
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)
Features
Pricing
(/en-us/documentation/)
Set
upDocumentation
the development
environment
Community
Support
Set up your development environment by installing the Azure SDK for the .NET Framework.
Page 2 of 24
Search
FREE TRIAL
(/enus/pricing/freetrial/)
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/mobileemulation). 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
Improve the SessionByCode View

(/en-us/)
Deploy the starter project to a Windows Azure Website
Page 3 of 24
Search
FREE TRIAL
(/enFeatures
Pricing
us/pricing/free2. Then in Windows Explorer, right-click the Mvc5Mobile.zip file and choose Properties.
Community
Support
trial/)
3. In the Mvc5Mobile.zip Properties dialog box, choose the Unblock button. (Unblocking prevents a security warning that
1. Download the conference-listing application starter project (http://go.microsoft.com/fwlink/?
linkid=398780&clcid=0x409).
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/)
Features
Page 4 of 24
Search
FREE TRIAL
Pricing
Community
Support
9. Type your Windows Azure username and click Continue.
10. Type your password and click Sign in.
(/en-us/)
Features
Page 5 of 24
Search
FREE TRIAL
Pricing
Community
Support
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 <prefix>.azurewebsites.net.
Also, in the Region field, select a region. Then, click Create.
(/en-us/)
Features
Page 6 of 24
Search
FREE TRIAL
Pricing
Community
Support
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/)
Features
Page 7 of 24
Search
FREE TRIAL
Pricing
Community
Support
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.
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 Framework

New 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:
Page 8 of 24
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/respond.js"));
(/en-us/)
bundles.Add(new StyleBundle("~/Content/css").Include(
Features
Search
Pricing
//"~/Content/bootstrap.css",
"~/Content/site.css"));
Documentation
(/en-us/documentation/)
Community
Press Ctrl+F5 to run the application.
Support
FREE TRIAL
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 Views

You 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 <ul class="nav navbar-nav"> tag of the mobile layout file.
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Date", "AllDates", "Home")</li>
<li>@Html.ActionLink("Speaker", "AllSpeakers", "Home")</li>
<li>@Html.ActionLink("Tag", "AllTags", "Home")</li>
</ul>
Copy the Views\Home\AllTags.cshtml file to Views\Home\AllTags.Mobile.cshtml. Open the new file and change the <h2>
element from "Tags" to "Tags (M)":
<h2>Tags (M)</h2>
Page 9 of 24
Search
shows
(/en-us/)Browse to the tags page using a desktop browser and using mobile browser emulator. The mobile browser emulatorFREE
TRIAL
the two changes you made (the title from _Layout.Mobile.cshtml and the title from AllTags.Mobile.cshtml).
Features
Pricing
Community
Support
In contrast, the desktop display has not changed (with titles from from _Layout.cshtml and AllTags.cshtml).
Create Browser-Specific Views

In 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.
NOTE:
(/en-us/)
Page 10 of 24
Search
argument to 0 (insert at the top of the list) to make sure that the browser-specific mode takes precedence overFREE
the
TRIAL
mobile template (*.Mobile.cshtml). If the mobile template is at the top of the list instead, it will be selected over
(/enFeatures
Pricing
us/pricing/freeIn the code, right-click DefaultDisplayMode, choose Resolve, and then choose using System.Web.WebPages;. This
Community
Support
trial/)
adds a reference to the System.Web.WebPages namespace, which is where the DisplayModeProvider and
your intended display mode (the first match wins, and the mobile template matches all mobile browsers).
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 <h2>
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).
(/en-us/)
Page 11 of 24
Search
FREE TRIAL
Features
Pricing
Community
Support
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/)
Page 12 of 24
Search
FREE TRIAL
Features
Pricing
Community
Support
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<string>
@{
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 List

As 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.
@{
ViewBag.Title = "All Speakers";
}
<h2>Speakers</h2>
<div class="list-group">
@foreach (var speaker in Model)
{
@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker }, new { @class =
"list-group-item" })
}
</div>
The class="list-group" attribute in the <div> tag applies the Bootstrap list styling, and the class="input-groupitem" attribute applies Bootstrap list item styling to each link.
Refresh the mobile browser. The updated view looks like this:
(/en-us/)
Features
Page 13 of 24
Search
FREE TRIAL
Pricing
Community
Support
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 <form> tag just
after the <h2> tag, as shown below:
(/en-us/) @{
Page 14 of 24
Search
FREE TRIAL
ViewBag.Title = "All Speakers";
}
Features <h2>Speakers</h2>
Pricing
Community
<form class="input-group">
Support
<span class="input-group-addon"><span class="glyphicon glyphiconsearch"></span></span>

<input type="text" class="form-control" placeholder="Search speaker">
</form>
<br />
@foreach (var speaker in Model)
{
@Html.ActionLink(speaker,
"SessionsBySpeaker",
new { speaker },
new { @class = "list-group-item" })
}
</div>
Notice that the <form> and <input> tags both have the Bootstrap styles applied to them. The <span> 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 <input> 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"));
Page 15 of 24
The jquery bundle is already rendered

by the
default _Layout view.
Later,
you can utilize the same JavaScript code
to apply the
MY ACCOUNT
(/EN-US/ACCOUNT/)
PORTAL
Search
(/en-us/)Refresh the mobile browser and go to the AllSpeakers view. In the search box, type "sc". The speakers list should nowFREE
be
TRIAL
filtered according to your search string.
Features
Pricing
Community
Support
Improve the Tags List

Like 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:
Page 16 of 24
Search
(/en-us/)
Features
FREE TRIAL
Pricing
Community
Support
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 mobilespecific views and the mobile-specific layout views. Once you have done so, the refreshed mobile browser will show
the Bootstrap styling.
Improve the Dates List

You 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:
@model IEnumerable<DateTime>
(/en-us/) @{
Page 17 of 24
Search
FREE TRIAL
ViewBag.Title = "All Dates";
}
Features <h2>Dates</h2>
Pricing
Community
Support
@foreach (var dategroup in Model.GroupBy(x=>x.Date))
{
<div class="panel panel-primary">
<div class="panel-heading">
@dategroup.Key.ToString("ddd, MMM dd")
</div>
<div class="panel-body list-group">
@foreach (var time in dategroup)
{
@Html.ActionLink(time.ToString("h:mm tt"),
"SessionsByDate",
new { time },
}
</div>
</div>
}
This code creates a separate <div class="panel panel-primary"> 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/)
Features
Page 18 of 24
Search
FREE TRIAL
Pricing
Community
Support
Improve the SessionsTable View

In 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/)
Features
Page 19 of 24
Search
FREE TRIAL
Pricing
Community
Support
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<Mvc5Mobile.Models.Session>
<h2>@ViewBag.Title</h2>
<div class="container">
<div class="row">
@foreach (var session in Model)
{
<div class="col-md-4">
@Html.ActionLink(session.Title,
"SessionByCode",
new { session.Code },
new { @class="list-group-item active" })
<div class="list-group-item">
<div class="list-group-item-text">
@Html.Partial("_SpeakersLinks", session)
</div>
<div class="list-group-item-info">
@session.DateText
</div>
<div class="list-group-item-info small hidden-xs">
@Html.Partial("_TagsLinks", session)
</div>
</div>
</div>
</div>
}
</div>
</div>
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 listgroup-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)
Page 20 of 24
uses the responsive utilities (http://getbootstrap.com/css/#responsive-utilities)

to hide the session tags when Search
viewed in the
(/en-us/)
You can also tap a title link to go to the respective session. The image below reflects the code changes.
Features
Pricing
Community
Support
FREE TRIAL
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 View

Finally, 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.
Page 21 of 24
Search
(/en-us/)
Features
FREE TRIAL
Pricing
Community
Support
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:
@model Mvc5Mobile.Models.Session
(/en-us/) @{
Page 22 of 24
Search
FREE TRIAL
ViewBag.Title = "Session details";
}
<h3>@Model.Title (@Model.Code)</h3>
Features <p>
Pricing
<strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
</p>
Community
Support

Speakers
</div>
@foreach (var speaker in Model.Speakers)
{
@Html.ActionLink(speaker,
"SessionsBySpeaker",
new { speaker },
new { @class="panel-body" })
}
</div>
<p>@Model.Abstract</p>
Tags
</div>
@foreach (var tag in Model.Tags)
{
@Html.ActionLink(tag,
"SessionsByTag",
new { tag },
new { @class = "panel-body" })
}
</div>
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
Page 23 of 24
This tutorial has shown you howMYtoACCOUNT

use ASP.NET
MVC 5 to develop
mobile-friendly
Web applications. These include:
(/EN-US/ACCOUNT/)
PORTAL
Search
(/en-us/)
Use Bootstrap to create responsive web layout in your MVC 5 application
FREE TRIAL
(/enand partial(/en-us/documentation/)
override enforcement using
the RequireConsistentDisplayMode
property us/pricing/freeFeatures Control
Pricing layout
Documentation
Downloads
(/en-us/downloads/)
Create views that target
specific browsers,
Community
Supportsuch as the iPhone browser
trial/)
Override layout, views, and partial views, both globally and for an individual view
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-mvcmobile-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:
@{
ViewBag.Title = "All tags";
}
<ul data-role="listview" data-filter="true">
@foreach(var tag in Model) {
Page 24 of 24
Search
(/en-us/)
FREE TRIAL
Go Social
Features
Microsoft Azure (/en-us/)
Community
Features (/en-us/solutions/)
(http://go.microsoft.com/fwlink/? (https://account.windowsazure.com)
Service Updates (/en-us/updates/)
(/enSubscriptions
us/pricing/free(https://account.windowsazure.com/subscriptions/)
trial/)
Profile
Forums (/en-us/support/forums/)
(https://account.windowsazure.com/profile/)
Facebook
Services (/en-us/services/) Downloads
Pricing
(/en-us/downloads/)
Regions (/en-us/regions/)
(http://go.microsoft.com/fwlink/?
Community
Support
Case Studies (/en-us/caselinkid=306390&clcid=0x409)

studies/)
Twitter
Blogs (/blog/)
Pricing (/en-us/pricing/overview/) Events (/en-
Preview Features (/en-
Calculator (/en-
us/services/preview/)
us/pricing/calculator/)
Documentation (/enlinkid=306391&clcid=0x409)
us/documentation/)
Rss
Account
us/community/events/)
Management Portal
(https://manage.windowsazure.com/)
Support (/en-
Downloads (/en-us/downloads/?
us/support/options/)
sdk=net)
Forums (/en-us/support/forums/)
Trust Center (/en-
Service Dashboard
us/support/trust-center/)
(http://status.azure.com)
Security (/en-us/support/trust-
Add-ons (/en(http://go.microsoft.com/fwlink/?
us/gallery/store/overview/)
Microsoft Azure in China
(http://windowsazure.cn/zh-cn/)
Newsletter
Support (/en-us/support/options/) center/security/)

Privacy (/en-us/support/trustcenter/privacy/)
Compliance (/en-
us/support/trust-
center/compliance/)
Hello from Seattle.
English
USD
(http://www.microsoft.com)
2014 Microsoft
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/)

MVC 5 Mobile

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MVC 5 Mobile

Uploaded by

Copyright:

Available Formats

.NET ASP.

NET MVC 5 mobile web site - Azure tutorials

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

Deploy an ASP.NET MVC 5 Mobile Web Application

What You'll Build

Skills You'll Learn

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

How to use Visual Studio 2013

Steps in this tutorial

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Improve the SessionByCode View

Deploy the starter project to a Windows Azure Website

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

8. Click Sign in.

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

9. Type your Windows Azure username and click Continue.

10. Type your password and click Sign in.

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

AllTags view to make it mobile-friendly.

Bootstrap CSS Framework

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Press Ctrl+F5 to run the application.

Override the Views, Layouts, and Partial Views

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Create Browser-Specific Views

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

DefaultDisplayMode types are defined.

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Improve the Speakers List

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

<span class="input-group-addon"><span class="glyphicon glyphiconsearch"></span></span>

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

The jquery bundle is already rendered

filtered according to your search string.

Improve the Tags List

And the refreshed mobile browser looks as follows:

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Improve the Dates List

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

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

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

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Improve the SessionsTable View

Tap the ASP.NET link.

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

uses the responsive utilities (http://getbootstrap.com/css/#responsive-utilities)

Improve the SessionByCode View

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

<div class="panel panel-primary">

Wrap Up and Review

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

This tutorial has shown you howMYtoACCOUNT

Apply Boostrap styling in Razor code

Contribute to this article

.NET ASP.NET MVC 5 mobile web site - Azure tutorials

Microsoft Azure (/en-us/)

Service Updates (/en-us/updates/)