Gewusst wie: Hinzufügen von mobilen Seiten zu Ihrer ASP.net-Web Forms/MVC-AnwendungHow To: Add Mobile Pages to Your ASP.NET Web Forms / MVC Application

Gilt fürApplies To

  • ASP.net Web Forms Version 4,0ASP.NET Web Forms version 4.0
  • ASP.NET MVC, Version 3,0ASP.NET MVC version 3.0

ZusammenfassungSummary

In diesem Thema werden verschiedene Möglichkeiten zum Verarbeiten von Seiten beschrieben, die von Ihrer ASP.net Web Forms/MVC-Anwendung für mobile Geräte optimiert werden, und es werden Architektur-und Entwurfs Probleme vorgeschlagen, die für eine große Bandbreite von Geräten zu beachten sind.This How To describes various ways to serve pages optimized for mobile devices from your ASP.NET Web Forms / MVC application, and suggests architectural and design issues to consider when targeting a broad range of devices. Außerdem wird in diesem Dokument erläutert, warum die mobilen ASP.NET-Steuerelemente von ASP.NET 2,0 bis 3,5 mittlerweile veraltet sind und einige moderne Alternativen erläutert.This document also explains why the ASP.NET Mobile Controls from ASP.NET 2.0 to 3.5 are now obsolete, and discusses some modern alternatives.

InhaltContents

  • ÜbersichtOverview
  • Architektur OptionenArchitectural options
  • Browser-und GeräteerkennungBrowser and device detection
  • Funktionsweise von ASP.net-Web Forms Anwendungen für Mobile spezifische SeitenHow ASP.NET Web Forms applications can present mobile-specific pages
  • Funktionsweise von ASP.NET MVC-Anwendungen für Mobile spezifische SeitenHow ASP.NET MVC applications can present mobile-specific pages
  • Zusätzliche RessourcenAdditional resources

Herunterladbare Codebeispiele, die die Techniken dieses Whitepaper für ASP.net Web Forms und MVC veranschaulichen, finden Sie unter Mobile Apps & Websites mit ASP.net.For downloadable code samples demonstrating this white paper's techniques for both ASP.NET Web Forms and MVC, see Mobile Apps & Sites with ASP.NET.

ÜbersichtOverview

Mobile Geräte – Smartphones, featuretelefone und Tablets – werden weiterhin als Mittel für den Zugriff auf das Web beliebter.Mobile devices – smartphones, feature phones, and tablets – continue to grow in popularity as a means to access the Web. Für viele Webentwickler und weborientierte Unternehmen bedeutet dies, dass es immer wichtiger ist, den Besuchern, die diese Geräte verwenden, eine tolle Browser Darstellung zu bieten.For many web developers and web-oriented businesses, this means it's increasingly important to provide a great browsing experience for visitors using those devices.

Wie frühere Versionen von ASP.NET Mobile Browser unterstützenHow earlier versions of ASP.NET supported mobile browsers

ASP.NET-Versionen 2,0 bis 3,5 enthalten ASP.NET Mobile-Steuerelemente: einen Satz von Server Steuerelementen für mobile Geräte in der Assembly " System. Web. Mobile. dll " und den System. Web. UI. MobileControls -Namespace.ASP.NET versions 2.0 to 3.5 included ASP.NET Mobile Controls: a set of server controls for mobile devices in the System.Web.Mobile.dll assembly and the System.Web.UI.MobileControls namespace. Die Assembly ist weiterhin in ASP.NET 4 enthalten, ist jedoch veraltet.The assembly is still included in ASP.NET 4, but it is deprecated. Entwicklern wird empfohlen, zu moderneren Ansätzen zu migrieren, wie z. b. die in diesem Whitepaper beschriebenen.Developers are advised to migrate to more modern approaches, such as those described in this paper.

Der Grund, warum ASP.NET Mobile-Steuerelemente als veraltet markiert wurden, besteht darin, dass Ihr Entwurf auf Mobiltelefone ausgerichtet ist, die ungefähr 2005 und früher üblich waren.The reason why ASP.NET Mobile Controls have been marked as obsolete is that their design is oriented around the mobile phones that were common around 2005 and earlier. Die-Steuerelemente dienen hauptsächlich zum Rendering von WML-oder cHTML-Markup (anstelle von regulärem HTML) für die WAP-Browser dieses Zeitraums.The controls are mainly designed to render WML or cHTML markup (instead of regular HTML) for the WAP browsers of that era. WAP, WML und cHTML sind jedoch für die meisten Projekte nicht mehr relevant, da HTML nun die universelle Markup Sprache für Mobile und Desktop Browser gleichermaßen geworden ist.But WAP, WML, and cHTML are no longer relevant for most projects, because HTML has now become the ubiquitous markup language for mobile and desktop browsers alike.

Die Herausforderungen der Unterstützung mobiler Geräte heuteThe challenges of supporting mobile devices today

Obwohl Mobile Browser nun nahezu universell HTML unterstützen, werden Sie bei der Erstellung hervorragend mobiler Browser Probleme trotzdem viele Probleme meistern:Even though mobile browsers now almost universally support HTML, you will still face many challenges when aiming to create great mobile browsing experiences:

  • Bildschirmgröße : Mobile Geräte variieren in der Form erheblich, und ihre Bildschirme sind häufig viel kleiner als Desktop Monitore.Screen size - Mobile devices vary dramatically in form, and their screens are often much smaller than desktop monitors. Daher müssen Sie möglicherweise vollständig verschiedene Seitenlayouts für Sie entwerfen.So, you may need to design completely different page layouts for them.
  • Eingabemethoden – einige Geräte verfügen über Keypads, von denen einige über Styluses verfügen, von denen andere Finger Eingaben verwenden.Input methods – Some devices have keypads, some have styluses, others use touch. Möglicherweise müssen Sie mehrere Navigationsmechanismen und Dateneingabe Methoden in Erwägung gezogen.You may need to consider multiple navigation mechanisms and data input methods.
  • Einhaltung von Standards – viele mobile Browser unterstützen nicht die neuesten HTML-, CSS-oder JavaScript-Standards.Standards compliance – Many mobile browsers do not support the latest HTML, CSS, or JavaScript standards.
  • Bandbreite – die Netzwerkleistung der Mobilfunkdaten variiert stark, und einige Endbenutzer sind an Tarifen, die mit Megabyte abgerechnet werden.Bandwidth – Cellular data network performance varies wildly, and some end users are on tariffs that charge by the megabyte.

Es gibt keine Lösung mit einer Größen Lösung. die Anwendung muss sich entsprechend dem Gerät, auf das zugegriffen wird, unterschiedlich ansehen und Verhalten.There's no one-size-fits-all solution; your application will have to look and behave differently according to the device accessing it. Je nachdem, welche Ebene von mobilem Support Sie benötigen, kann dies für Webentwickler eine größere Herausforderung darstellen als der Desktop "browserkriege".Depending on what level of mobile support you want, this can be a bigger challenge for web developers than the desktop "browser wars" ever was.

Entwickler, die sich zum ersten Mal mit der Unterstützung für Mobile Browser beschäftigen, sind häufig der Ansicht, dass es nur wichtig ist, die neuesten und ausgereiftesten Smartphones (z. b. Windows Phone 7, iPhone oder Android) zu unterstützen, vielleicht weil Entwickler häufig eine solche Ling.Developers approaching mobile browser support for the first time often initially think it's only important to support the latest and most sophisticated smartphones (e.g., Windows Phone 7, iPhone, or Android), perhaps because developers often personally own such devices. Kostengünstigere Telefone sind jedoch immer noch sehr beliebt, und ihre Besitzer verwenden Sie, um das Web zu durchsuchen – besonders in Ländern, in denen Mobiltelefone leichter zu erreichen sind als eine Breitbandverbindung.However, cheaper phones are still extremely popular, and their owners do use them to browse the web – especially in countries where mobile phones are easier to get than a broadband connection. Ihr Unternehmen muss entscheiden, welche Anzahl von Geräten unterstützt werden soll, indem er seine wahrscheinlichen Kunden berücksichtigt.Your business will need to decide what range of devices to support by considering its likely customers. Wenn Sie eine Online-Broschüre für eine Luxus-Health-Spa erstellen, können Sie eine geschäftliche Entscheidung treffen, dass Sie nur auf Erweiterte Smartphones abzielen. Wenn Sie ein Ticket Reservierungssystem für ein Kino erstellen, müssen Sie wahrscheinlich Besucher mit weniger leistungsfähigem Feature berücksichtigen. Ker.If you're building an online brochure for a luxury health spa, you might make a business decision only to target advanced smartphones, whereas if you're creating a ticket booking system for a cinema, you probably need to account for visitors with less powerful feature phones.

Architektur OptionenArchitectural options

