Beruflich Dokumente
Kultur Dokumente
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
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/).
You can use the Internet Explorer 11 F12 developer tools and the Fiddler tool (http://www.fiddler2.com/fiddler2/) to help
debug your application.
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
Pricing
(/en-us/documentation/)
Downloads (/en-us/downloads/)
Set
upDocumentation
the development
environment
Add-ons (/en-us/gallery/store/)
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)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Page 3 of 24
Search
FREE TRIAL
(/enFeatures
Pricing
Documentation (/en-us/documentation/)
Downloads (/en-us/downloads/)
us/pricing/free2. Then in Windows Explorer, right-click the Mvc5Mobile.zip file and choose Properties.
Add-ons (/en-us/gallery/store/)
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.
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 4 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 5 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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.
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 6 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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).
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 7 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
Page 8 of 24
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
"~/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/)
Downloads (/en-us/downloads/)
Add-ons (/en-us/gallery/store/)
Community
Support
FREE TRIAL
(/enus/pricing/freetrial/)
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.
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)":
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
<h2>Tags (M)</h2>
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
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
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
In contrast, the desktop display has not changed (with titles from from _Layout.cshtml and AllTags.cshtml).
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
NOTE:
(/en-us/)
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
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
Documentation (/en-us/documentation/)
Downloads (/en-us/downloads/)
us/pricing/freeIn the code, right-click DefaultDisplayMode, choose Resolve, and then choose using System.Web.WebPages;. This
Add-ons (/en-us/gallery/store/)
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).
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).
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Page 11 of 24
Search
FREE TRIAL
Features
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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).
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Page 12 of 24
Search
FREE TRIAL
Features
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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.
Speakers view. In Views\Home\AllSpeakers.cshtml, replace the contents of the Razor file with the code below.
@model IEnumerable<string>
@{
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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 13 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Support
Downloads (/en-us/downloads/)
(/enus/pricing/freetrial/)
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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
@model IEnumerable<string>
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/) @{
Page 14 of 24
Search
FREE TRIAL
ViewBag.Title = "All Speakers";
}
Features <h2>Speakers</h2>
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
<form class="input-group">
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
Page 15 of 24
TRIAL
Features
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
Page 16 of 24
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/freetrial/)
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.
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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
@model IEnumerable<DateTime>
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/) @{
Page 17 of 24
Search
FREE TRIAL
ViewBag.Title = "All Dates";
}
Features <h2>Dates</h2>
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
{
<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 },
new { @class = "list-group-item" })
}
</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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 18 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/)
Features
Page 19 of 24
Search
FREE TRIAL
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
(/enus/pricing/freetrial/)
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">
<div class="list-group">
@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)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
Page 20 of 24
Features
Pricing
Documentation (/en-us/documentation/)
Add-ons (/en-us/gallery/store/)
Community
Downloads (/en-us/downloads/)
Support
FREE TRIAL
(/enus/pricing/freetrial/)
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.
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
Page 21 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/freetrial/)
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:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
@model Mvc5Mobile.Models.Session
MY ACCOUNT (/EN-US/ACCOUNT/)
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
(/en-us/) @{
Page 22 of 24
Search
FREE TRIAL
ViewBag.Title = "Session details";
}
<h3>@Model.Title (@Model.Code)</h3>
Features <p>
Pricing
Documentation (/en-us/documentation/)
Downloads (/en-us/downloads/)
<strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
Add-ons (/en-us/gallery/store/)
</p>
Community
Support
(/enus/pricing/freetrial/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
Page 23 of 24
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,
Add-ons (/en-us/gallery/store/)
Community
Supportsuch as the iPhone browser
trial/)
Override layout, views, and partial views, both globally and for an individual view
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/)
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<string>
@{
ViewBag.Title = "All tags";
}
<ul data-role="listview" data-filter="true">
@foreach(var tag in Model) {
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014
MY ACCOUNT (/EN-US/ACCOUNT/)
Page 24 of 24
PORTAL (HTTPS://MANAGE.WINDOWSAZURE.COM)
Search
(/en-us/)
FREE TRIAL
Go Social
Features
Community
Features (/en-us/solutions/)
(http://go.microsoft.com/fwlink/? (https://account.windowsazure.com)
(/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
linkid=394285&clcid=0x409)
Pricing
Documentation (/en-us/documentation/)
(/en-us/downloads/)
Regions (/en-us/regions/)
(http://go.microsoft.com/fwlink/?
Add-ons (/en-us/gallery/store/)
Community
Support
Blogs (/blog/)
Calculator (/en-
us/services/preview/)
us/pricing/calculator/)
(http://go.microsoft.com/fwlink/?
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/)
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/)
linkid=306392&clcid=0x409)
Microsoft Azure in China
(http://windowsazure.cn/zh-cn/)
Newsletter
(http://go.microsoft.com/fwlink/?
us/support/trust-
linkid=306393&clcid=0x409)
center/compliance/)
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/)
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-deploy-aspnet-m... 7/10/2014