Ole edistyksellinen Modernizrin ja ASP.NET 4.5: n kanssa

Microsoftin Web-alusta ASP.NET 4.5 sisältää uusimmat standardit, etenkin HTML5 ja CSS3. Uusien standardien ja ominaisuuksien käytön loukku on kaikki vanhemmat selaimet, jotka eivät tue uusinta ja parhainta, joten sinun on kehitettävä asteittaista parannusta ajatellen. Asteittaisen parantamisen tavoitteena on tarjota paras kokemus mahdollisimman laajalle yleisölle selaimesta riippumatta.

Modernizr-avoimen lähdekoodin JavaScript-kirjasto tarjoaa osan tämän tavoitteen saavuttamisesta tekemällä helpoksi päättää, voidaanko ominaisuutta käyttää. Tarkastellaan Modernizerin integrointia ASP.NET 4.5: n ja Visual Studio 2012: n kanssa. Tarkkailemme samalla tarkasti, kuinka tämä integrointi toimii uusien ASP.NET 4.5 -ominaisuuksien avulla.

Paketti

JQueryn ja Knockout.js: n ohella Modernizr sisältyy Visual Studio 2012 -versioon; Lisäksi se voidaan asentaa NuGetin kautta. Kuva A näyttää kuinka asentaa paketti NuGetin kautta Visual Studio Ultimate 2012 -sovellukseen. Kun olet asentanut, voit lisätä sen projektiin kuvassa B esitetyn Hallinta-painikkeen avulla. Vain nauramiseksi, kuva C näyttää sen näkyvän yksinkertaisen ASP.NET-verkkosovelluksen koodikartassa. Kaikki Modernizr-kirjaston päivitykset ovat saatavissa kuvassa A esitetyn paketinhallintarajapinnan Päivitykset-alueen kautta. Voit myös käyttää myös NuGet-konsolin käyttöliittymää. Modernizr sisällytettiin Visual Studio Ultimate 2012 -asennukseen ja on osa jokaista IDE: ssä luomaa verkkosovellusta. Kuvio A

Modernizr JavaScript -kirjasto, jota hallinnoidaan NuGet Package Manager -sovelluksen kautta (napsauta kuvaa suurentaaksesi.)
Kuvio B

Hallinta-painikkeen avulla voit lisätä / poistaa Modernizrin projektiisi tai projektiisi. (Napsauta kuvaa suurentaaksesi.)
Kuvio C

Modernizr-paketin tarkasteleminen projektipakettirakenteessa Code Map -sovelluksen avulla (napsauta kuvaa suurentaaksesi.)

NuGet lisää paketit.config-tiedoston sovellukseesi, jota se käyttää pakettien ja niiden versioiden seuraamiseen. Tiedosto löytyy Visual Studio 2012: ssa luodun Web-sovelluksen perushakemistosta. Esimerkiksi seuraava luettelo tarjoaa osan pakettien.config-tiedostosta näyteprojektilleni.

Jokaisella paketielementillä on tunnus, versio ja .NET-kehys, johon se kohdistaa.

Sen käyttäminen ASP.NET-Web-sovelluksessa

Kun Modernizr on lisätty Web-sovellukseesi, kirjastotiedosto sijoitetaan Scripts-hakemistoon kuvan D mukaisesti . Myös kirjasto on avattu IDE: ssä lähteen tarkastelemiseksi.

Kuvio D

Modernizr-kirjastotiedostojen sijainti projektissa. (Napsauta kuvaa suurentaaksesi.)
Kirjasto on myös verkkosovelluksen vakioominaisuus, kuten kuvio E osoittaa. Se sisältyy sivustoon Site.master-mallitiedoston kautta seuraavaa koodilohkoa käyttämällä.
 Kuvio E 

Modernizr-ominaisuus web-sovelluksissa. (Napsauta kuvaa suurentaaksesi.)