Beachten Sie, dass Webentwickler im Allgemeinen drei wichtige Optionen für die Unterstützung mobiler Browser haben, bevor Sie die speziellen technischen Details von ASP.net Web Forms oder MVC kennenlernen.Before we get to the specific technical details of ASP.NET Web Forms or MVC, note that web developers in general have three main possible options for supporting mobile browsers:

  1. Do Nothing – Sie können einfach eine standardmäßige, Desktop orientierte Webanwendung erstellen und sich auf Mobile Browser stützen, um Sie auf akzeptable Weise zu gestalten.Do nothing – You can simply create a standard, desktop-oriented web application, and rely on mobile browsers to render it acceptably.

    • Vorteil: Dies ist die günstigste Option zur Implementierung und Wartung – ohne zusätzliche ArbeitAdvantage: It's the cheapest option to implement and maintain – no extra work

    • Nachteil: bietet das schlechteste Endbenutzer Verhalten:Disadvantage: Gives the worst end-user experience:

      • Die neuesten Smartphones können Ihren HTML-Code ebenso wie einen Desktop Browser Rendering, aber die Benutzer sind immer noch gezwungen, horizontal und vertikal zu zoomen und zu scrollen, um Ihre Inhalte auf einem kleinen Bildschirm zu nutzen.The latest smartphones may render your HTML just as well as a desktop browser, but users will still be forced to zoom and scroll horizontally and vertically to consume your content on a small screen. Dies ist weit von der optimalen Lösung.This is far from optimal.
      • Ältere Geräte und featuretelefone können das Markup möglicherweise nicht zufriedenstellend darstellen.Older devices and feature phones may fail to render your markup in a satisfactory way.
      • Auch auf den neuesten Tablet-Geräten (deren Bildschirme so groß wie Laptop Bildschirme sein können) sind unterschiedliche Interaktions Regeln anwendbar.Even on the latest tablet devices (whose screens can be as big as laptop screens), different interaction rules apply. Die Berührungs basierte Eingabe funktioniert am besten mit größeren Schaltflächen und Verknüpfungen, die weiter auseinander liegen, und es gibt keine Möglichkeit, mit dem Mauszeiger auf ein ausgefülltes Menü zu zeigen.Touch-based input works best with larger buttons and links spread further apart, and there's no way to hover a mouse cursor over a fly-out menu.
  2. Beheben Sie das Problem auf dem Client – durch die sorgfältige Verwendung von CSS und progressivem Verb esse rungen können Sie Markup, Stile und Skripts erstellen, die an den Browser angepasst werden, auf dem Sie ausgeführt werden.Solve the problem on the client With careful use of CSS and progressive enhancement you can create markup, styles, and scripts that adapt to whatever browser is running them. Beispielsweise können Sie mit CSS 3-Medien Abfragenein mehrspaltige Layout erstellen, das sich in einem einzelnen Spalten Layout auf Geräten befindet, deren Bildschirme schmaler als ein ausgewählter Schwellenwert sind.For example, with CSS 3 media queries, you could create a multi-column layout that turns into a single column layout on devices whose screens are narrower than a chosen threshold.

    • Vorteil: optimiert das Rendering für das jeweilige verwendete Gerät, auch für unbekannte zukünftige Geräte entsprechend dem Bildschirm und den eingegebenen Merkmalen.Advantage: Optimizes rendering for the specific device in use, even for unknown future devices according to whatever screen and input characteristics they have
    • Vorteil: Sie können auf einfache Weise serverseitige Logik für alle Gerätetypen freigeben – minimale Duplizierung von Code oder AufwandAdvantage: Easily lets you share server-side logic across all device types – minimal duplication of code or effort
    • Nachteil: Mobile Geräte unterscheiden sich so von Desktop Geräten, dass sich Ihre mobilen Seiten möglicherweise vollständig von den Desktop Seiten unterscheiden, wobei andere Informationen angezeigt werden.Disadvantage: Mobile devices are so different from desktop devices that you may really want your mobile pages to be completely different from your desktop pages, showing different information. Diese Variationen können ineffizient oder unmöglich sein, allein durch CSS zu erreichen, insbesondere bei der Interpretation von CSS-Regeln durch inkonsistente ältere Geräte.Such variations can be inefficient or impossible to achieve robustly through CSS alone, especially considering how inconsistently older devices interpret CSS rules. Dies gilt insbesondere für CSS 3-Attribute.This is particularly true of CSS 3 attributes.
    • Nachteil: bietet keine Unterstützung für unterschiedliche serverseitige Logik und Workflows für verschiedene Geräte.Disadvantage: Provides no support for varying server-side logic and workflows for different devices. Sie können z. b. einen vereinfachten Workflow zum Auschecken von Einkaufswagen für mobile Benutzer über CSS allein implementieren.You can't, for example, implement a simplified shopping cart checkout workflow for mobile users by means of CSS alone.
    • Nachteil: ineffiziente Bandbreiten Verwendung.Disadvantage: Inefficient bandwidth use. Der Server muss möglicherweise Markup und Stile übertragen, die auf alle möglichen Geräte angewendet werden, auch wenn das Zielgerät nur eine Teilmenge dieser Informationen verwendet.You server may have to transmit the markup and styles that apply to all possible devices, even though the target device will only use a subset of that information.
  3. Beheben Sie das Problem auf dem Server Wenn Ihr Server weiß, auf welches Gerät er zugreift – oder zumindest die Merkmale dieses Geräts, wie z. b. Bildschirmgröße und Eingabemethode, und ob es sich um ein mobiles Gerät handelt – kann eine andere Logik ausgeführt werden, und es kann ein anderes HTML-Markup ausgegeben werden.Solve the problem on the server If your server knows what device is accessing it – or at least the characteristics of that device, such as its screen size and input method, and whether it's a mobile device – it can run different logic and output different HTML markup.

    • Vorteil: Maximale Flexibilität.Advantage: Maximum flexibility. Es gibt keine Beschränkung, wie viel Sie die serverseitige Logik für mobile Geräte verändern oder das Markup für das gewünschte, gerätespezifische Layout optimieren können.There's no limit to how much you can vary your server-side logic for mobiles or optimize your markup for the desired, device-specific layout.
    • Vorteil: Effiziente Bandbreiten Verwendung.Advantage: Efficient bandwidth use. Sie müssen lediglich Markup-und Formatierungsinformationen übertragen, die vom Zielgerät verwendet werden.You only need to transmit the markup and styling information that the target device is going to use.
    • Nachteil: Manchmal erzwingt die Wiederholung von Aufwand oder Code (z. b. das Erstellen ähnlicher, aber etwas unterschiedlicher Kopien Ihrer Web Forms Seiten oder MVC-Ansichten).Disadvantage: Sometimes forces repetition of effort or code (e.g., making you create similar but slightly different copies of your Web Forms pages or MVC views). Wenn möglich, sollten Sie gängige Logik in eine zugrunde liegende Schicht oder einen zugrunde liegenden Dienst einbeziehen, aber dennoch müssen einige Teile Ihres UI-Codes oder Markups dupliziert und parallel gewartet werden.Where possible you will factor out common logic into an underlying layer or service, but still, some parts of your UI code or markup may have to be duplicated and then maintained in parallel.
    • Nachteil: Geräteerkennung ist nicht trivial.Disadvantage: Device detection is not trivial. Hierfür ist eine Liste oder Datenbank bekannter Gerätetypen und deren Merkmale (die möglicherweise nicht immer auf dem neuesten Stand sind) erforderlich, und es ist nicht garantiert, dass jede eingehende Anforderung genau entspricht.It requires a list or database of known device types and their characteristics (which may not always be perfectly up-to-date) and isn't guaranteed to accurately match every incoming request. In diesem Dokument werden einige Optionen und ihre Fehler zu einem späteren Zeitpunkt beschrieben.This document describes some options and their pitfalls later.

Um die besten Ergebnisse zu erzielen, werden die meisten Entwickler feststellen, dass Sie Optionen (2) und (3) kombinieren müssen.To get the best results, most developers find they need to combine options (2) and (3). Kleinere stilistische Unterschiede werden am besten auf dem Client unter Verwendung von CSS oder sogar JavaScript untergebracht, während wichtige Unterschiede von Daten, Workflows und Markup am effektivsten in Server seitigem Code implementiert werden.Minor stylistic differences are best accommodated on the client using CSS or even JavaScript, whereas major differences in data, workflow, or markup are most effectively implemented in server-side code.

Dieser Artikel konzentriert sich auf serverseitige Techniken.This paper focuses on server-side techniques

