Seien Sie progressiv mit Modernizr und ASP.NET 4.5

Die Microsoft-Webplattform ASP.NET 4.5 umfasst die neuesten Standards, insbesondere HTML5 und CSS3. Die Falle bei der Verwendung neuer Standards und Funktionen sind alle älteren Browser, die nicht die neuesten und besten unterstützen. Sie müssen daher mit Blick auf die fortschreitende Verbesserung entwickeln. Ziel der progressiven Verbesserung ist es, unabhängig vom Browser die bestmögliche Erfahrung für ein möglichst breites Publikum zu erzielen.

Die Open-Source-JavaScript-Bibliothek von Modernizr bietet einen Teil zur Erreichung dieses Ziels, indem sie die Entscheidung erleichtert, ob eine Funktion verwendet werden kann. Schauen wir uns die Integration von Modernizer in ASP.NET 4.5 und Visual Studio 2012 an und achten Sie dabei genau darauf, wie diese Integration über die neuen ASP.NET 4.5-Funktionen funktioniert.

Ein Pauschalangebot

Modernizr ist neben jQuery und Knockout.js in Visual Studio 2012 enthalten. Darüber hinaus kann es über NuGet installiert werden. Abbildung A zeigt, wie das Paket über NuGet in Visual Studio Ultimate 2012 installiert wird. Nach der Installation können Sie es über die in Abbildung B gezeigte Schaltfläche Verwalten zu Projekten hinzufügen. Nur zum Lachen zeigt Abbildung C, dass es in einer Code Map für eine einfache ASP.NET-Webanwendung angezeigt wird. Alle Aktualisierungen der Modernizr-Bibliothek sind über den Bereich Aktualisierungen der in Abbildung A gezeigten Paketmanager-Oberfläche verfügbar. Sie können auch jederzeit die NuGet-Konsolenschnittstelle verwenden. Modernizr war in meiner Visual Studio Ultimate 2012-Installation enthalten und ist Teil jeder Webanwendung, die ich in der IDE erstelle. Abbildung A.

Modernizr JavaScript-Bibliothek, die über NuGet Package Manager verwaltet wird (Klicken Sie auf das Bild, um es zu vergrößern.)
Abbildung B.

Mit der Schaltfläche Verwalten können Sie Modernizr zu Ihren Projekten hinzufügen / daraus entfernen. (Klicken Sie auf das Bild, um es zu vergrößern.)
Abbildung C.

Anzeigen des Modernizr-Pakets innerhalb der Projektpaketstruktur über Code Map (Klicken Sie auf das Bild, um es zu vergrößern.)

NuGet fügt Ihrer Anwendung eine Datei packages.config hinzu, mit der Pakete und ihre Versionen verfolgt werden. Sie finden die Datei im Basisverzeichnis einer in Visual Studio 2012 erstellten Webanwendung. Die folgende Auflistung enthält beispielsweise einen Teil der Datei packages.config für mein Beispielprojekt.

Jedes Paketelement verfügt über eine ID, eine Version und das .NET Framework, auf das es abzielt.

Verwendung in einer ASP.NET-Webanwendung

Sobald Modernizr zu Ihrer Webanwendung hinzugefügt wurde, wird die Bibliotheksdatei im Skriptverzeichnis abgelegt (siehe Abbildung D) . Außerdem wurde die Bibliothek in der IDE geöffnet, um ihre Quelle anzuzeigen.

Abbildung D.

Der Speicherort der Modernizr-Bibliotheksdateien innerhalb eines Projekts. (Klicken Sie auf das Bild, um es zu vergrößern.)
Die Bibliothek ist auch eine Standardfunktion der Webanwendung, wie Abbildung E zeigt. Es wird über die Site.master-Vorlagendatei mit dem folgenden Codeblock in die Site aufgenommen.
 Abbildung E. 

Die Modernizr-Funktion in Webanwendungen. (Klicken Sie auf das Bild, um es zu vergrößern.)

