Rendering ASP.NET Web Pages (Razor) Sites for Mobile Devices
This article describes how to create pages in an ASP.NET Web Pages (Razor) site that will render appropriately on mobile devices.
What you’ll learn:
- How to use a naming convention to specify that a page is designed specifically for mobile devices.
Software versions used in the tutorial
- ASP.NET Web Pages (Razor) 3
This tutorial also works with ASP.NET Web Pages 2.
ASP.NET Web Pages lets you create custom displays for rendering content on mobile or other devices.
The simplest way to create device-specific page in an ASP.NET Web Pages site is by using a file-naming pattern like this: FileName.Mobile.cshtml. You can create two versions of a page (for example, one named MyFile.cshtml and one named MyFile.Mobile.cshtml). At run time, when a mobile device requests MyFile.cshtml, ASP.NET renders the content from MyFile.Mobile.cshtml. Otherwise, MyFile.cshtml is rendered.
The following example shows how to enable mobile rendering by adding a content page for mobile devices. Page1.cshtml contains content plus a navigation sidebar. Page1.Mobile.cshtml contains the same content, but omits the sidebar.
In an ASP.NET Web Pages site, create a file named Page1.cshtml and replace the current content with following markup.
[!code-htmlMain]1: <!DOCTYPE html>
2:3: <html lang="en">
4: <head>
5: <meta charset="utf-8" />
6: <title></title>
7: <style type="text/css">
8: #navigation {9: position: absolute;10: top: 0;11: left: 0;12: width: 10em;13: }14: #content {15: margin-left: 13em;16: margin-right: 10em;17: }18: </style>
19: </head>
20: <body>
21: <div id="navigation">
22: <h3>Related Sites</h3>
23: <ul>
24: <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
25: <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
26: <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
27: </ul>
28: </div>
29: <div id="content">
30: <h1>Lorem ipsum dolor</h1>
31: <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
32: eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.33: At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,34: no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit35: amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut36: labore et dolore magna aliquyam erat, sed diam voluptua. </p>
37: <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
38: gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum39: dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt40: ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam41: et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata42: sanctus est Lorem ipsum dolor sit amet.</p>
43: </div>
44: </body>
45: </html>
Create a file named Page1.Mobile.cshtml and replace the existing content with the following markup. Notice that the mobile version of the page omits the navigation section for better rendering on a smaller screen.
[!code-htmlMain]1: <!DOCTYPE html>
2:3: <html lang="en">
4: <head>
5: <meta charset="utf-8" />
6: <title></title>
7: <style type="text/css">
8: #content {9: margin-left: 2em;10: margin-right: 5em;11: }12: </style>
13: </head>
14: <body>
15: <div id="content">
16: <h1>Lorem ipsum dolor</h1>
17: <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
18: eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.19: At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,20: no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit21: amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut22: labore et dolore magna aliquyam erat, sed diam voluptua. </p>
23: <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
24: gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum25: dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt26: ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam27: et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata28: sanctus est Lorem ipsum dolor sit amet.</p>
29: </div>
30: </body>
31: </html>
- Run a desktop browser and browse to Page1.cshtml.
Run a mobile browser (or a mobile device emulator) and browse to Page1.cshtml. (Notice that you do not include .mobile. as part of the URL.) Even though the request is to Page1.cshtml, ASP.NET renders Page1.Mobile.cshtml.
mobilesites-2
[!NOTE] To test mobile pages, you can use a mobile device simulator that runs on a desktop computer. This tool lets you test web pages as they would look on mobile devices (that is, typically with a much smaller display area). One example of a simulator is the User Agent Switcher add-on for Mozilla Firefox, which lets you emulate various mobile browsers from a desktop version of Firefox.
)
|
|