Da ASP.net Web Forms und MVC in erster Linie serverseitige Technologien sind, konzentriert sich dieses Whitepaper auf serverseitige Techniken, mit denen Sie unterschiedliche Markup-und Logik Optionen für Mobile Browser entwickeln können.Since ASP.NET Web Forms and MVC are both primarily server-side technologies, this white paper will focus on server-side techniques that let you produce different markup and logic for mobile browsers. Natürlich können Sie dies auch mit beliebigen Client seitigen Techniken (z. b. CSS 3-Medien Abfragen, progressivem JavaScript) kombinieren, aber das ist eine Frage des webentwurfs, als die ASP.net-Entwicklung.Of course, you can also combine this with any client-side technique (e.g., CSS 3 media queries, progressive-enhancement JavaScript), but that's more a matter of web design than ASP.NET development.

Browser-und GeräteerkennungBrowser and device detection

Die wichtigste Voraussetzung für alle serverseitigen Techniken zur Unterstützung mobiler Geräte ist das wissen, welches Gerät Ihr Besucher verwendet.The key prerequisite for all server-side techniques for supporting mobile devices is to know what device your visitor is using. Tatsächlich ist es sogar noch besser, den Hersteller und die Modellnummer des Geräts zu kennen und die Merkmale des Geräts zu kennen.In fact, even better than knowing the manufacturer and model number of that device is knowing the characteristics of the device. Die Merkmale können Folgendes umfassen:Characteristics may include:

  • Handelt es sich um ein mobiles Gerät?Is it a mobile device?
  • Eingabemethode (Maus/Tastatur, Toucheingabe, Tastatur, Joystick,...)Input method (mouse/keyboard, touch, keypad, joystick, …)
  • Bildschirmgröße (physisch und in Pixel)Screen size (physically and in pixels)
  • Unterstützte Medien und DatenformateSupported media and data formats
  • usw.Etc.

Es ist besser, Entscheidungen auf der Grundlage von Merkmalen als Modellnummer zu treffen, denn dann sind Sie besser für die Verarbeitung zukünftiger Geräte gerüstet.It's better to make decisions based on characteristics than model number, because then you'll be better equipped to handle future devices.

Mithilfe von ASP. Unterstützung der integrierten Browser Erkennung in netUsing ASP.NET's built-in browser detection support

ASP.net Web Forms-und MVC-Entwickler können durch Überprüfen der Eigenschaften des Request. Browser -Objekts wichtige Merkmale eines Browser-Browsers sofort ermitteln.ASP.NET Web Forms and MVC developers can immediately discover important characteristics of a visiting browser by inspecting properties of the Request.Browser object. Informationen finden Sie beispielsweise unter.For example, see

  • Request.Browser.IsMobileDeviceRequest.Browser.IsMobileDevice
  • Request.Browser.MobileDeviceManufacturer, Request.Browser.MobileDeviceModelRequest.Browser.MobileDeviceManufacturer, Request.Browser.MobileDeviceModel
  • Request.Browser.ScreenPixelsWidthRequest.Browser.ScreenPixelsWidth
  • Request.Browser.SupportsXmlHttpRequest.Browser.SupportsXmlHttp
  • ... und viele weitere…and many others

Im Hintergrund stimmt die ASP.NET-Plattform mit dem eingehenden Benutzer-Agent (UA)-HTTP-Header für reguläre Ausdrücke in einem Satz von Browser Definitions-XML-Dateien überein.Behind the scenes, the ASP.NET platform matches the incoming User-Agent (UA) HTTP header against regular expressions in a set of Browser Definition XML files. Standardmäßig enthält die Plattform Definitionen für viele gängige Mobile Geräte, und Sie können benutzerdefinierte Browser Definitions Dateien für andere Benutzer hinzufügen, die Sie erkennen möchten.By default the platform includes definitions for many common mobile devices, and you can add custom Browser Definition files for others you wish to recognize. Weitere Informationen finden Sie auf der MSDN -Seite ASP.NET Webserver-Steuerelemente und Browser Funktionen.For more details, see the MSDN page ASP.NET Web Server Controls and Browser Capabilities.

Verwenden der wurfl-Geräte Datenbank über 51Degrees.mobi FoundationUsing the WURFL device database via 51Degrees.mobi Foundation

Während ASP. Die integrierte Browser Erkennungs Unterstützung von NET ist für viele Anwendungen ausreichend. es gibt zwei Hauptfälle, in denen Sie möglicherweise nicht ausreicht:While ASP.NET's built-in browser detection support will be sufficient for many applications, there are two main cases when it might not be enough:

  • Sie möchten die neuesten Geräte erkennen(ohne manuelle Erstellung von Browser Definitions Dateien).You want to recognize the latest devices(without manually creating Browser Definition files for them). Beachten Sie, dass die Browser Definitions Dateien von .NET 4 nicht aktuell genug sind, um Windows Phone 7, Android-Telefone, Opera Mobile-Browser oder Apple iPads zu erkennen.Note that .NET 4's Browser Definition files are not recent enough to recognize Windows Phone 7, Android phones, Opera Mobile browsers, or Apple iPads.
  • Sie benötigen ausführlichere Informationen zu den Gerätefunktionen.You need more detailed information about device capabilities. Möglicherweise müssen Sie sich über die Eingabemethode eines Geräts (z. b. touchvs Keypad) oder über die Audioformate informieren, die der Browser unterstützt.You may need to know about a device's input method (e.g., touch vs keypad), or what audio formats the browser supports. Diese Informationen sind in den standardmäßigen Browser Definitions Dateien nicht verfügbar.This information isn't available in the standard Browser Definition files.

Das wurfl-Projekt ( Wireless Universal Resource File ) bietet noch viel mehr aktuelle und ausführliche Informationen zu den heute verwendeten mobilen Geräten.The Wireless Universal Resource File (WURFL) project maintains much more up-to-date and detailed information about mobile devices in use today.

Die großartige Nachricht für .NET-Entwickler ist das ASP. Die Browser Erkennungsfunktion von NET ist erweiterbar, sodass es möglich ist, diese Probleme zu beheben.The great news for .NET developers is that ASP.NET's browser detection feature is extensible, so it's possible to enhance it to overcome these problems. Beispielsweise können Sie dem Projekt die Open Source- 51Degrees.mobi Foundation -Bibliothek hinzufügen.For example, you can add the open source 51Degrees.mobi Foundation library to your project. Dabei handelt es sich um einen ASP.net IHttpModule-oder Browser Funktions Anbieter (sowohl in Web Forms-als auch in MVC-Anwendungen verwendbar), der die wurfl-Daten direkt liest und Sie an ASP bindet. Integrierter Browser Erkennungsmechanismus in net.It's an ASP.NET IHttpModule or Browser Capabilities Provider (usable on both Web Forms and MVC applications), that directly reads WURFL data and hooks it into ASP.NET's built-in browser detection mechanism. Nachdem Sie das Modul installiert haben, enthält " Request. Browser " plötzlich viel genauere und ausführlichere Informationen: Es erkennt viele der bereits erwähnten Geräte ordnungsgemäß und listet die Funktionen auf (einschließlich zusätzlicher Funktionen wie z. b. Eingabemethode).Once you've installed the module, Request.Browser will suddenly contain a lot more accurate and detailed information: it will correctly recognize many of the devices previously mentioned and list their capabilities (including additional capabilities such as input method). Weitere Informationen finden Sie in der Dokumentation des Projekts.See the project's documentation for more details.

Funktionsweise von Web Forms Anwendungen für Mobile spezifische SeitenHow Web Forms applications can present mobile-specific pages

Standardmäßig wird hier die Art, wie eine neue Web Forms Anwendung auf gängigen mobilen Geräten angezeigt wird:By default, here's how a brand new Web Forms application displays on common mobile devices:

Natürlich sieht keines der beiden Layouts sehr mobil, – diese Seite wurde für einen großen, quer orientierten Monitor entworfen, nicht für einen kleinen Hochformat orientierten Bildschirm.Clearly, neither layout looks very mobile-friendly – this page was designed for a large, landscape-oriented monitor, not for a small portrait-oriented screen. Was können Sie also tun?So what can you do about it?

Wie bereits weiter oben in diesem Artikel erläutert, gibt es viele Möglichkeiten, Ihre Seiten für mobile Geräte anzupassen.As discussed earlier in this paper, there are many ways to tailor your pages for mobile devices. Einige Techniken sind Server basiert, andere werden auf dem Client ausgeführt.Some techniques are server-based, others run on the client.

Erstellen einer mobilen-spezifischen Master SeiteCreating a mobile-specific master page

Abhängig von Ihren Anforderungen können Sie möglicherweise die gleichen Web Forms für alle Besucher verwenden, aber über zwei separate Masterseiten verfügen: eine für Desktop Besucher, eine für Besucher mobiler Besucher.Depending on your requirements, you may be able to use the same Web Forms for all visitors, but have two separate master pages: one for desktop visitors, another for mobile visitors. Dadurch haben Sie die Flexibilität, das CSS-Stylesheet oder das HTML-Markup der obersten Ebene so zu ändern, dass es für mobile Geräte geeignet ist, ohne dass Sie eine beliebige Seiten Logik duplizieren müssen.This gives you the flexibility of changing the CSS stylesheet or your top-level HTML markup to suit mobile devices, without forcing you to duplicate any page logic.