Hier kann es etwas verwirrend sein, oder vielleicht bin es nur ich. Die Bündelung ist eine neue Funktion, die mit ASP.NET 4.5 hinzugefügt wurde und über System.Web.Optimization bereitgestellt wird. Grundsätzlich können Sie damit (zusammen mit der Minimierung) mehrere CSS- und JavaScript-Dateien in einem Bundle bündeln und so die Anzahl und Größe der HTTP-Anforderungen reduzieren, die die Anwendung an den Webserver sendet. Bundles werden in BundleConfig.cs-Dateien erstellt (RegisterBundles ist die Hauptmethode), die sich im App_Code-Verzeichnis einer in Visual Studio 2012 erstellten ASP.NET 4.5-Website befinden. Die Add-Methode der BundlesCollection bietet also die Möglichkeit, Bundles zu erstellen Sie können bei Bedarf Ihre eigenen hinzufügen. Hier ist eine Auswahl der Datei BundleConfig.cs, die für mein einfaches Projekt erstellt wurde.

 public static void RegisterBundles (BundleCollection-Bundles) { 

bundles.Add (neues ScriptBundle ("~ / bundles / WebFormsJs"). Include (

"~ / Scripts / WebForms / WebForms.js",

"~ / Scripts / WebForms / WebUIValidation.js",

"~ / Scripts / WebForms / MenuStandards.js",

"~ / Scripts / WebForms / Focus.js",

"~ / Scripts / WebForms / GridView.js",

"~ / Scripts / WebForms / DetailsView.js",

"~ / Scripts / WebForms / TreeView.js",

"~ / Scripts / WebForms / WebParts.js"));

bundles.Add (neues ScriptBundle ("~ / bundles / modernizr"). Include ("~ / Scripts / modernizr- *")); }}

Modernizr wird dem Bundle in der letzten Zeile hinzugefügt. Der Bundle-Name (/ bundles / modernizr) verweist auf alle Dateien, die mit 'modernizr-' im Skriptverzeichnis der Webanwendung beginnen. Vor diesem Hintergrund ist die zuvor erwähnte Scripts.Render-Zeile sinnvoller, da sie die erforderlichen Dateien auf jede Seite bringt, die Site.master als Vorlage verwendet. Für CSS-Dateien wird die Styles.Render-Methode verwendet. Zusätzlich zu dem gerade beschriebenen Codeansatz (unter Verwendung der C # -Datei) können Sie mit der XML-Datei Bundle.config im Basisverzeichnis der Anwendung auch Bundles erstellen. Mit der Code-Option kann das System dynamischere Aufgaben ausführen, wobei das Debuggen eine große Rolle spielt, während die XML-Konfigurationsdatei statischer ist.

Der Kern dieser Bibliothek ist die Erstellung eines Modernizr-JavaScript-Objekts, das Testergebnisse enthält. Es werden mehr als 40 Funktionen der nächsten Generation getestet. Es fügt dem HTML-Element Klassen hinzu, um zu erklären, was nicht unterstützt wird, und bietet Funktionen für die Abwärtskompatibilität mit älteren Browsern. Der grundlegende Ansatz für diese Tests ist die Verwendung der Lademethode des Modernizr-Objekts. Grundsätzlich teilen Sie ihm mit, was getestet werden soll und welche Skripte geladen werden sollen, wenn der Test erfolgreich ist (yep) oder fehlschlägt (nein). Das folgende Snippet bestimmt, ob der Browser die HTML5-Canvas-Funktion unterstützt.

 Modernizr.load ({ 

Test: Modernizr.canvas,

yep: 'CanvasSupport.js',

Nein: 'NonCanvas.js'

});

Die aktuelle Liste der unterstützten Browser umfasst IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+ und Chrome. Die mobile Safari von iOS, der WebKit-Browser von Android, Opera Mobile, Firefox Mobile und BlackBerry 6+ sind die unterstützten mobilen Plattformen. Besuchen Sie die Modernizer-Website, um weitere Informationen darüber zu erhalten, wie Sie die Bibliothek in Ihrem nächsten Projekt einsetzen können.

Gib ihnen nur das, was sie benutzen können

Die Modernizr-Bibliothek bietet eine einfache Möglichkeit, Anwendungen zu erstellen, die nach Möglichkeit die neuesten Webstandards / -funktionen verwenden (dh Browser / Clients, die dies unterstützen), ohne die Erfahrung von Benutzern zu beeinträchtigen, die die neuen Funktionen nicht verwenden können. Microsoft hat diese Bibliothek übernommen und sie zu einer Standardoption für mit Visual Studio 2012 erstellte ASP.NET 4.5-Webanwendungen gemacht und über NuGet problemlos verfügbar gemacht.

Wenn Sie an Modernizr auf dem Server interessiert sind, schauen Sie sich dieses GitHub-Projekt an.

Halten Sie Ihre technischen Fähigkeiten auf dem neuesten Stand, indem Sie sich für den kostenlosen Software Engineer-Newsletter von TechRepublic anmelden, der jeden Dienstag zugestellt wird.

© Copyright 2021 | pepebotifarra.com