Vær progressiv med Modernizr og ASP.NET 4.5

Microsoft Web-plattformen ASP.NET 4.5 omfatter de nyeste standardene, spesielt HTML5 og CSS3. Fellen med å bruke nye standarder og funksjoner er alle de eldre nettleserne som ikke støtter det nyeste og beste, så du må utvikle deg med progressiv forbedring i tankene. Målet med progressiv forbedring er å levere den beste opplevelsen til et bredest mulig publikum uavhengig av nettleser.

Modernizr open source JavaScript-biblioteket gir en del av å nå dette målet ved å gjøre det enkelt å bestemme om en funksjon kan brukes. La oss se på Modernizers integrasjon med ASP.NET 4.5 og Visual Studio 2012, mens vi følger nøye med på hvordan denne integrasjonen fungerer via nye ASP.NET 4.5-funksjoner.

En pakkeløsning

Sammen med jQuery og Knockout.js er Modernizr inkludert i Visual Studio 2012; i tillegg kan den installeres via NuGet. Figur A viser hvordan du installerer pakken via NuGet i Visual Studio Ultimate 2012. Når du har installert den, kan du legge den til prosjekter via Behandle-knappen vist i figur B. Bare for latter, viser figur C det som vises i et kodekart for et enkelt ASP.NET-webapplikasjon. Eventuelle oppdateringer til Modernizr-biblioteket vil være tilgjengelige via området Oppdateringer i pakkehåndteringsgrensesnittet vist i figur A. Du kan alltid bruke NuGet-konsollgrensesnittet også. Modernizr ble inkludert i installasjonen av Visual Studio Ultimate 2012 og er en del av alle webapplikasjoner jeg oppretter i IDE. Figur A

Modernizr JavaScript-bibliotek administrert via NuGet Package Manager (Klikk på bildet for å forstørre.)
Figur B

Manage-knappen lar deg legge til / fjerne Modernizr til / fra prosjektene dine. (Klikk på bildet for å forstørre.)
Figur C

Vise Modernizr-pakken innen prosjektpakkestruktur via kodekart (Klikk på bildet for å forstørre.)

NuGet legger til en package.config-fil til applikasjonen din, som den bruker for å spore pakker og deres versjoner. Du vil finne filen i basekatalogen til et webapplikasjon opprettet i Visual Studio 2012. Som et eksempel gir følgende liste en del av filen package.config for mitt eksempelprosjekt.

Hvert pakkeelement har en ID, versjon og .NET Framework som det er målrettet mot.

Bruker den i et ASP.NET webapplikasjon

Når Modernizr er lagt til webapplikasjonen din, plasseres bibliotekfilen i skriptkatalogen som vist i figur D. Biblioteket har også blitt åpnet i IDE for å se kilden.

Figur D

Plasseringen av Modernizr-bibliotekets filer i et prosjekt. (Klikk på bildet for å forstørre.)
Biblioteket er også en standardfunksjon i webapplikasjonen som figur E viser. Det er inkludert i nettstedet via Site.master-malfilen ved å bruke følgende kodeblokk.
 Figur E 

Modernizr-funksjonen innen webapplikasjoner. (Klikk på bildet for å forstørre.)

Det er her det kan være litt forvirrende, eller kanskje det bare er meg. Bundling er en ny funksjon som er lagt til med ASP.NET 4.5 at den leveres via System.Web.Optimization. I utgangspunktet lar den (sammen med minifisering) deg pakke flere CSS- og JavaScript-filer i ett pakke, og reduserer dermed antall og størrelse på HTTP-forespørsler applikasjonen gjør til webserveren. Bunter opprettes i BundleConfig.cs-filer (RegisterBundles er hovedmetoden), som er lokalisert i App_Code-katalogen til et ASP.NET 4.5-nettsted opprettet i Visual Studio 2012. Tilleggsmetoden til BundlesCollection gir kjøretøyet for å opprette bunter, så du kan legge til dine egne etter behov. Her er en prøvetaking av filen BundleConfig.cs opprettet for mitt enkle prosjekt.

 public static void RegisterBundles (BundleCollection-pakker) { 

pakker.Legg til (ny ScriptBundle ("~ / bundles / WebFormsJs"). Inkluder (

"~ / 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"));

pakker.Legg til (ny ScriptBundle ("~ / bundles / modernizr"). Inkluder ("~ / Scripts / modernizr- *")); }

Modernizr er lagt til bunten i den endelige linjen. Buntnavnet (/ bundles / modernizr) peker på alle filer som begynner med 'modernizr-' i skriptkatalogen til webapplikasjonen. Når det er sagt, er den tidligere nevnte Scripts.Render-linjen mer fornuftig, ettersom den bringer de nødvendige filene inn på hver side som bruker Site.master som mal. For CSS-filer brukes metoden Styles.Render. I tillegg til kodetilnærmingen som nettopp er beskrevet (ved å bruke C # -fil), lar Bundle.config XML-filen i programmets basekatalog også lage pakker. Kodealternativet gjør at systemet kan gjøre mer dynamiske ting, med avlusing som et stort, mens XML-konfigurasjonsfilen er mer statisk.

Krysset i dette biblioteket er opprettelsen av et Modernizr JavaScript-objekt som inneholder testresultater. Den vil teste mer enn 40 neste generasjons funksjoner. Den legger til klasser i html-elementet for å forklare hva som ikke støttes, og gir funksjoner for bakoverkompatibilitet med eldre nettlesere. Den grunnleggende tilnærmingen til disse testene er å bruke lastemetoden til Modernizr-objektet. I utgangspunktet forteller du det hva du skal teste, og deretter hvilket skript (er) som skal lastes hvis testen passerer (jep) eller mislykkes (ikke). Følgende utdrag bestemmer om nettleseren støtter HTML5 Canvas-funksjonen.

 Modernizr.load ({ 

test: Modernizr.canvas,

Jepp: 'CanvasSupport.js',

nope: 'NonCanvas.js'

});

Den nåværende listen over nettlesere som støttes inkluderer IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+ og Chrome. IOS sin mobile Safari, Android's WebKit-nettleser, Opera Mobile, Firefox Mobile og BlackBerry 6+ er de mobile plattformene som støttes. Besøk nettstedet Modernizer for mer informasjon om hvordan biblioteket skal fungere i neste prosjekt.

Gi dem bare det de kan bruke

Modernizr-biblioteket gir en enkel måte å bygge applikasjoner som bruker de nyeste webstandardene / funksjonene når det er mulig (dvs. nettlesere / klienter som støtter det), men forhåpentligvis ikke påvirker opplevelsen til brukere som ikke kan bruke de nye funksjonene, negativt. Microsoft har omfavnet dette biblioteket mens det gjorde det til et standardalternativ for ASP.NET 4.5 Web-applikasjoner opprettet med Visual Studio 2012, og gjør det enkelt tilgjengelig via NuGet.

Hvis du er interessert i Modernizr på serveren, sjekk ut dette GitHub-prosjektet.

Hold dine tekniske ferdigheter oppdatert ved å registrere deg på TechRepublics gratis nyhetsbrev om Software Engineer, levert hver tirsdag.

© Copyright 2021 | pepebotifarra.com