Dies ist einfach.This is easy to do. Beispielsweise können Sie einem Webformular einen PreInit-Handler wie den folgenden hinzufügen:For example, you can add a PreInit handler such as the following to a Web Form:

protected void Page_PreInit(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice)
        MasterPageFile = "~/Mobile.Master";
}

Erstellen Sie jetzt eine Master Seite mit dem Namen "Mobile. Master" im Ordner der obersten Ebene Ihrer Anwendung, die verwendet wird, wenn ein mobiles Gerät erkannt wird.Now, create a master page called Mobile.Master in the top-level folder of your application, and it will be used when a mobile device is detected. Ihre Mobile Master Seite kann bei Bedarf auf ein Mobile-spezifisches CSS-Stylesheet verweisen.Your mobile master page can reference a mobile-specific CSS stylesheet if necessary. Desktop Besucher sehen weiterhin Ihre Standard Master Seite, nicht die Mobile.Desktop visitors will still see your default master page, not the mobile one.

Erstellen unabhängiger, mobiler Web FormsCreating independent mobile-specific Web Forms

Um maximale Flexibilität zu erreichen, können Sie viel weiter gehen, als nur separate Masterseiten für verschiedene Gerätetypen zu haben.For maximum flexibility, you can go much further than just having separate master pages for different device types. Sie können zwei vollständig getrennte Sätze von Web Forms Seiten implementieren – einen Satz für Desktop Browser, einen weiteren Satz für mobile Geräte.You can implement two totally separate sets of Web Forms pages – one set for desktop browsers, another set for mobiles. Dies funktioniert am besten, wenn Sie mobilen Besuchern sehr unterschiedliche Informationen oder Workflows präsentieren möchten.This works best if you want to present very different information or workflows to mobile visitors. Im restlichen Teil dieses Abschnitts wird dieser Ansatz ausführlich beschrieben.The rest of this section describes this approach in detail.

Wenn Sie bereits über eine Web Forms Anwendung verfügen, die für Desktop Browser konzipiert ist, können Sie am einfachsten fortfahren, indem Sie in Ihrem Projekt einen Unterordner mit dem Namen "Mobile" erstellen und dort Ihre mobilen Seiten erstellen.Assuming you already have a Web Forms application designed for desktop browsers, the easiest way to proceed is to create a subfolder called "Mobile" within your project, and build your mobile pages there. Sie können eine gesamte unter Website mit eigenen Masterseiten, Stylesheets und Seiten erstellen, indem Sie dieselben Techniken verwenden, die Sie auch für andere Web Forms-Anwendungen verwenden.You can construct an entire sub-site, with its own master pages, style sheets, and pages, using all the same techniques that you'd use for any other Web Forms application. Sie müssen nicht unbedingt für jede Seite der Desktop Site eine Mobile-Entsprechung entwickeln. Sie können auswählen, welche Teilmenge der Funktionalität für Mobile Besucher sinnvoll ist.You don't necessarily need to produce a mobile equivalent for every page in your desktop site; you can choose what subset of functionality makes sense for mobile visitors.

Wenn Sie möchten, können Ihre mobilen Seiten allgemeine statische Ressourcen (z. b. Bilder, JavaScript oder CSS-Dateien) mit ihren regulären Seiten gemeinsam verwenden.Your mobile pages can share common static resources (such as images, JavaScript, or CSS files) with your regular pages if you wish. Da Ihr "mobiler" Ordner nicht als separate Anwendung gekennzeichnet ist, wenn er in IIS gehostet wird (es handelt sich lediglich um einen einfachen Unterordner von Web Forms Seiten), werden auch die gleiche Konfiguration, Sitzungsdaten und andere Infrastruktur wie Ihre Desktop Seiten verwendet.Since your "Mobile" folder will not be marked as a separate application when hosted in IIS (it's just a simple subfolder of Web Forms pages), it will also share all the same configuration, Session data, and other infrastructure as your desktop pages.

Note

Da dieser Ansatz in der Regel eine Duplizierung von Code beinhaltet (Mobile Seiten haben wahrscheinlich einige Ähnlichkeiten mit Desktop Seiten gemeinsam), ist es wichtig, dass Sie allgemeine Geschäftslogik oder Datenzugriffs Code in eine freigegebene zugrunde liegende Ebene oder einen gemeinsamen Dienst übertragen.Since this approach usually involves some duplication of code (mobile pages are likely to share some similarities with desktop pages), it's important to factor out any common business logic or data access code into a shared underlying layer or service. Andernfalls verdoppeln Sie den Aufwand für das Erstellen und Verwalten Ihrer Anwendung.Otherwise, you'll double the effort of creating and maintaining your application.

Umleiten mobiler Besucher an Ihre mobilen SeitenRedirecting mobile visitors to your mobile pages

Häufig ist es praktisch, Mobile Besucher nur bei der ersten Anforderung in ihrer Browsersitzung (und nicht bei jeder Anforderung in Ihrer Sitzung) an die mobilen Seiten umzuleiten, weil Folgendes der Fall ist:It's often convenient to redirect mobile visitors to the mobile pages only on the first request in their browsing session (and not on every request in their session), because:

  • Sie können dann auf einfache Weise mobilen Besuchern den Zugriff auf Ihre Desktop Seiten gestatten – indem Sie einfach einen Link auf der Master Seite ablegen, der zu "Desktop Version" wechselt.You can then easily allow mobile visitors to access your desktop pages if they wish – just put a link on your master page that goes to "Desktop version". Der Besucher wird nicht zurück an eine mobile Seite umgeleitet, da es sich nicht mehr um die erste Anforderung in der Sitzung handelt.The visitor won't be redirected back to a mobile page, because it's no longer the first request in their session.
  • Dadurch wird das Risiko vermieden, dass Anforderungen für dynamische Ressourcen beeinträchtigt werden, die von Desktop-und mobilen Teilen Ihrer Site gemeinsam genutzt werden (z. b. Wenn Sie über ein gängiges Webformular verfügen, das sowohl Desktop-als auch Mobile Teile Ihrer Website in einem IFRAME oder bestimmte AJAX-Handler anzeigt).It avoids the risk of interfering with requests for any dynamic resources shared between desktop and mobile parts of your site (e.g., if you have a common Web Form that both desktop and mobile parts of your site display in an IFRAME, or certain Ajax handlers)

Zu diesem Zweck können Sie die Umleitungs Logik in einer Sitzungs_Start -Methode platzieren.To do this, you can place your redirection logic in a Session_Start method. Fügen Sie z. b. der Global.asax.cs-Datei die folgende Methode hinzu:For example, add the following method to your Global.asax.cs file:

void Session_Start(object sender, EventArgs e)
{
    // Redirect mobile users to the mobile home page
    HttpRequest httpRequest = HttpContext.Current.Request;
    if (httpRequest.Browser.IsMobileDevice)
    {
        string path = httpRequest.Url.PathAndQuery;
        bool isOnMobilePage = path.StartsWith("/Mobile/", 
                               StringComparison.OrdinalIgnoreCase);
        if (!isOnMobilePage)
        {
            string redirectTo = "~/Mobile/";

            // Could also add special logic to redirect from certain 
            // recognized pages to the mobile equivalents of those 
            // pages (where they exist). For example,
            // if (HttpContext.Current.Handler is UserRegistration)
            //     redirectTo = "~/Mobile/Register.aspx";

            HttpContext.Current.Response.Redirect(redirectTo);
        }
    }
}

Konfigurieren der Formular Authentifizierung zur Berücksichtigung ihrer mobilen SeitenConfiguring Forms Authentication to respect your mobile pages

Beachten Sie, dass bei der Formular Authentifizierung bestimmte Annahmen darüber getroffen werden, wo Besucher während und nach dem Authentifizierungsprozess umgeleitet werden können:Note that Forms Authentication makes certain assumptions about where it can redirect visitors during and after the authentication process:

  • Wenn ein Benutzer authentifiziert werden muss, wird er von der Formular Authentifizierung an die Desktop Anmeldeseite umgeleitet, unabhängig davon, ob es sich um einen Desktop Benutzer oder einen mobilen Benutzer handelt (da nur ein Konzept einer Anmelde- URL verwendet wird).When a user needs to be authenticated, Forms Authentication will redirect them to your desktop login page, regardless of whether they're a desktop or mobile user (because it only has a concept of one login URL). Wenn Sie Ihre Mobile Anmeldeseite auf andere Weise formatieren möchten, müssen Sie Ihre Desktop Anmeldeseite verbessern, damit Mobile Benutzer zu einer separaten mobilen Anmeldeseite umgeleitet werden.Assuming you want to style your mobile login page differently, you need to enhance your desktop login page so that it redirects mobile users to a separate mobile login page. Fügen Sie beispielsweise den folgenden Code zu Ihrer Desktop -Anmeldeseite Code-Behind hinzu:For example, add the following code to your desktop login page code-behind:

    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Ensure that if Forms Authentication forces a mobile user 
            // to log in, we display the mobile login page
            string returnUrl = Request.QueryString["ReturnUrl"];
            if (!String.IsNullOrEmpty(returnUrl) && returnUrl.StartsWith("/Mobile/",
                                                    StringComparison.OrdinalIgnoreCase)) 
            {
                Response.Redirect("~/Mobile/Account/Login.aspx?ReturnUrl=" 
                                  + HttpUtility.UrlEncode(returnUrl));
            }
    
            RegisterHyperLink.NavigateUrl = "Register.aspx?ReturnUrl=" 
                                            + HttpUtility.UrlEncode(returnUrl);
        }
    }
    
  • Nachdem sich ein Benutzer erfolgreich angemeldet hat, leitet die Formular Authentifizierung diese standardmäßig zur Desktop Startseite um (da nur ein Konzept einer Standardseite verwendet wird).After a user successfully logs in, Forms Authentication will by default redirect them to your desktop home page (because it only has a concept of one default page). Sie müssen Ihre Mobile Anmeldeseite so erweitern, dass Sie nach einer erfolgreichen Anmeldung an die mobile Homepage umgeleitet wird.You need to enhance your mobile login page so that it redirects to the mobile home page after a successful log-in. Fügen Sie z. b. den folgenden Code zu Ihrer Mobile Login Page Code-Behind hinzu:For example, add the following code to your mobile login page code-behind:

    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Ensure that after logging in, mobile users stay on mobile pages
            string returnUrl = Request.QueryString["ReturnUrl"];
            if (String.IsNullOrEmpty(returnUrl))
            {
                returnUrl = "~/Mobile/";
            }
            LoginUser.DestinationPageUrl = returnUrl;
    
            // (the following line is already present by default)
            RegisterHyperLink.NavigateUrl = "Register.aspx?ReturnUrl=" 
                                            + HttpUtility.UrlEncode(returnUrl);
        }
    }
    

    Dieser Code setzt voraus, dass Ihre Seite über ein Login-Server Steuerelement namens LoginUser verfügt, wie in der Standard Projektvorlage.This code assumes your page has a Login server control called LoginUser, as in the default project template.