Tässä se voi olla hieman hämmentävä, tai ehkä se on vain minä. Niputtaminen on uusi ominaisuus, joka on lisätty ASP.NET 4.5: een ja joka toimitetaan System.Web.Optimization-palvelun kautta. Pohjimmiltaan se (yhdessä pienentämisen kanssa) antaa sinun niputtaa useita CSS- ja JavaScript-tiedostoja yhdeksi paketiksi, mikä vähentää sovelluksen Web-palvelimelle esittämien HTTP-pyyntöjen määrää ja kokoa. Niput luodaan BundleConfig.cs-tiedostoihin (päämenetelmä on RegisterBundles), jotka sijaitsevat Visual Studiossa 2012 luodun ASP.NET 4.5 -verkkosivuston App_Code-hakemistossa. BundlesCollection-lisäysmenetelmä tarjoaa ajoneuvon kimppujen luomiseen, joten voit lisätä omat tarpeen mukaan. Tässä on otos BundleConfig.cs-tiedostosta, joka on luotu yksinkertaiseen projektiini.

 julkinen staattinen void RegisterBundles (BundleCollection-niput) { 

niput.Lisää (uusi ScriptBundle ("~ / niput / WebFormsJs"). Sisällytä (

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

niput.Lisää (uusi ScriptBundle ("~ / niput / modernizr"). Sisällytä ("~ / Scripts / modernizr- *")); }

Modernizr lisätään kimppuun viimeisellä rivillä. Nipun nimi (/ bundles / modernizr) viittaa kaikkiin tiedostoihin, jotka alkavat ”modernizr-” Web-sovelluksen skriptihakemistossa. Tästä huolimatta aiemmin mainittu Scripts.Render-rivi on järkevämpi, koska se tuo tarvittavat tiedostot jokaiselle sivulle, joka käyttää Site.master-mallia. CSS-tiedostoissa käytetään Styles.Render-menetelmää. Äskettäin kuvatun (C #-tiedostoa käyttävän) koodilähestymistavan lisäksi sovelluksen perushakemistossa oleva Bundle.config XML-tiedosto antaa sinun luoda myös paketteja. Koodiasetuksen avulla järjestelmä voi tehdä dynaamisempia asioita, virheenkorjauksen ollessa iso, kun taas XML-määritystiedosto on staattisempi.

Tämän kirjaston ydin on Modernizr JavaScript -objektin luominen, joka sisältää testitulokset. Se testaa yli 40 seuraavan sukupolven ominaisuuksia. Se lisää luokkia html-elementtiin selittääkseen mitä ei tueta ja tarjoaa ominaisuuksia taaksepäin yhteensopivuuden vanhempien selainten kanssa. Peruslähestymistapa näihin kokeisiin on Modernizr-kohteen kuormitusmenetelmän käyttäminen. Periaatteessa kerrot sille, mitä testata ja sitten mitä komentosarjoja ladata, jos testi läpäisee (jep) tai epäonnistuu (nope). Seuraava katkelma määrittää, tukeeko selain HTML5 Canvas -ominaisuutta.

 Modernizr.load ({ 

testi: Modernizr.canvas,

jep: 'CanvasSupport.js',

nope: 'NonCanvas.js'

});

Nykyinen tuettujen selainten luettelo sisältää IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+ ja Chrome. IOS: n mobiili Safari, Androidin WebKit-selain, Opera Mobile, Firefox Mobile ja BlackBerry 6+ tukevat mobiiliympäristöjä. Käy Modernizer-sivustolla saadaksesi lisätietoja kirjaston asettamisesta työskentelemään seuraavassa projektissasi.

Anna heille vain mitä he voivat käyttää

Modernizr-kirjasto tarjoaa suoraviivaisen tavan rakentaa sovelluksia, jotka käyttävät uusimpia Web-standardeja / -ominaisuuksia mahdollisuuksien mukaan (ts. Selaimet / asiakkaat, jotka sitä tukevat), mutta toivottavasti ei vaikuta kielteisesti käyttäjien kokemukseen, jotka eivät pysty käyttämään uusia ominaisuuksia. Microsoft on omaksunut tämän kirjaston ja tehnyt siitä vakiovarusteen Visual Studio 2012 -sovelluksella luotuille ASP.NET 4.5 -verkkosovelluksille, ja tehnyt siitä helpon saatavuuden NuGetin kautta.

Jos olet kiinnostunut Modernizristä palvelimella, tutustu tähän GitHub-projektiin.

Pidä insinööritaitosi ajan tasalla kirjautumalla TechRepublicin ilmaiseen Software Engineer -uutiskirjeeseen, joka toimitetaan joka tiistai.

© Copyright 2021 | mobilegn.com