为移动设备呈现 ASP.NET 网页 (Razor) 站点

项目
07/13/2023

本文介绍如何在 ASP.NET 网页 (Razor) 网站上创建页面，这些页面将在移动设备上正确呈现。

学习内容：

如何使用命名约定来指定页面是专为移动设备设计的。

本教程中使用的软件版本

ASP.NET 网页 (Razor) 3

本教程还适用于 ASP.NET 网页 2。

ASP.NET 网页允许你创建自定义显示器，以便在移动设备或其他设备上呈现内容。

在 ASP.NET 网页站点中创建特定于设备的页面的最简单方法是使用如下文件命名模式：FileName.Mobile.cshtml。例如，可以创建页面 (的两个版本，一个名为 MyFile.cshtml ，一个名为 MyFile.Mobile.cshtml) 。在运行时，当移动设备请求 MyFile.cshtml 时，ASP.NET 呈现 MyFile.Mobile.cshtml 中的内容。否则，将呈现 MyFile.cshtml 。

以下示例演示如何通过为移动设备添加内容页来启用移动呈现。 Page1.cshtml 包含内容和导航边栏。 Page1.Mobile.cshtml 包含相同的内容，但省略边栏。

在 ASP.NET 网页网站中，创建名为 Page1.cshtml 的文件，并将当前内容替换为以下标记。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #navigation {
                position: absolute;
                top: 0;
                left: 0;
                width: 10em;
            }
            #content {
            margin-left: 13em;
                margin-right: 10em;
            } 
        </style>
    </head>
    <body>
        <div id="navigation"> 
            <h3>Related Sites</h3>
            <ul>
                <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
                <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
                <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
            </ul>
        </div> 
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

创建名为 Page1.Mobile.cshtml 的文件，并将现有内容替换为以下标记。请注意，页面的移动版本省略导航部分，以便在较小的屏幕上更好地呈现。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #content {
            margin-left: 2em;
                margin-right: 5em;
            } 
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

运行桌面浏览器并浏览到 Page1.cshtml。
) 运行移动浏览器 (或移动设备模拟器，然后浏览到 Page1.cshtml。 (请注意，您不包括 .mobile。 作为 URL.) 即使请求是 Page1.cshtml，ASP.NET 呈现 Page1.Mobile.cshtml。

注意

若要测试移动页面，可以使用在台式计算机上运行的移动设备模拟器。此工具使你可以像在移动设备上一样测试网页， (即，通常显示区域) 要小得多。模拟器的一个示例是适用于 Mozilla Firefox 的用户代理切换器加载项，它允许你从桌面版 Firefox 模拟各种移动浏览器。

其他资源

Windows Phone Emulator

通过

为移动设备呈现 ASP.NET 网页 (Razor) 站点

本教程中使用的软件版本

其他资源

反馈

反馈

其他资源