Arbeiten mit Ausgabe CachingWorking with Output Caching

Wenn Sie die Ausgabe Zwischenspeicherung verwenden, achten Sie darauf, dass ein Desktop Benutzer standardmäßig eine bestimmte URL aufrufen kann (wodurch die Ausgabe zwischengespeichert wird), gefolgt von einem mobilen Benutzer, der dann die zwischengespeicherte Desktop Ausgabe empfängt.If you're using output caching, beware that by default it's possible for a desktop user to visit a certain URL (causing its output to be cached), followed by a mobile user who then receives the cached desktop output. Diese Warnung gilt unabhängig davon, ob Sie Ihre Master Seite nur nach Gerätetyp variieren oder vollständig getrennte Web Forms pro Gerätetyp implementieren.This warning applies whether you're just varying your master page by device type, or implementing totally separate Web Forms per device type.

Um das Problem zu vermeiden, können Sie ASP.NET anweisen, den Cache Eintrag entsprechend der Frage zu verändern, ob der Besucher ein mobiles Gerät verwendet.To avoid the problem, you can instruct ASP.NET to vary the cache entry according to whether the visitor is using a mobile device. Fügen Sie der OutputCache-Deklaration Ihrer Seite einen VaryByCustom-Parameter wie folgt hinzu:Add a VaryByCustom parameter to your page's OutputCache declaration as follows:

<%@ OutputCache VaryByParam="*" Duration="60" VaryByCustom="isMobileDevice" %>

Definieren Sie als nächstes IsMobileDevice als benutzerdefinierten Cache Parameter, indem Sie die folgende Methoden Überschreibung zu ihrer Global.asax.cs-Datei hinzufügen:Next, define isMobileDevice as a custom cache parameter by adding the following method override to your Global.asax.cs file:

public override string GetVaryByCustomString(HttpContext context, string custom)
{
    if (string.Equals(custom, "isMobileDevice", StringComparison.OrdinalIgnoreCase))
        return context.Request.Browser.IsMobileDevice.ToString();

    return base.GetVaryByCustomString(context, custom);
}

Dadurch wird sichergestellt, dass Mobile Besucher der Seite keine Ausgabe erhalten, die zuvor von einem Desktop Besucher in den Cache eingefügt wurde.This will ensure that mobile visitors to the page don't receive output previously put into the cache by a desktop visitor.

Ein funktionierendes BeispielA working example

Um diese Techniken in Aktion zu sehen, laden Sie die Codebeispiele dieses Whitepaperherunter.To see these techniques in action, download this white paper's code samples. Die Web Forms Beispielanwendung leitet Mobile Benutzer automatisch an eine Reihe von mobilen Seiten in einem Unterordner mit dem Namen "Mobile" weiter.The Web Forms sample application automatically redirects mobile users to a set of mobile-specific pages in a subfolder called Mobile. Das Markup und die Formatierung dieser Seiten sind für Mobile Browser besser optimiert, wie in den folgenden Screenshots zu sehen ist:The markup and styling of those pages is better optimized for mobile browsers, as you can see from the following screenshots:

Weitere Tipps zum Optimieren von Markup und CSS für Mobile Browser finden Sie im Abschnitt "Formatieren von mobilen Seiten für Mobile Browser" weiter unten in diesem Dokument.For more tips about optimizing your markup and CSS for mobile browsers, see the section "Styling mobile pages for mobile browsers" later in this document.

Funktionsweise von ASP.NET MVC-Anwendungen für Mobile spezifische SeitenHow ASP.NET MVC applications can present mobile-specific pages

Da das Model-View-Controller-Muster die Anwendungslogik (in Controllern) von der Präsentationslogik (in Sichten) entkoppelt, können Sie eine der folgenden Ansätze für die Behandlung von mobilen Unterstützung in Server seitigem Code auswählen:Since the Model-View-Controller pattern decouples application logic (in controllers) from presentation logic (in views), you can choose from any of the following approaches to handling mobile support in server-side code:

  1. *die gleichen Controller und Ansichten sowohl für Desktop-als auch für Mobile Browser verwenden, die Ansichten aber je nach Gerätetyp mit unterschiedlichen Razor-Layouts darstellen.*Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type*. Diese Option funktioniert am besten, wenn Sie identische Daten auf allen Geräten anzeigen, aber einfach andere CSS-Stylesheets bereitstellen oder einige HTML-Elemente der obersten Ebene für Mobiltelefone ändern möchten.This option works best if you're displaying identical data on all devices, but simply want to supply different CSS stylesheets or change a few top-level HTML elements for mobiles.
  2. Verwenden Sie für Desktop-und Mobile Browser dieselben Controller, aber je nach Gerätetyp unterschiedliche Ansichten.Use the same controllers for both desktop and mobile browsers, but render different views depending on the device type. Diese Option funktioniert am besten, wenn Sie ungefähr dieselben Daten anzeigen und die gleichen Workflows für Endbenutzer bereitstellen möchten, aber ein sehr anderes HTML-Markup für das verwendete Gerät darstellen möchten.This option works best if you're displaying roughly the same data and providing the same workflows for end users, but want to render very different HTML markup to suit the device being used.
  3. *separate Bereiche für Desktop-und Mobile Browser erstellen, die für jede * unabhängige Controller und Ansichten implementieren.*Create separate areas for desktop and mobile browsers, implementing independent controllers and views for each*. Diese Option funktioniert am besten, wenn Sie sehr unterschiedliche Bildschirme mit unterschiedlichen Informationen anzeigen und den Benutzer durch verschiedene Workflows leiten, die für den Gerätetyp optimiert sind.This option works best if you're displaying very different screens, containing different information and leading the user through different workflows optimized for their device type. Dies kann eine Wiederholung von Code bedeuten. Sie können dies jedoch minimieren, indem Sie eine gemeinsame Logik in eine zugrunde liegende Ebene oder einen zugrunde liegenden Dienst einbeziehen.It may mean some repetition of code, but you can minimize that by factoring out common logic into an underlying layer or service.

Wenn Sie die erste Option nutzen und nur das Razor-Layout pro Gerätetyp variieren möchten, ist es sehr einfach.If you want to take the first option and vary only the Razor layout per device type, it's very easy. Ändern Sie einfach die _viewstart. cshtml-Datei wie folgt:Just modify your _ViewStart.cshtml file as follows:

@{
    Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml"
                                            : "~/Views/Shared/_Layout.cshtml";
}

Nun können Sie ein mobiles spezifisches Layout mit dem Namen _layoutmobile. cshtml mit einer für mobile Geräte optimierten Seitenstruktur und CSS-Regeln erstellen.Now you can create a mobile-specific layout called _LayoutMobile.cshtml with a page structure and CSS rules optimized for mobile devices.

Wenn Sie die zweite Option zum Rendering ganz verschiedener Ansichten gemäß dem Gerätetyp des Besuchers nutzen möchten, lesen Sie den Blogbeitrag von Scott Hanselman.If you want to take the second option render totally different views according to the visitor's device type, see Scott Hanselman's blog post.

Im restlichen Teil dieses Artikels geht es um die dritte Option – Erstellen separater Controller und Ansichten für mobile Geräte – damit Sie genau steuern können, welche Teilmenge der Funktionen für Mobile Besucher angeboten wird.The rest of this paper focuses on the third option – creating separate controllers and views for mobile devices – so you can control exactly what subset of functionality is offered for mobile visitors.

Einrichten eines mobilen Bereichs in Ihrer ASP.NET MVC-AnwendungSetting up a Mobile area within your ASP.NET MVC application

Sie können einen Bereich namens "Mobile" zu einer vorhandenen ASP.NET MVC-Anwendung auf normale Weise hinzufügen: Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie dann Bereich hinzufügen aus.You can add an area called "Mobile" to an existing ASP.NET MVC application in the normal way: right-click on your project name in Solution Explorer, then choose Add à Area. Sie können dann Controller und Ansichten wie für jeden anderen Bereich in einer ASP.NET MVC-Anwendung hinzufügen.You can then add controllers and views as you would for any other area within an ASP.NET MVC application. Fügen Sie z. b. einen neuen Controller namens HomeController zum mobilen Bereich hinzu, der als Homepage für Mobile Besucher fungiert.For example, add to your Mobile area a new controller called HomeController to act as a homepage for mobile visitors.

Sicherstellen, dass die URL/Mobile die mobile Homepage erreichtEnsuring the URL /Mobile reaches the mobile homepage

Wenn Sie möchten, dass die URL/Mobile die Index Aktion in HomeController innerhalb Ihres mobilen Bereichs erreicht, müssen Sie zwei kleine Änderungen an der Routing Konfiguration vornehmen.If you want the URL /Mobile to reach the Index action on HomeController inside your Mobile area, you will need to make two small changes to your routing configuration. Aktualisieren Sie zunächst Ihre mobilearearegistration-Klasse so, dass HomeController der Standard Controller in Ihrem mobilen Bereich ist, wie im folgenden Code gezeigt:First, update your MobileAreaRegistration class so that HomeController is the default controller in your Mobile area, as shown in the following code:

public override void RegisterArea(AreaRegistrationContext context)
{
    // By default there is no "controller" parameter in the following line. 
    // Add one referencing "Home" as shown.
    context.MapRoute(
        "Mobile_default",
        "Mobile/{controller}/{action}/{id}",
        new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

Dies bedeutet, dass sich die mobile Homepage nun unter/Mobile anstelle von/Mobile/Home befindet, da "Home" nun der implizit standardmäßige Controller Name für Mobile Seiten ist.This means the mobile homepage will now be located at /Mobile, rather than /Mobile/Home, because "Home" is now the implicitly default controller name for mobile pages.

Beachten Sie, dass Sie durch Hinzufügen eines zweiten HomeController zu Ihrer Anwendung (d. h. dem mobilen Gerät, zusätzlich zum vorhandenen Desktop eines) Ihre reguläre Desktop-Startseite beschädigt haben.Next, note that by adding a second HomeController to your application (i.e., the mobile one, in addition to the existing desktop one), you'll have broken your regular desktop homepage. Es tritt ein Fehler mit dem Fehler "eswurden mehrere Typen gefunden, die dem Controller mit dem Namen ' Home ' entsprechen" ab.It will fail with the error "Multiple types were found that match the controller named 'Home'". Um dieses Problem zu beheben, aktualisieren Sie Ihre Routing Konfiguration auf oberster Ebene (in Global.asax.cs), um anzugeben, dass Ihr Desktop-HomeController bei Mehrdeutigkeit Priorität haben sollte:To resolve this, update your top-level routing configuration (in Global.asax.cs) to specify that your desktop HomeController should take priority when there's ambiguity:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",
        "{controller}/{action}/{id}",
        new { controller = "Home", action = "Index", id = UrlParameter.Optional },
        // Add the namespace of your desktop controllers here
        new[] { "YourApplication.Controllers" } 
    );
}

Der Fehler wird angezeigt, und die URL http://yoursite/erreicht die Desktop Homepage, und http://yoursite/Mobile/erreicht die mobile Homepage.Now the error will go away, and the URL http://yoursite/ will reach the desktop homepage, and http://yoursite/mobile/ will reach the mobile homepage.

Umleiten mobiler Besucher an Ihren mobilen BereichRedirecting mobile visitors to your mobile area

In ASP.NET MVC gibt es viele verschiedene Erweiterbarkeits Punkte. es gibt also viele Möglichkeiten, Umleitungs Logik einzufügen.There are many different extensibility points in ASP.NET MVC, so there are many possible ways to inject redirection logic. Eine saubere Option ist das Erstellen eines Filter Attributs [redirectmobiledevicestomobilearea], das eine Umleitung ausführt, wenn die folgenden Bedingungen erfüllt sind:One neat option is to create a filter attribute, [RedirectMobileDevicesToMobileArea], that performs a redirection if the following conditions are met:

  1. Dies ist die erste Anforderung in der Sitzung des Benutzers (d. h. Session. IsNewSession ist true).It's the first request in the user's session (i.e., Session.IsNewSession equals true)
  2. Die Anforderung stammt von einem mobilen Browser (d.h. Request. Browser. IsMobileDevice ist true).The request comes from a mobile browser (i.e., Request.Browser.IsMobileDevice equals true)
  3. Der Benutzer fordert im mobilen Bereich nicht bereits eine Ressource an (d. h., der Pfad Teil der URL beginnt nicht mit/Mobile).The user is not already requesting a resource in the mobile area (i.e., the path part of the URL does not begin with /Mobile)

Das in diesem Whitepaper enthaltene herunterladbare Beispiel enthält eine Implementierung dieser Logik.The downloadable sample included with this white paper includes an implementation of this logic. Sie wird als Autorisierungs Filter implementiert, der von "Autorität Attribute" abgeleitet ist. Dies bedeutet, dass Sie ordnungsgemäß funktionieren kann, auch wenn Sie die Ausgabe Zwischenspeicherung verwenden (andernfalls, wenn ein Desktop Besucher zum ersten Mal auf eine bestimmte URL zugreift, kann die Desktop Ausgabe zwischengespeichert und dann für nachfolgende Mobile Besucher).It's implemented as an authorization filter, derived from AuthorizeAttribute, which means it can work correctly even if you are using output caching (otherwise, if a desktop visitor first accesses a certain URL, the desktop output might be cached and then served to subsequent mobile visitors).

Da es sich um einen Filter handelt, können Sie auswählen, ob Sie ihn auf bestimmte Controller und Aktionen anwenden möchten, z. b.As it's a filter, you can choose either to apply it to specific controllers and actions, e.g.,

public class HomeController : Controller
{
    [RedirectMobileDevicesToMobileArea] // Applies just to this action
    public ActionResult Index()
    {
        // ...
    }
}

oder Sie können Sie auf alle Controller und Aktionen als globalen MVC 3- Filter in ihrer Global.asax.cs-Datei anwenden:or you can apply it to all controllers and actions as an MVC 3 global filter in your Global.asax.cs file:

protected void Application_Start()
{
    // (rest of method unchanged)

    // Using "order" value 1 means it will run after unordered filters
    // associated with specific controllers or actions, so the redirection 
    // location can be overridden for specific actions
    GlobalFilters.Filters.Add(new RedirectMobileDevicesToMobileAreaAttribute(), 1);
}

Das herunterladbare Beispiel veranschaulicht auch, wie Sie Unterklassen dieses Attributs erstellen können, die an bestimmte Speicherorte innerhalb Ihres mobilen Bereichs umgeleitet werden.The downloadable sample also demonstrates how you can create subclasses of this attribute that redirect to specific locations within your mobile area. Dies bedeutet beispielsweise Folgendes:This means, for example, you can:

  • Registrieren Sie einen globalen Filter, wie oben gezeigt, der standardmäßig Mobile Besucher an die mobile Homepage sendet.Register a global filter as shown above that sends mobile visitors to the mobile homepage by default.
  • Wenden Sie außerdem einen speziellen [redirectmobiledevicestomobileproductpage]-Filter auf die Aktion "Produktanzeigen" an, die Mobile Besucher zur mobilen Version der von Ihnen angeforderten Produktseite führt.Also apply a special [RedirectMobileDevicesToMobileProductPage] filter to a "view product" action that takes mobile visitors to the mobile version of whatever product page they had requested.
  • Wenden Sie auch andere spezielle Unterklassen des Filters auf bestimmte Aktionen an, indem Sie Mobile Besucher an die entsprechende Mobile Seite umleiten.Also apply other special subclasses of the filter to specific actions, redirecting mobile visitors to the equivalent mobile page

Konfigurieren der Formular Authentifizierung zur Berücksichtigung ihrer mobilen SeitenConfiguring Forms Authentication to respect your mobile pages

Wenn Sie die Formular Authentifizierung verwenden, sollten Sie beachten, dass ein Benutzer, der sich anmelden muss, den Benutzer automatisch an eine einzelne spezifische URL für das Anmelden (Log on) weiterleitet, die standardmäßig /Account/Logonlautet.If you're using Forms Authentication, you should note that when a user needs to log in, it automatically redirects the user to a single specific "log on" URL, which by default is /Account/LogOn. Dies bedeutet, dass Mobile Benutzer möglicherweise zu Ihrer Desktop-Aktion "Anmelden" umgeleitet werden.This means that mobile users may be redirected to your desktop "log on" action.

Um dieses Problem zu vermeiden, fügen Sie der Desktop Aktion "Anmelden" eine Logik hinzu, damit Mobile Benutzer erneut zu einer mobilen "Anmelden"-Aktion umgeleitet werden.To avoid this problem, add logic to your desktop "log on" action so that it redirects mobile users again to a mobile "log on" action. Wenn Sie die standardmäßige ASP.NET-MVC-Anwendungs Vorlage verwenden, aktualisieren Sie die Anmelde Aktion von AccountController wie folgt:If you're using the default ASP.NET MVC application template, update AccountController's LogOn action as follows:

public ActionResult LogOn()
{
    string returnUrl = Request.QueryString["ReturnUrl"];
    if ((returnUrl != null) && returnUrl.StartsWith("/Mobile/", 
                               StringComparison.OrdinalIgnoreCase)) 
    {
        return RedirectToAction("LogOn", "Account", 
                                new { Area = "Mobile", ReturnUrl = returnUrl });
    }
    return View();
}

und implementieren Sie dann eine geeignete Mobile-spezifische Aktion zum Anmelden auf einem Controller namens AccountController in Ihrem mobilen Bereich.and then implement a suitable mobile-specific "log on" action on a controller called AccountController in your Mobile area.

Arbeiten mit Ausgabe CachingWorking with Output Caching

Wenn Sie den [OutputCache]-Filter verwenden, müssen Sie erzwingen, dass der Cache Eintrag je nach Gerätetyp variieren kann.If you're using the [OutputCache] filter, you must force the cache entry to vary by device type. Schreiben Sie z. b. Folgendes:For example, write:

[OutputCache(Duration = 60, VaryByParam = "*", VaryByCustom = "isMobileDevice")]

Fügen Sie dann die folgende Methode zu ihrer Global.asax.cs-Datei hinzu:Then, add the following method to your Global.asax.cs file:

public override string GetVaryByCustomString(HttpContext context, string custom)
{
    if (string.Equals(custom, "isMobileDevice", StringComparison.OrdinalIgnoreCase))
        return context.Request.Browser.IsMobileDevice.ToString();

    return base.GetVaryByCustomString(context, custom);
}

Dadurch wird sichergestellt, dass Mobile Besucher der Seite keine Ausgabe erhalten, die zuvor von einem Desktop Besucher in den Cache eingefügt wurde.This will ensure that mobile visitors to the page don't receive output previously put into the cache by a desktop visitor.

Ein funktionierendes BeispielA working example

Um diese Techniken in Aktion zu sehen, laden Sie die Codebeispiele dieses Whitepaperherunter.To see these techniques in action, download this white paper's code associated samples. Das Beispiel enthält eine ASP.NET MVC 3 (Release Candidate)-Anwendung, die zur Unterstützung mobiler Geräte mithilfe der oben beschriebenen Methoden erweitert wurde.The sample includes an ASP.NET MVC 3 (Release Candidate) application enhanced to support mobile devices using the methods described above.

Weitere Anleitungen und VorschlägeFurther guidance and suggestions

Die folgende Erläuterung gilt sowohl für Web Forms-als auch für MVC-Entwickler, die die in diesem Dokument behandelten Verfahren verwenden.The following discussion applies both to Web Forms and MVC developers who are using the techniques covered in this document.

Verbessern der Umleitungs Logik mithilfe von 51Degrees.mobi FoundationEnhancing your redirection logic using 51Degrees.mobi Foundation

Die in diesem Dokument gezeigte Umleitungs Logik ist möglicherweise für Ihre Anwendung ausreichend, aber Sie funktioniert nicht, wenn Sie Sitzungen deaktivieren müssen, oder durch Mobile Browser, die Cookies ablehnen (diese können keine Sitzungen aufweisen), da Sie nicht wissen, ob eine bestimmte Anforderung der erste von diesem Besucher.The redirection logic shown in this document may be perfectly sufficient for your application, but it won't work if you need to disable sessions, or with mobile browsers that reject cookies (these can't have sessions), because it won't know whether a given request is the first one from that visitor.

Sie haben bereits gelernt, wie das Open Source 51Degrees.mobi Foundation die Genauigkeit von ASP verbessern kann. Netzwerk-Browser Erkennung.You already learned how the open source 51Degrees.mobi Foundation can improve the accuracy of ASP.NET's browser detection. Außerdem verfügt sie über eine integrierte Möglichkeit, Mobile Besucher an bestimmte Orte umzuleiten, die in der Datei "Web. config" konfiguriert sind. Sie kann ohne Abhängigkeit von ASP.NET-Sitzungen (und somit Cookies) funktionieren, indem ein temporäres Protokoll mit Hashes von den HTTP-Headern und IP-Adressen der Besucher gespeichert wird, sodass es weiß, ob jede Anforderung das erste Element eines bestimmten Vistors ist.It also has a built-in ability to redirect mobile visitors to specific locations configured in Web.config. It's able to work without depending on ASP.NET Sessions (and hence cookies) by storing a temporary log of hashes of visitors' HTTP headers and IP addresses, so it knows whether or not each request is the first one from a given vistor.

Das folgende Element, das dem Abschnitt "meftyone" der Datei "Web. config" hinzugefügt wird, leitet die erste Anforderung von einem erkannten mobilen Gerät an die Seite um ~/Mobile/default.aspx.The following element added to the fiftyOne section of the web.config file will redirect the first request from a detected mobile device to the page ~/Mobile/Default.aspx. Alle Anforderungen an Seiten im mobilen Ordner werden unabhängig vom Gerätetyp nicht umgeleitet.Any requests to pages under the Mobile folder will not be redirected, regardless of device type. Wenn das Mobile Gerät für einen Zeitraum von 20 Minuten inaktiv ist, wird das Gerät vergessen, und nachfolgende Anforderungen werden als neue für die Umleitung behandelt.If the mobile device has been inactive for a period of 20 minutes or more the device will be forgotten and subsequent requests will be treated as new ones for the purposes of redirection.

<redirect firstRequestOnly="true"
          mobileHomePageUrl="~/Mobile/Default.aspx"
          timeout="20"
          devicesFile="~/App_Data/Devices.dat"
          mobilePagesRegex="/Mobile/" />

Weitere Informationen finden Sie in der 51degrees.mobi Foundation-Dokumentation.For more details, see 51degrees.mobi Foundation documentation.

Note

Sie können das 51Degrees.mobi Foundation-Umleitungs Feature für ASP.NET MVC-Anwendungen verwenden, aber Sie müssen ihre Umleitungs Konfiguration in Bezug auf einfache URLs definieren, nicht in Bezug auf Routing Parameter oder durch das Einfügen von MVC-Filtern auf Aktionen.You can use 51Degrees.mobi Foundation's redirection feature on ASP.NET MVC applications, but you will need to define your redirection configuration in terms of plain URLs, not in terms of routing parameters or by putting MVC filters on actions. Dies liegt daran, dass (zum Zeitpunkt des Schreibens) 51Degrees.mobi Foundation keine Filter oder Routing erkennt.This is because (at the time of writing) 51Degrees.mobi Foundation does not recognize filters or routing.

Deaktivieren von transcoders und Proxy ServernDisabling Transcoders and Proxy Servers

Mobile Network-Operatoren haben zwei allgemeine Ziele bei der Herangehensweise an das Mobile Internet:Mobile network operators have two broad objectives in their approach to the mobile internet:

  1. So viel relevante Inhalte wie möglich bereitstellenProvide as much relevant content as possible
  2. Maximieren Sie die Anzahl der Kunden, die die eingeschränkte Funk Netzwerkbandbreite gemeinsam nutzen können.Maximize the number of customers who can share the limited radio network bandwidth

Da die meisten Webseiten für große Bildschirme auf Desktop Größe und schnelle Breitbandverbindungen mit fester Linie entworfen wurden, verwenden viele Operatoren Transcoder oder Proxy Server , die Webinhalte dynamisch ändern.Since most web pages were designed for large desktop-sized screens and fast fixed-line broadband connections, many operators use transcoders or proxy servers that dynamically alter web content. Sie können Ihr HTML-Markup oder-CSS in kleinere Bildschirme ändern (insbesondere für "featuretelefone", die nicht die Verarbeitungsleistung zum Verarbeiten komplexer Layouts haben), und Sie können Ihre Images neu komprimieren (wodurch die Qualität erheblich reduziert wird), um die Seiten Zustellungs Geschwindigkeit zu verbessern.They may modify your HTML markup or CSS to suit smaller screens (especially for "feature phones" that lack the processing power to handle complex layouts), and they may recompress your images (significantly reducing their quality) to improve page delivery speeds.

Wenn Sie jedoch eine Mobile optimierte Version Ihrer Website erstellt haben, möchten Sie wahrscheinlich nicht, dass der Netzwerk Bediener weitere Auswirkungen darauf hat.But if you've taken the effort to produce a mobile-optimized version of your site, you probably don't want the network operator to interfere with it any further. Sie können der Seite_Lade Ereignis in einem beliebigen ASP.net Web Form die folgende Zeile hinzufügen:You can add the following line to the Page_Load event in any ASP.NET Web Form:

Response.Cache.SetNoTransforms();

Oder bei einem ASP.NET-MVC-Controller könnten Sie die folgende Methoden Überschreibung hinzufügen, sodass Sie für alle Aktionen auf diesem Controller gilt:Or, for an ASP.NET MVC controller, you could add the following method override so that it applies to all actions on that controller:

protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
    filterContext.HttpContext.Response.Cache.SetNoTransforms();
}

Die resultierende HTTP-Nachricht informiert W3C-kompatible Transcoder und Proxys daran, Inhalte nicht zu ändern.The resulting HTTP message informs W3C compliant transcoders and proxies not to alter content. Natürlich gibt es keine Garantie dafür, dass die Operatoren mobiler Netzwerke diese Nachricht beachten werden.Of course, there is no guarantee that mobile network operators will respect this message.

Formatieren von mobilen Seiten für Mobile BrowserStyling mobile pages for mobile browsers

Es geht über den Rahmen dieses Dokuments hinaus, um ausführlich zu beschreiben, welche Arten von HTML-Markup ordnungsgemäß funktionieren oder welche webentwurfs Techniken die Nutzbarkeit auf bestimmten Geräten maximieren.It's beyond the scope of this document to describe in great detail what kinds of HTML markup work correctly or which web design techniques maximize usability on particular devices. Es liegt an Ihnen, ein ausreichend einfaches Layout zu finden, das für einen Bildschirm mit mobilen Größen optimiert ist, ohne unzuverlässige HTML-oder CSS-Positionierungs Tricks zu verwenden.It's up to you to find a sufficiently simple layout, optimized for a mobile-sized screen, without using unreliable HTML or CSS positioning tricks. Ein wichtiges Verfahren, das erwähnenswert ist, ist jedoch das viewportmeta-Tag.One important technique worth mentioning, however, is the viewport meta tag.

Bestimmte moderne Mobile Browser zeigen Webseiten, die für Desktop Monitore vorgesehen sind, auf einem virtuellen Zeichenbereich an, der auch als "Viewport" bezeichnet wird (z. b. ist der virtuelle Viewport 980 Pixel breit auf iPhone und 850 Pixel breit in Opera Mobile). Skalieren Sie das Ergebnis nach unten, um es an die physischen Pixel des Bildschirms anzupassen.Certain modern mobile browsers, in an effort display web pages meant for desktop monitors, render the page on a virtual canvas, also called "viewport" (e.g., the virtual viewport is 980 pixels wide on iPhone, and 850 pixels wide on Opera Mobile by default) and then scale the result down to fit onto the screen's physical pixels. Der Benutzer kann dann diesen Viewport vergrößern und schwenken.The user can then zoom in and pan around that viewport. Dies hat den Vorteil, dass der Browser die Seite im vorgesehenen Layout anzeigen kann. er hat jedoch auch den Nachteil, dass er das Zoomen und Schwenken erzwingt, was für den Benutzer ungeeignet ist.This has the advantage that it lets the browser display the page in its intended layout, but it's also has the disadvantage that it forces zooming and panning, which is inconvenient for the user. Wenn Sie für Mobilgeräte entwickeln, ist es besser, einen schmalen Bildschirm zu entwerfen, damit keine Zoom-oder horizontale Bildläufe erforderlich sind.If you're designing for mobile, it's better to design for a narrow screen so that no zooming or horizontal scrolling is necessary.

Eine Möglichkeit, dem mobilen Browser mitzuteilen, wie breit der Viewport sein sollte, ist über das nicht dem Standard entsprechende Viewport -Meta-Tag.A way to tell the mobile browser how wide the viewport should be is through the nonstandard viewport meta tag. Wenn Sie z. b. Folgendes zum Head-Abschnitt der Seite hinzufügen,For example, if you add the following to your page's HEAD section,

<meta name="viewport" content="width=480">

durch die Unterstützung von Smartphone-Browsern wird die Seite auf einem 480-Pixel-weiten virtuellen Zeichenbereich angezeigt.then supporting smartphone browsers will lay out the page on a 480-pixel wide virtual canvas. Dies bedeutet, dass die Prozentsätze in Bezug auf diese 480-Pixel-Breite, nicht die Standardbreite des Viewports interpretiert werden, wenn Ihre HTML-Elemente ihre breiten in Prozent definieren.This means that if your HTML elements define their widths in percentage terms, the percentages will be interpreted with respect to this 480-pixel width, not the default viewport width. Daher ist es weniger wahrscheinlich, dass der Benutzer horizontal Zoomen und Schwenken muss – das mobile Browsen erheblich verbessert.As a result, the user is less likely to have to zoom and pan horizontally – considerably improving the mobile browsing experience.

Wenn Sie möchten, dass die Breite des Viewports mit den physischen Pixeln des Geräts identisch ist, können Sie Folgendes angeben:If you want the viewport width to match the device's physical pixels, you can specify the following:

<meta name="viewport" content="width=device-width">

Damit dies ordnungsgemäß funktioniert, müssen Elemente nicht explizit gezwungen werden, diese Breite zu überschreiten (z. b. mithilfe eines Width -Attributs oder einer CSS-Eigenschaft), da der Browser andernfalls gezwungen wird, einen größeren Viewport zu verwenden.For this to work correctly, you must not explicitly force elements to exceed that width (e.g., using a width attribute or CSS property), otherwise the browser will be forced to use a larger viewport regardless. Siehe auch: Weitere Informationen zum nicht dem Standard folgenden viewporttag.See also: more details about the nonstandard viewport tag.

Die meisten modernen Smartphones unterstützen die duale Ausrichtung: Sie können im hoch-oder Querformat gehalten werden.Most modern smartphones support dual orientation: they can be held in either portrait or landscape mode. Daher ist es wichtig, keine Annahmen über die Bildschirmbreite in Pixel zu treffen.So, it's important not to make assumptions about the screen width in pixels. Nehmen Sie nicht einmal an, dass die Bildschirmbreite fest ist, da der Benutzer sein Gerät erneut ausrichten kann, während Sie sich auf der Seite befinden.Don't even assume that the screen width is fixed, because the user can re-orient their device while they are on your page.

Ältere Windows Mobile-und BlackBerry-Geräte akzeptieren möglicherweise auch die folgenden Meta-Tags im Seitenkopf, um Sie darüber zu informieren, dass der Inhalt für mobile Geräte optimiert wurde und daher nicht transformiert werden sollte.Older Windows Mobile and Blackberry devices may also accept the following meta tags in the page header to inform them content has been optimized for mobile and therefore should not be transformed.

<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />

Zusätzliche RessourcenAdditional Resources

Eine Liste der Emulatoren und Simulatoren für mobile Geräte, die Sie zum Testen Ihrer Mobile ASP.NET-Webanwendung verwenden können, finden Sie auf der Seite simulieren beliebter mobiler Geräte zu TestZwecken.For a list of mobile device emulators and simulators you can use to test your mobile ASP.NET web application, see the page Simulate popular mobile devices for testing.

GuthabenCredits

  • Primärer Autor: Steven SandersonPrimary author: Steven Sanderson
  • Reviewer/zusätzliche inhaltswriter: James Rosewell, Mikael Söderström, Scott Hanselman, Scott HunterReviewers / additional content writers: James Rosewell, Mikael Söderström, Scott Hanselman, Scott Hunter